/* Design-Tokens Geiss Objektservice & Rückbau.
   Einzige Stelle mit Farbwerten. styles.css nutzt nur var(--…). */

@font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/fonts/plus-jakarta-sans.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  /* Markenfarben */
  --navy: #112B45;
  --navy-700: #0C2136;
  --navy-900: #0B1E31;
  --navy-950: #0A1C2E;
  --navy-500: #1E4166;
  --navy-400: #25507C;
  --navy-300: #2A5A8A;
  --navy-step: #3A6EA3;
  --navy-step-mid: #1A3D63;
  --navy-step-dark: #122E4C;
  --navy-roof: #1B3F64;
  --navy-roof-dark: #132F4D;

  --gold: #D99426;
  --gold-200: #F5BE5C;
  --gold-300: #F0B550;
  --gold-600: #C27F16;
  --gold-650: #B57414;
  --gold-700: #B07010;
  --gold-border: #B87512;
  --gold-hover: #8A5A10; /* vorher #B5761A (3,6:1), angehoben auf 5,6:1 für AA */
  --gold-text: #8A5A10;
  --gold-light: #F0C27A;
  --gold-pale: #F7D9A3;

  --green: #3E6B48;
  --green-300: #5A9A68;
  --green-400: #4F8A5C;
  --green-700: #2A4B32;
  --green-text: #2F5338;
  --green-leaf: #6DB07B;
  --green-dark: #24412B;
  --status-on: #5FBF73;

  /* Neutrale */
  --bg: #F8F9FA;
  --bg-2: #F3F4F6;
  --bg-3: #EDEFF2;
  --white: #FFFFFF;
  --card-top: #FAFBFC;
  --form-bottom: #FCFCFD;
  --placeholder: #E5E7EB;
  --muted: #5A6572;
  --muted-dark: #4A5562;

  /* Kanäle für Transparenzen: rgb(var(--navy-rgb) / .1) */
  --navy-rgb: 17 43 69;
  --navy-700-rgb: 12 33 54;
  --navy-300-rgb: 42 90 138;
  --bg-rgb: 248 249 250;
  --gold-rgb: 217 148 38;
  --gold-300-rgb: 240 181 80;
  --gold-light-rgb: 240 194 122;
  --gold-deep-rgb: 120 70 0;
  --green-rgb: 62 107 72;
  --status-on-rgb: 95 191 115;
  --white-rgb: 255 255 255;
  --black-rgb: 0 0 0;

  /* 3D-Haus: Materialfarben */
  --house-paving: #DAD3C6;
  --house-path: #CFC6B5;
  --house-soil: #6A5038;
  --house-soil-dark: #3B2D20;
  --house-soil-side: #2F241A;
  --house-wall-1: #F4F5F7;
  --house-wall-2: #E1E4E8;
  --house-wall-3: #C3C9D1;
  --house-wall-4: #D3D8DE;
  --house-wall-5: #E6E9ED;
  --house-wall-6: #C8CDD4;
  --house-wall-7: #D7DBE0;
  --house-wall-8: #ECEEF1;
  --house-glass: #B9D6EE;

  /* Typografie */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-brand: "Montserrat", "Plus Jakarta Sans", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Layout */
  --container: 1280px;
  /* Seitenanfang: Höhe des weichen Auslaufs in den Folgeabschnitt */
  --dom-fade: clamp(150px, 24vh, 300px);
  --pad-x: clamp(20px, 4vw, 48px);
  --sec-y: clamp(60px, 10vw, 140px);
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --face-left: polygon(49% .6%, 0 25.6%, 0 73.4%, 49% 48.6%);
  --face-right: polygon(51% .6%, 100% 25.6%, 100% 73.4%, 51% 48.6%);
  --face-bottom: polygon(0 76.6%, 50% 51.6%, 100% 76.6%, 50% 100%);
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* Verläufe */
  --grad-gold-btn: linear-gradient(180deg, var(--gold-300) 0%, var(--gold) 55%, var(--gold-600) 100%);
  --grad-navy-btn: linear-gradient(180deg, var(--navy-400) 0%, var(--navy) 60%, var(--navy-700) 100%);
  --grad-face-navy: linear-gradient(155deg, var(--navy-300) 0%, var(--navy) 60%, var(--navy-900) 100%);
  --grad-face-gold: linear-gradient(200deg, var(--gold-200) 0%, var(--gold) 55%, var(--gold-700) 100%);
  --grad-face-green: linear-gradient(180deg, var(--green-300) 0%, var(--green) 55%, var(--green-700) 100%);
  --grad-face-step1: linear-gradient(155deg, var(--navy-step) 0%, var(--navy-step-mid) 60%, var(--navy-step-dark) 100%);
  --grad-green-badge: linear-gradient(160deg, var(--green-400), var(--green-text));
  --pattern-light: repeating-linear-gradient(30deg, rgb(var(--navy-rgb) / .045) 0 1px, transparent 1px 52px), repeating-linear-gradient(150deg, rgb(var(--navy-rgb) / .045) 0 1px, transparent 1px 52px);
  --pattern-light-2: repeating-linear-gradient(30deg, rgb(var(--navy-rgb) / .04) 0 1px, transparent 1px 52px), repeating-linear-gradient(150deg, rgb(var(--navy-rgb) / .04) 0 1px, transparent 1px 52px);
  --pattern-dark: repeating-linear-gradient(30deg, rgb(var(--white-rgb) / .035) 0 1px, transparent 1px 52px), repeating-linear-gradient(150deg, rgb(var(--white-rgb) / .035) 0 1px, transparent 1px 52px);
  --pattern-footer: repeating-linear-gradient(30deg, rgb(var(--white-rgb) / .025) 0 1px, transparent 1px 52px), repeating-linear-gradient(150deg, rgb(var(--white-rgb) / .025) 0 1px, transparent 1px 52px);
  --pattern-map: repeating-linear-gradient(30deg, rgb(var(--white-rgb) / .04) 0 1px, transparent 1px 40px), repeating-linear-gradient(150deg, rgb(var(--white-rgb) / .04) 0 1px, transparent 1px 40px);

  /* Schatten */
  --shadow-gold-btn: inset 0 1px 0 rgb(var(--white-rgb) / .6), inset 0 -3px 0 rgb(var(--gold-deep-rgb) / .22), 0 2px 3px rgb(var(--navy-rgb) / .18), 0 18px 36px -12px rgb(var(--gold-rgb) / .8);
  --shadow-gold-btn-hover: inset 0 1px 0 rgb(var(--white-rgb) / .7), inset 0 -3px 0 rgb(var(--gold-deep-rgb) / .22), 0 3px 6px rgb(var(--navy-rgb) / .2), 0 24px 44px -12px rgb(var(--gold-rgb) / .9);
  --shadow-media: 0 40px 70px -30px rgb(var(--navy-rgb) / .5);
}

/* Themen der Leistungsumfang-Sektion */
.theme-gold {
  --th-bg: linear-gradient(155deg, var(--gold-300) 0%, var(--gold) 45%, var(--gold-650) 100%);
  --th-fg: var(--navy); --th-muted: rgb(var(--navy-rgb) / .85); --th-eyebrow: var(--navy); --th-pat: rgb(var(--navy-rgb) / .07);
  --th-deco: rgb(var(--white-rgb) / .14); --th-accent: var(--navy); --th-card: rgb(var(--white-rgb) / .92); --th-card-border: rgb(var(--navy-rgb) / .14);
  --th-card-hi: var(--white); --th-card-fg: var(--navy); --th-card-muted: var(--muted-dark); --th-num: var(--gold-600);
}
.theme-navy {
  --th-bg: linear-gradient(155deg, var(--navy-400) 0%, var(--navy) 50%, var(--navy-900) 100%);
  --th-fg: var(--white); --th-muted: rgb(var(--white-rgb) / .8); --th-eyebrow: var(--gold-light); --th-pat: rgb(var(--white-rgb) / .04);
  --th-deco: rgb(var(--gold-rgb) / .09); --th-accent: var(--gold); --th-card: rgb(var(--white-rgb) / .07); --th-card-border: rgb(var(--white-rgb) / .16);
  --th-card-hi: rgb(var(--white-rgb) / .14); --th-card-fg: var(--white); --th-card-muted: rgb(var(--white-rgb) / .76); --th-num: var(--gold-light);
}
.theme-green {
  --th-bg: linear-gradient(155deg, var(--green-300) 0%, var(--green) 50%, var(--green-700) 100%);
  --th-fg: var(--white); --th-muted: rgb(var(--white-rgb) / .86); --th-eyebrow: var(--gold-pale); --th-pat: rgb(var(--white-rgb) / .05);
  --th-deco: rgb(var(--white-rgb) / .08); --th-accent: var(--gold-300); --th-card: rgb(var(--white-rgb) / .1); --th-card-border: rgb(var(--white-rgb) / .22);
  --th-card-hi: rgb(var(--white-rgb) / .2); --th-card-fg: var(--white); --th-card-muted: rgb(var(--white-rgb) / .82); --th-num: var(--gold-pale);
}

@media (max-width: 899.98px) { :root { --dom-fade: 120px; } }