/* /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:
    radial-gradient(circle at 10% 8%, rgba(2,132,14,.26) 0%, rgba(2,132,14,0) 26%),
    radial-gradient(circle at 55% 10%, rgba(224,74,44,.18) 0%, rgba(224,74,44,0) 22%),
    radial-gradient(circle at 88% 10%, rgba(51,102,220,.26) 0%, rgba(51,102,220,0) 28%),
    #070c0a;
}

*,
*::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
   ========================= */

/* Startseite */
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%);
}

/* Nachhaltigkeit – komplett grün */
body.theme-sustain{
  background:
    radial-gradient(circle at 50% 8%, rgba(2,132,14,.22) 0%, rgba(2,132,14,0) 26%),
    #070c0a;
}

body.theme-sustain .page{
  background:
    radial-gradient(circle at 50% 6%, rgba(2,132,14,.28) 0%, rgba(2,132,14,0) 28%),
    linear-gradient(180deg, #0b1210 0%, rgba(2,132,14,.10) 30%, #0b1210 100%);
}

/* Brandschutz – komplett rot */
body.theme-fire{
  background:
    radial-gradient(circle at 50% 8%, rgba(224,74,44,.22) 0%, rgba(224,74,44,0) 26%),
    #070c0a;
}

body.theme-fire .page{
  background:
    radial-gradient(circle at 50% 6%, rgba(224,74,44,.28) 0%, rgba(224,74,44,0) 28%),
    linear-gradient(180deg, #0b1210 0%, rgba(224,74,44,.10) 30%, #0b1210 100%);
}

/* Projektmanagement – komplett blau */
body.theme-tga{
  background:
    radial-gradient(circle at 50% 8%, rgba(51,102,220,.22) 0%, rgba(51,102,220,0) 26%),
    #070c0a;
}

body.theme-tga .page{
  background:
    radial-gradient(circle at 50% 6%, rgba(51,102,220,.28) 0%, rgba(51,102,220,0) 28%),
    linear-gradient(180deg, #0b1210 0%, rgba(51,102,220,.10) 30%, #0b1210 100%);
}

/* Kontakt – Corporate Mix */
body.theme-contact .page{
  background:
    radial-gradient(circle at 12% 12%, rgba(2,132,14,.30) 0%, rgba(2,132,14,0) 30%),
    radial-gradient(circle at 50% 14%, rgba(224,74,44,.20) 0%, rgba(224,74,44,0) 24%),
    radial-gradient(circle at 88% 12%, rgba(51,102,220,.30) 0%, rgba(51,102,220,0) 32%),
    linear-gradient(
      180deg,
      #0b1210 0%,
      rgba(2,132,14,.08) 16%,
      rgba(224,74,44,.07) 28%,
      rgba(51,102,220,.08) 42%,
      #0b1210 86%,
      #0b1210 100%
    );
}

/* Startseite / Über uns / Wissenswertes / Kontakt mit Corporate Glow */
body.theme-home .page.page-corporate,
body.theme-about .page.page-corporate,
body.theme-knowledge .page.page-corporate,
body.theme-contact .page.page-corporate{
  background:
    radial-gradient(circle at 12% 12%, rgba(2,132,14,.30) 0%, rgba(2,132,14,0) 30%),
    radial-gradient(circle at 50% 14%, rgba(224,74,44,.20) 0%, rgba(224,74,44,0) 24%),
    radial-gradient(circle at 88% 12%, rgba(51,102,220,.30) 0%, rgba(51,102,220,0) 32%),
    linear-gradient(
      180deg,
      #0b1210 0%,
      rgba(2,132,14,.08) 16%,
      rgba(224,74,44,.07) 28%,
      rgba(51,102,220,.08) 42%,
      #0b1210 86%,
      #0b1210 100%
    ) !important;
}

/* =========================
   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;
}

/* Corporate Glow im Hero für Home / About / Knowledge / Contact */
body.theme-home .hero::before,
body.theme-about .hero::before,
body.theme-knowledge .hero::before,
body.theme-contact .hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 18%, rgba(2,132,14,.24) 0%, rgba(2,132,14,0) 30%),
    radial-gradient(circle at 50% 16%, rgba(224,74,44,.18) 0%, rgba(224,74,44,0) 24%),
    radial-gradient(circle at 84% 16%, rgba(51,102,220,.24) 0%, rgba(51,102,220,0) 32%);
}

/* Einfarbiger Glow im Hero für Nachhaltigkeit / Brandschutz / TGA */
body.theme-sustain .hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 16%, rgba(2,132,14,.24) 0%, rgba(2,132,14,0) 28%);
}

body.theme-fire .hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 16%, rgba(224,74,44,.24) 0%, rgba(224,74,44,0) 28%);
}

body.theme-tga .hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 16%, rgba(51,102,220,.24) 0%, rgba(51,102,220,0) 28%);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  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:3;
  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;
  background-repeat:no-repeat;
}

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");
}