/* /assets/css/layout.css */

/* =========================
   PAGE LAYOUT / WRAPS / SECTIONS
   ========================= */

:root{
  --bg-0:#070c0a;
  --bg-1:#0b1210;
  --text:#f3f6f4;
  --muted:rgba(255,255,255,.74);
  --shadow:0 18px 50px rgba(0,0,0,.36);
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--text);
  background:var(--bg-0);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

.wrap{
  width:min(1280px, calc(100% - 48px));
  margin:0 auto;
}

.section{
  padding:54px 0;
}

.page{
  min-height:100vh;
  background:
    radial-gradient(1100px 620px at 15% 0%, rgba(42,163,104,.12), transparent 58%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 70%, var(--bg-0) 100%);
}

/* =========================
   PAGE THEMES
   ========================= */
body.theme-contact .page{
  background:
    radial-gradient(1100px 620px at 15% 0%, rgba(42,163,104,.10), transparent 58%),
    radial-gradient(1000px 560px at 85% 10%, rgba(49,163,255,.16), transparent 58%),
    radial-gradient(900px 520px at 55% 0%, rgba(255,90,95,.08), transparent 60%),
    linear-gradient(180deg, #070c0a 0%, #0b1210 55%, #070c0a 100%);
}

body.theme-contact .hero-bg{
  background:
    linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.40) 55%, rgba(0,0,0,.18) 100%),
    url("/assets/img/bim-planung-tga-digitale-gebaeudeplanung-gebaeudetechnik.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


body.theme-home .page{
  background:
    radial-gradient(1100px 620px at 15% 0%, rgba(42,163,104,.12), transparent 58%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 70%, var(--bg-0) 100%);
}

body.theme-sustain .page{
  background:
    radial-gradient(1100px 620px at 15% 0%, rgba(42,163,104,.16), transparent 58%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 70%, var(--bg-0) 100%);
}

body.theme-fire .page{
  background:
    radial-gradient(1100px 620px at 15% 0%, rgba(255,90,95,.14), transparent 58%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 70%, var(--bg-0) 100%);
}

body.theme-tga .page{
  background:
    radial-gradient(1100px 620px at 15% 0%, rgba(49,163,255,.16), transparent 58%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 70%, var(--bg-0) 100%);
}

body.theme-tga .page{
  background:
    radial-gradient(1100px 620px at 15% 0%, rgba(49,163,255,.16), transparent 58%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 70%, var(--bg-0) 100%);
}

body.theme-tga .hero-bg{
  background:
    linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.40) 55%, rgba(0,0,0,.18) 100%),
    url("/assets/img/bim-planung-tga-digitale-gebaeudeplanung-gebaeudetechnik.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* Projekte / Wissenswertes / Kontakt / Über uns sollen wie Startseite aussehen */
body.theme-projects .page,
body.theme-knowledge .page,
body.theme-contact .page,
body.theme-tga .page,
body.theme-about .page{
  background:
    radial-gradient(1100px 620px at 15% 0%, rgba(42,163,104,.12), transparent 58%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 70%, var(--bg-0) 100%);
}

/* =========================
   GLOBAL HERO
   ========================= */

.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:520px;
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.40) 55%, rgba(0,0,0,.18) 100%);
}

.hero-inner{
  position:relative;
  z-index:2;
  min-height:520px;
  padding:5.25rem 0 3rem;
  display:flex;
  align-items:flex-start;
}

.hero-inner > .wrap{
  width:100%;
}

@media (max-width:900px){
  .hero{
    min-height:420px;
  }

  .hero-inner{
    min-height:420px;
    padding:4.25rem 0 2.25rem;
  }
}

/* =========================
   HERO BACKGROUNDS PER PAGE
   ========================= */

body.theme-home .hero-bg{
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.55) 100%),
    url("/assets/img/ingenieurbuero-bauplanung-gebaeudetechnik-nachhaltiges-bauen-Brandschutz.jpeg");
}

body.theme-sustain .hero-bg{
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.55) 100%),
    url("/assets/img/nachhaltigkeit-hero.png");
}

body.theme-fire .hero-bg{
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.40) 60%, rgba(0,0,0,.65) 100%),
    url("/assets/img/brandschutzkonzept-din-14096-rauchmelder-fluchtplan.jpeg");
}

body.theme-tga .hero-bg{
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.40) 60%, rgba(0,0,0,.65) 100%),
    url("/assets/img/bim-planung-tga-digitale-gebaeudeplanung-gebaeudetechnik.jpeg");
}

body.theme-projects .hero-bg{
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.55) 100%),
    url("/assets/img/og/og-home.jpg");
}

body.theme-knowledge .hero-bg{
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.55) 100%),
    url("/assets/img/og/og-home.jpg");
}

body.theme-contact .hero-bg{
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.55) 100%),
    url("/assets/img/bim-planung-tga-digitale-gebaeudeplanung-gebaeudetechnik.jpeg");
  background-size:cover;
  background-position:center;
}

body.theme-about .hero-bg{
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.55) 100%),
    url("/assets/img/og/og-home.jpg");
}