/* ============================================================
   Stil-Baukasten (models/stil.js)
   ------------------------------------------------------------
   Jede Einstellung des Kunden steht als Klasse am <body>:
   k3-s-<feld>-<wert>. Fuer den Standardwert gibt es keine Klasse
   – dann gilt configurator3d.css unveraendert. Diese Datei wird
   nach der Grund-CSS geladen und ueberschreibt Tokens und nur die
   Bauteile, deren Form sich aendert.

   Die abgeleiteten Akzent-Toene werden am <body> neu berechnet:
   am :root aufgeloest, wuerden sie die Flaechenfarbe des Stils
   nicht kennen (custom properties werden dort ausgewertet, wo sie
   stehen).
   ============================================================ */

/* Schriften (SIL OFL, selbst gehostet). Laden erst, wenn ein Stil sie
   benutzt. Nur Latin – fuer Litauisch und Russisch springt pro Zeichen
   die Ersatzschrift ein. */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/fonts/schibstedgrotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215;
}
/* Ersatzschriften mit angeglichenen Massen: der Text springt beim Laden nicht */
@font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: 'Schibsted Fallback'; src: local('Arial'); size-adjust: 99%; ascent-override: 96%; descent-override: 26%; }

body.k3-body {
  --accent-wash:        color-mix(in oklch, var(--accent) 9%, var(--paper));
  --accent-wash-strong: color-mix(in oklch, var(--accent) 16%, var(--paper));
  --accent-ring:        color-mix(in oklch, var(--accent) 40%, transparent);
}

/* ---------- Schrift (Text) ---------- */
.k3-s-schrift-schibsted { --font-body: 'Schibsted Grotesk', 'Schibsted Fallback', Arial, sans-serif; font-feature-settings: "kern", "liga"; }
.k3-s-schrift-system { --font-body: Arial, 'Helvetica Neue', Helvetica, system-ui, sans-serif; }

/* ---------- Schrift (Titel) ---------- */
.k3-s-titel-fraunces { --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, serif; }
.k3-s-titel-fraunces .k3-brand b { font-weight: 600; font-size: 1.28rem; letter-spacing: -0.02em; font-variation-settings: "opsz" 28; }
.k3-s-titel-fraunces #k3ModelName,
.k3-s-titel-fraunces .k3-mdl-opt span { font-weight: 560; letter-spacing: -0.015em; }
.k3-s-titel-fraunces .k3-sumbar-preis-wert,
.k3-s-titel-fraunces .k3-panel-preis-wert,
.k3-s-titel-fraunces .k3-preis-summen .is-summe dd { letter-spacing: -0.02em; font-variation-settings: "opsz" 36; }
.k3-s-titel-text { --font-display: var(--font-body); }
.k3-s-titel-text .k3-brand b { font-weight: 800; letter-spacing: -0.015em; }
.k3-s-titel-text #k3ModelName,
.k3-s-titel-text .k3-mdl-opt span,
.k3-s-titel-text .k3-sumbar-info .k3-sb b { font-weight: 750; letter-spacing: -0.01em; }
.k3-s-titel-text .k3-sumbar-preis-wert,
.k3-s-titel-text .k3-panel-preis-wert,
.k3-s-titel-text .k3-preis-summen .is-summe dd { font-weight: 800; letter-spacing: -0.015em; }

/* ---------- Ecken ---------- */
.k3-s-ecken-eckig { --radius-sm: 2px; --radius: 4px; --radius-lg: 6px; --radius-btn: 4px; }
.k3-s-ecken-rund { --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-btn: 14px; }
.k3-s-ecken-sehrrund { --radius-sm: 14px; --radius: 22px; --radius-lg: 30px; --radius-btn: 18px; }
/* Bei eckigen Karten sehen runde Chips und Masskaestchen fremd aus */
.k3-s-ecken-eckig .k3-dim { border-radius: 2px; }

/* ---------- Form der Schaltflaechen ---------- */
.k3-s-knopf-eckig { --radius-btn: 3px; }
.k3-s-knopf-pille { --radius-btn: 999px; }
.k3-s-knopf-pille .k3-btn { min-height: 46px; padding: 0.7rem 1.35rem; letter-spacing: 0.005em; }

/* ---------- Hauptschaltflaeche ---------- */
/* Dunkel: Tinte, Pfeil im Kreis der hellen Akzentfarbe, der beim
   Ueberfahren nachrueckt (wie auf nolte-bau.com). */
.k3-s-knopffarbe-dunkel .k3-btn-gold { background: var(--ink); color: var(--paper); font-weight: 650; }
.k3-s-knopffarbe-dunkel .k3-btn-gold:hover { background: color-mix(in oklch, var(--ink) 86%, white); }
.k3-s-knopffarbe-dunkel .k3-btn-gold svg {
  width: 1.7rem; height: 1.7rem; padding: 0.36rem; margin: -0.35rem -0.75rem -0.35rem 0.15rem;
  border-radius: 50%; background: var(--accent-grad-3); color: var(--ink);
  transition: transform var(--dur-short) var(--ease-out);
}
.k3-s-knopffarbe-dunkel .k3-btn-gold:hover svg { transform: translateX(3px); }
.k3-s-knopffarbe-dunkel .k3-btn-ghost { color: var(--ink); border: 1.5px solid var(--line-2); }
.k3-s-knopffarbe-dunkel .k3-btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 900px) { .k3-s-knopffarbe-dunkel .k3-btn-gold svg { margin-right: -0.55rem; } }
/* Eigene Farbe (--k3-eigen-knopfFarbe, models/stil.js): wie „Dunkel“,
   nur in der Farbe des Kunden; Schrift hell oder dunkel je nach Farbe,
   der Pfeil im Kreis in der Akzentfarbe. */
.k3-s-knopffarbe-eigen .k3-btn-gold { background: var(--k3-eigen-knopfFarbe); color: var(--k3-eigen-knopfFarbe-ink); font-weight: 650; }
.k3-s-knopffarbe-eigen .k3-btn-gold:hover { background: color-mix(in oklch, var(--k3-eigen-knopfFarbe) 86%, var(--k3-eigen-knopfFarbe-ink)); }
.k3-s-knopffarbe-eigen .k3-btn-gold svg {
  width: 1.7rem; height: 1.7rem; padding: 0.36rem; margin: -0.35rem -0.75rem -0.35rem 0.15rem;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  transition: transform var(--dur-short) var(--ease-out);
}
.k3-s-knopffarbe-eigen .k3-btn-gold:hover svg { transform: translateX(3px); }
.k3-s-knopffarbe-eigen .k3-btn-ghost { color: var(--ink); border: 1.5px solid var(--line-2); }
.k3-s-knopffarbe-eigen .k3-btn-ghost:hover { background: var(--k3-eigen-knopfFarbe); color: var(--k3-eigen-knopfFarbe-ink); border-color: var(--k3-eigen-knopfFarbe); }
@media (max-width: 900px) { .k3-s-knopffarbe-eigen .k3-btn-gold svg { margin-right: -0.55rem; } }
/* Umriss: ruhig, die Akzentfarbe als Rand und Schrift */
.k3-s-knopffarbe-umriss .k3-btn-gold { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.k3-s-knopffarbe-umriss .k3-btn-gold:hover { background: var(--accent); color: var(--accent-ink); }

/* ---------- Flaechen ---------- */
.k3-s-flaeche-papier {
  --paper: #FDFCFA; --stone: #F3F0EA; --stone-2: #E9E4DB;
  --ink: #1D1B19; --ink-soft: #46423D; --muted: #6A645D; --line: #E0DBD2; --line-2: #BDB6AA;
}
.k3-s-flaeche-weiss {
  --paper: #FFFFFF; --stone: #F4F5F5; --stone-2: #E7E9EA;
  --ink: #1B1D1F; --ink-soft: #3F4448; --muted: #6B7176; --line: #E5E7E8; --line-2: #C9CDD0;
}
.k3-s-flaeche-kuehl {
  --paper: #F9FAFB; --stone: #EEF1F4; --stone-2: #E1E6EB;
  --ink: #1A1F25; --ink-soft: #3C4550; --muted: #66707B; --line: #DDE3E9; --line-2: #BCC5CE;
}
/* Eigene Flaechenfarbe (--k3-eigen-flaeche, models/stil.js stilVariablen):
   eine Farbe, alles andere leitet der Browser daraus ab. Die Schrift
   (--k3-eigen-flaeche-ink) ist hell oder dunkel je nach Farbe; die
   Abstufungen mischen die Flaeche mit ihr – so passt es hell wie dunkel. */
.k3-s-flaeche-eigen {
  --paper:    var(--k3-eigen-flaeche);
  --ink:      var(--k3-eigen-flaeche-ink);
  --ink-soft: color-mix(in oklch, var(--k3-eigen-flaeche-ink) 80%, var(--k3-eigen-flaeche));
  --muted:    color-mix(in oklch, var(--k3-eigen-flaeche-ink) 62%, var(--k3-eigen-flaeche));
  --stone:    color-mix(in oklch, var(--k3-eigen-flaeche) 95%, var(--k3-eigen-flaeche-ink));
  --stone-2:  color-mix(in oklch, var(--k3-eigen-flaeche) 89%, var(--k3-eigen-flaeche-ink));
  --line:     color-mix(in oklch, var(--k3-eigen-flaeche) 88%, var(--k3-eigen-flaeche-ink));
  --line-2:   color-mix(in oklch, var(--k3-eigen-flaeche) 74%, var(--k3-eigen-flaeche-ink));
}
.k3-s-flaeche-eigen.k3-body { background: var(--stone); }

/* Warmes Papier: der Untergrund setzt sich vom Bedienfeld ab */
.k3-s-flaeche-papier.k3-body { background: var(--stone); }

/* ---------- Kopfzeile ---------- */
/* Eigene Kopfzeilenfarbe: Schrift hell oder dunkel je nach Farbe
   (--k3-eigen-kopf-ink, serverseitig berechnet) */
.k3-s-kopf-eigen .k3-topbar { background: var(--k3-eigen-kopf); color: var(--k3-eigen-kopf-ink); }
.k3-s-kopf-eigen .k3-brand { color: inherit; }
.k3-s-kopf-eigen .k3-brand span { color: inherit; opacity: 0.72; }
.k3-s-kopf-eigen .k3-topbar .k3-tab { color: inherit; opacity: 0.72; }
.k3-s-kopf-eigen .k3-topbar .k3-tab:hover,
.k3-s-kopf-eigen .k3-topbar .k3-tab.is-active { color: inherit; opacity: 1; }
.k3-s-kopf-eigen .k3-lang-btn, .k3-s-kopf-eigen .k3-exit { color: inherit; border-color: color-mix(in srgb, currentColor 30%, transparent); background: transparent; }
.k3-s-kopf-eigen .k3-lang-btn:hover, .k3-s-kopf-eigen .k3-exit:hover { background: color-mix(in srgb, currentColor 12%, transparent); border-color: currentColor; }

.k3-s-kopf-flaeche .k3-topbar { background: var(--stone); }
.k3-s-kopf-flaeche .k3-tab.is-active { border-bottom: 3px solid var(--accent-grad-3); }
.k3-s-kopf-flaeche .k3-lang-btn,
.k3-s-kopf-flaeche .k3-exit { border-color: var(--line-2); color: var(--ink); background: var(--paper); }
.k3-s-kopf-flaeche .k3-lang-btn:hover,
.k3-s-kopf-flaeche .k3-exit:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.k3-s-kopf-dunkel .k3-topbar,
.k3-s-kopf-akzent .k3-topbar { border-bottom-color: transparent; }
.k3-s-kopf-dunkel .k3-topbar { background: var(--ink); color: var(--paper); }
.k3-s-kopf-akzent .k3-topbar { background: var(--accent); color: var(--accent-ink); }
.k3-s-kopf-dunkel .k3-brand, .k3-s-kopf-akzent .k3-brand { color: inherit; }
.k3-s-kopf-dunkel .k3-brand span, .k3-s-kopf-akzent .k3-brand span { color: inherit; opacity: 0.72; }
.k3-s-kopf-dunkel .k3-topbar .k3-tab, .k3-s-kopf-akzent .k3-topbar .k3-tab { color: inherit; opacity: 0.72; }
.k3-s-kopf-dunkel .k3-topbar .k3-tab:hover, .k3-s-kopf-akzent .k3-topbar .k3-tab:hover,
.k3-s-kopf-dunkel .k3-topbar .k3-tab.is-active, .k3-s-kopf-akzent .k3-topbar .k3-tab.is-active { color: inherit; opacity: 1; }
.k3-s-kopf-dunkel .k3-topbar .k3-tab.is-active { border-bottom-color: var(--accent-grad-3); }
.k3-s-kopf-akzent .k3-topbar .k3-tab.is-active { border-bottom-color: currentColor; }
.k3-s-kopf-dunkel .k3-lang-btn, .k3-s-kopf-dunkel .k3-exit,
.k3-s-kopf-akzent .k3-lang-btn, .k3-s-kopf-akzent .k3-exit { color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.k3-s-kopf-dunkel .k3-lang-btn:hover, .k3-s-kopf-dunkel .k3-exit:hover,
.k3-s-kopf-akzent .k3-lang-btn:hover, .k3-s-kopf-akzent .k3-exit:hover { background: color-mix(in srgb, currentColor 14%, transparent); border-color: currentColor; }

/* ---------- Abschnittstitel ---------- */
.k3-s-titelzeile-strich .k3-group > h2 { display: flex; align-items: center; gap: 0.55rem; color: var(--ink-soft); letter-spacing: 0.08em; }
.k3-s-titelzeile-strich .k3-group > h2::before {
  content: ""; flex: 0 0 auto; width: 1.4rem; height: 2px; border-radius: 2px; background: var(--accent-grad-3);
}

/* ---------- Gewaehlte Karte ---------- */
.k3-s-auswahl-dunkel .k3-card, .k3-s-auswahl-dunkel .k3-chip,
.k3-s-auswahl-dunkel .k3-swatch, .k3-s-auswahl-dunkel .k3-tile { border-width: 1.5px; }
.k3-s-auswahl-dunkel .k3-card.is-active, .k3-s-auswahl-dunkel .k3-chip.is-active,
.k3-s-auswahl-dunkel .k3-swatch.is-active, .k3-s-auswahl-dunkel .k3-tile.is-active {
  border-color: var(--ink); background: color-mix(in oklch, var(--accent-grad-3) 15%, var(--paper));
}
.k3-s-auswahl-dunkel .k3-card .k3-card-ico { background: var(--paper); color: var(--ink-soft); }
.k3-s-auswahl-dunkel .k3-card.is-active .k3-card-ico { background: var(--accent-grad-3); color: var(--ink); }
.k3-s-auswahl-dunkel .k3-card.is-active strong,
.k3-s-auswahl-dunkel .k3-card-chip.is-active strong { color: var(--ink); }
.k3-s-auswahl-dunkel .k3-hud-btn.is-active { background: var(--accent-grad-3); color: var(--ink); }

/* ---------- Symbole ---------- */
.k3-s-symbole-rund .k3-card .k3-card-ico { border-radius: 50%; }

/* ---------- Eingebettet: schlank ----------
   Nur im iframe (body.k3-embed, routes/configurator.js). Logo, Name und
   „Zur Website“ stehen schon auf der Website drumherum. Die Schritte
   ruecken nach links; die Sprachwahl bleibt rechts. */
.k3-embed.k3-s-einbettung-schlank .k3-brand,
.k3-embed.k3-s-einbettung-schlank .k3-exit { display: none; }
.k3-embed.k3-s-einbettung-schlank .k3-topbar { padding-left: var(--space-2xs); }

/* Mobil wandern die Schritte ins Bedienfeld – ohne Sprachwahl bliebe eine
   leere Kopfzeile. Dann faellt sie ganz weg, die Buehne bekommt die Hoehe. */
@media (max-width: 900px) {
  .k3-embed.k3-s-einbettung-schlank .k3-app:not(:has(.k3-lang)) { grid-template-rows: 1fr; }
  .k3-embed.k3-s-einbettung-schlank .k3-app:not(:has(.k3-lang)) .k3-topbar { display: none; }
}