/* Schriften liegen lokal (keine Verbindung zu Google, DSGVO-freundlich) */
@font-face { font-family: "Lilita One"; src: url("../fonts/LilitaOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Titan One"; src: url("../fonts/TitanOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Sniglet"; src: url("../fonts/Sniglet-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url("../fonts/BebasNeue-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Pacifico"; src: url("../fonts/Pacifico-Regular.ttf") format("truetype"); font-display: swap; }
[hidden] { display: none !important; } /* sonst ueberschreiben display-Regeln (z. B. fieldset) das hidden-Attribut */
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito.ttf") format("truetype"); font-weight: 200 1000; font-display: swap; }

/* Gemeinsame Gestaltung aller Namenswerk-Seiten.
   Idee: ruhige, helle Kinderzimmer-Flaeche wie skandinavische Kindermarken; Farbe kommt nur von den Schildern
   und den echten Filamentfarben. Ein einziger lauter Moment: der Lichtschalter, der das Zimmer dunkel macht. */
:root {
  --paper: #FAF9F6;      /* Kalkweiss, Seitenhintergrund */
  --card: #FFFFFF;
  --hafer: #F0EDE7;      /* Flaechen fuer Abschnitte */
  --ink: #22253A;        /* Nachtblaue Tinte fuer Text und Hauptknopf */
  --muted: #676675;
  --line: #E4E0D8;
  --coral: #A8506A;      /* Rosenholz: Auswahl, Hinweise, Links */
  --coral-soft: #F4E4E8;
  --on-coral: #FFFFFF;
  --sun: #F3C24F;
  --feld-sakura: #F4E3E6; --feld-himmel: #DFE9EE; --feld-flieder: #E9E3F0;
  --wall-day: #ECE8E1;
  --door: #F8F6F2;
  --boden: #D8C8B3;
  --wall-night: #0E1230;
  --night-ink: #C9D1FF;
  --glow: #A6F4D6;
  --focus: #4E5BD6;
  --display: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14151F; --card: #1B1D2A; --hafer: #1A1C29; --ink: #EEECEA; --muted: #A6A4B2; --line: #2B2D3C;
    --coral: #E591A8; --coral-soft: #3A2430; --on-coral: #1A0E14;
    --feld-sakura: #2C2229; --feld-himmel: #1E2A31; --feld-flieder: #262236;
    --wall-day: #2A2A31; --door: #34343C; --boden: #3B342C; --focus: #A5AEFF; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #14151F; --card: #1B1D2A; --hafer: #1A1C29; --ink: #EEECEA; --muted: #A6A4B2; --line: #2B2D3C;
  --coral: #E591A8; --coral-soft: #3A2430; --on-coral: #1A0E14;
  --feld-sakura: #2C2229; --feld-himmel: #1E2A31; --feld-flieder: #262236;
  --wall-day: #2A2A31; --door: #34343C; --boden: #3B342C; --focus: #A5AEFF; color-scheme: dark;
}

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.65 var(--body); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--display); font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h3 { font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* Kopf: Hinweiszeile, Navigation links, Wortmarke mittig, Knopf rechts */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
.hinweiszeile { background: var(--hafer); color: var(--muted); font-size: .82rem; text-align: center; padding-block: 7px; }
.hinweiszeile a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 3px; }
.kopf .aktionen { margin-top: 6px; }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding-block: 16px; }
.top nav { display: flex; gap: 26px; font-size: .95rem; }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }
.top .rechts { justify-self: end; display: flex; gap: 18px; align-items: center; font-size: .95rem; }
.top .rechts a:not(.btn) { text-decoration: none; color: var(--muted); }
.logo { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; }
.logo svg { width: 15px; height: 15px; margin-top: -10px; }
@media (max-width: 760px) {
  .top .wrap { grid-template-columns: auto minmax(0, 1fr); }
  .top nav { display: none; }
  .top .logo { justify-self: start; }
}

/* Knoepfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 .98rem var(--body); border: 0; border-radius: 999px; padding: 13px 24px; cursor: pointer; text-decoration: none; transition: background .2s, color .2s; }
.btn-haupt { background: var(--ink); color: var(--paper); }
.btn-haupt:hover { background: color-mix(in srgb, var(--ink) 86%, var(--coral)); }
.btn-zweit { background: transparent; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.btn-zweit:hover { border-color: var(--ink); }
.btn-klein { padding: 9px 18px; font-size: .9rem; }
.textlink { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 4px; font-weight: 600; }
.textlink:hover { text-decoration-color: var(--ink); }

/* Ueberzeile (nur noch sparsam im Konfigurator) */
.eyebrow { font-weight: 600; font-size: .95rem; color: var(--coral); }

/* Abschnitte */
section.block { padding-block: 96px; }
@media (max-width: 760px) { section.block { padding-block: 64px; } }
.kopf { display: grid; gap: 12px; margin-bottom: 40px; max-width: 640px; }
.kopf h2 { font-size: clamp(2rem, 4vw, 3rem); }
.kopf p { color: var(--muted); font-size: 1.05rem; }
.kopf.mitte { margin-inline: auto; text-align: center; justify-items: center; }

/* Versprechen (Konfigurator) */
.versprechen { border-block: 1px solid var(--line); }
.versprechen ul { list-style: none; margin: 0; padding-block: 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .versprechen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .versprechen ul { grid-template-columns: minmax(0, 1fr); } }
.versprechen li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.versprechen svg { width: 32px; height: 32px; }
.versprechen b { display: block; font-weight: 700; font-size: 1rem; }
.versprechen span { font-size: .9rem; color: var(--muted); }

/* Schritte: echte Reihenfolge, deshalb nummeriert */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: s; position: relative; }
.schritte::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; border-top: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
@media (max-width: 820px) { .schritte { grid-template-columns: minmax(0, 1fr); gap: 28px; } .schritte::before { display: none; } }
.schritte li { counter-increment: s; display: grid; gap: 10px; align-content: start; position: relative; }
.schritte li::before { content: counter(s); font-weight: 600; font-size: 1.05rem; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); color: var(--ink); }
.schritte h3 { font-size: 1.3rem; }
.schritte p { color: var(--muted); max-width: 34ch; }

/* Konfigurator-Details */
.details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 820px) { .details { grid-template-columns: minmax(0, 1fr); } }
.daten { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); border-top: 1px solid var(--line); }
.daten dt, .daten dd { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--line); }
.daten dt { font-weight: 700; padding-right: 24px; }
.daten dd { color: var(--muted); font-variant-numeric: tabular-nums; }
.glow-karte { border-radius: var(--r); padding: 30px; background: var(--wall-night); color: var(--night-ink); display: grid; gap: 12px; position: relative; overflow: hidden; }
.glow-karte h3 { color: #F1EDFA; font-size: 1.5rem; font-weight: 300; }
.glow-karte .stern { position: absolute; right: 22px; top: 20px; width: 56px; height: 56px; filter: drop-shadow(0 0 12px var(--glow)); }
.glow-karte ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

.fragen { display: grid; max-width: 820px; border-top: 1px solid var(--line); }
.fragen details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.fragen summary { cursor: pointer; font-weight: 600; padding-block: 14px; }
.fragen details p { color: var(--muted); padding-bottom: 16px; max-width: 68ch; }

/* Startseite: Kinderzimmer mit Lichtschalter */
.start-hero { padding-block: 40px 96px; }
.start-hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .start-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; } .start-hero .text { order: 2; } }
.start-hero .text { display: grid; gap: 22px; align-content: center; }
.start-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 200; }
.start-hero .text > p { color: var(--muted); font-size: 1.15rem; max-width: 40ch; }
.aktionen { display: flex; gap: 14px 22px; flex-wrap: wrap; align-items: center; }
.preiszeile { font-size: .95rem; color: var(--muted); display: grid; gap: 2px; }
.preiszeile b { color: var(--ink); font-weight: 700; }

.zimmer { position: relative; margin: 0; aspect-ratio: 6 / 5; border-radius: var(--r); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--wall-day) 70%, #fff), var(--wall-day));
  transition: background-color 1s ease; }
.zimmer::after { content: ""; position: absolute; inset: auto 0 0; height: 11%; background: var(--boden); z-index: -1; transition: background-color 1s ease; }
/* Fussleiste an der Wand, endet an der Tuerzarge */
.zimmer .fussleiste { position: absolute; left: 0; right: 0; bottom: 11%; height: 2.4%; background: color-mix(in srgb, var(--door) 94%, var(--ink)); box-shadow: 0 -1px 0 color-mix(in srgb, var(--door) 80%, var(--ink)); z-index: 0; transition: background-color 1s ease, box-shadow 1s ease; }
/* Zarge links, oben, rechts; das Tuerblatt steht auf dem Boden */
.zimmer .zarge { position: absolute; left: calc(26% - 2.2%); width: calc(44% + 4.4%); top: 7%; bottom: 11%; background: color-mix(in srgb, var(--door) 90%, var(--ink)); border-radius: 2px 2px 0 0; z-index: 1; transition: background-color 1s ease; }
.zimmer .tuer { position: absolute; left: 26%; width: 44%; top: 9%; bottom: 11%; background: var(--door); z-index: 1;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--door) 92%, var(--ink));
  transition: background-color 1s ease, box-shadow 1s ease; }
.zimmer .tuer::before, .zimmer .tuer::after { content: ""; position: absolute; left: 12%; right: 12%; border-radius: 2px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--door) 88%, var(--ink)); }
.zimmer .tuer::before { top: 6%; height: 40%; }
.zimmer .tuer::after { top: 52%; height: 42%; }
/* Tuerdruecker: Langschild auf dem Rahmen rechts, Druecker zeigt zur Tuermitte, darunter das Schluesselloch */
.zimmer .klinke { position: absolute; right: 4.2%; top: 45%; width: 3.6%; height: 12%; border-radius: 99px; background: #CFC8BE; box-shadow: 0 1px 2px rgba(40, 35, 30, .18); z-index: 3; transition: background-color 1s ease; }
.zimmer .klinke::before { content: ""; position: absolute; right: 18%; top: 14%; width: 500%; height: 13%; border-radius: 99px; background: #B8B0A5; box-shadow: 0 2px 2px rgba(40, 35, 30, .2); transition: background-color 1s ease; }
.zimmer .klinke::after { content: ""; position: absolute; left: 50%; top: 66%; width: 34%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: #8E877D; transition: background-color 1s ease; }
.zimmer .schild { position: absolute; left: 50%; top: 21%; width: 84%; transform: translateX(-50%); z-index: 2; transition: opacity 1s ease; }
.zimmer .schild.nacht-bild { opacity: 0; }
.zimmer .deko { position: absolute; right: 7%; bottom: 10.6%; width: 15%; z-index: 2; transition: filter 1s ease; }
.zimmer .himmel { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.4s ease;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 14% 62%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 19% 30%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 84% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 40%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 79% 70%, #fff 50%, transparent 51%); }

/* Lichtschalter an der Wand: der eine laute Moment der Seite */
.lichtschalter { position: absolute; left: 78%; top: 44%; width: 7.5%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 4px; cursor: pointer; z-index: 3;
  background: #FBFAF7; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 6px 14px -8px rgba(30, 30, 50, .5); display: grid; place-items: center; transition: background-color 1s ease; }
.lichtschalter .wippe { width: 52%; height: 64%; border-radius: 3px; background: linear-gradient(#FFFFFF 0 50%, #E9E5DE 50% 100%); box-shadow: inset 0 0 0 1px #DDD8CF; transition: background .3s; }
.lichtschalter-tipp { position: absolute; left: 78%; top: calc(44% + 9%); width: 18%; font-size: .78rem; line-height: 1.3; color: var(--muted); z-index: 3; transition: color 1s ease, opacity .6s; }
.zimmer.nacht { background: var(--wall-night); }
.zimmer.nacht::after { background: #0A0D24; }
.zimmer.nacht .tuer { background: #151A3A; box-shadow: none; }
.zimmer.nacht .zarge { background: #121633; }
.zimmer.nacht .fussleiste { background: #111531; box-shadow: none; }
.zimmer.nacht .tuer::before, .zimmer.nacht .tuer::after { box-shadow: inset 0 0 0 2px #1B2045; }
.zimmer.nacht .klinke { background: #232850; box-shadow: none; }
.zimmer.nacht .klinke::before { background: #2A3060; box-shadow: none; }
.zimmer.nacht .klinke::after { background: #161A3A; }
.zimmer.nacht .schild.tag-bild { opacity: 0; }
.zimmer.nacht .schild.nacht-bild { opacity: 1; }
.zimmer.nacht .deko { filter: brightness(.25) saturate(.4); }
.zimmer.nacht .himmel { opacity: .55; }
.zimmer.nacht .lichtschalter { background: #20254A; }
.zimmer.nacht .lichtschalter .wippe { background: linear-gradient(#2B3160 0 50%, #353C70 50% 100%); box-shadow: inset 0 0 0 1px #3A4180; }
.zimmer.nacht .lichtschalter-tipp { color: var(--night-ink); }
@media (max-width: 560px) { .lichtschalter-tipp { display: none; } .lichtschalter { width: 10%; } }

/* Stile: Schilder auf zarten Farbflaechen, ohne Kartenrahmen */
.stile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 820px) { .stile { grid-template-columns: minmax(0, 1fr); } }
.stil { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.stil .flaeche { aspect-ratio: 1 / 1; border-radius: var(--r); display: grid; place-items: center; padding: 9%; overflow: hidden; min-height: 0; }
.stil .flaeche > img { min-height: 0; }
.stil .flaeche img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.stil:hover .flaeche img { transform: scale(1.04); }
.stil .unter { display: grid; gap: 2px; }
.stil h3 { font-size: 1.1rem; }
.stil p { color: var(--muted); font-size: .95rem; }
@media (max-width: 820px) { .stil .flaeche { aspect-ratio: 3 / 2; padding: 8% 12%; } }

/* Farben aus dem Lager */
.farben-band { background: var(--hafer); }
.farben-band .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .farben-band .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.farben-band .kopf { margin: 0; }
.farbliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 22px 16px; }
.farbliste li { display: grid; justify-items: center; gap: 8px; text-align: center; font-size: .88rem; color: var(--muted); }
.farbliste .tupfen { width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 6px 14px -10px rgba(0, 0, 0, .5); }
.farbliste .tupfen.glow { background: radial-gradient(circle at 50% 45%, #FFFFFF, var(--g, #FCFFC6) 65%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 0 18px 2px color-mix(in srgb, var(--glow) 80%, transparent); }

/* Werkstatt */
.werkstatt { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
@media (max-width: 860px) { .werkstatt { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.werkstatt .bildflaeche { aspect-ratio: 5 / 4; border-radius: var(--r); background: var(--wall-night); display: grid; place-items: center; padding: 10%; }
.werkstatt .bildflaeche img { width: 100%; }
.werkstatt .text { display: grid; gap: 16px; }
.werkstatt .text h2 { font-size: clamp(2rem, 4vw, 3rem); }
.werkstatt .text p { color: var(--muted); max-width: 52ch; }
.fakten { margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.fakten div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.fakten dt { font-size: 1.6rem; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fakten dd { margin: 0; font-size: .88rem; color: var(--muted); }

/* weitere Produkte aus produkte.json */
.produkte { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.produkt { display: grid; gap: 12px; text-decoration: none; color: inherit; }
.produkt .bild { aspect-ratio: 4 / 5; background: var(--hafer); border-radius: var(--r); display: grid; place-items: center; padding: 12%; }
.produkt .bild img { max-width: 100%; max-height: 100%; }
.produkt h3 { font-size: 1.1rem; }
.produkt p { color: var(--muted); font-size: .95rem; }
.produkt .preis-ab { font-weight: 700; }

/* Fuss */
footer { border-top: 1px solid var(--line); padding-block: 56px 40px; color: var(--muted); font-size: .92rem; }
.fuss { display: grid; gap: 28px; }
.fuss-zeile { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
@media (max-width: 700px) { .fuss-zeile { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.fuss .ueber { display: grid; gap: 10px; max-width: 38ch; }
.fuss nav { display: grid; gap: 6px; }
.fuss nav b { color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.fuss nav a { text-decoration: none; color: var(--muted); }
.fuss nav a:hover { color: var(--ink); }
.fuss .klein { font-size: .8rem; border-top: 1px solid var(--line); padding-top: 20px; }

/* Rechtsseiten */
.recht { padding-block: 56px 80px; }
.recht article { max-width: 760px; display: grid; gap: 10px; }
.recht h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin-bottom: 10px; }
.recht h2 { font-size: 1.35rem; font-weight: 600; margin-top: 24px; }
.recht p, .recht li { color: var(--ink); max-width: 70ch; }
.recht ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.recht .stand { color: var(--muted); font-size: .9rem; }
.luecke { background: #FFF1B8; color: #5A4500; padding: 0 4px; border-radius: 4px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }