/* Layout: crisp linen page, hero = text left + 3D ironing scene right, then single-column sections on a 1080px measure */
:root {
  --bg: #f3f6f8;
  --surface: #ffffff;
  --ink: #15233a;
  --muted: #586579;
  --line: #d6dee6;
  --accent: #2c5ca6;
  --accent-soft: #e2ebf7;
  --ph-bg: #fff1bf;
  --ph-ink: #6a4a00;
  --ph-line: #d9a91a;
  --ok: #1f7a4d;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1520; --surface: #162131; --ink: #e8edf4; --muted: #9aa8ba; --line: #283850;
    --accent: #86abe8; --accent-soft: #1d2d47; --ph-bg: #3f3209; --ph-ink: #ffe08a; --ph-line: #a07c12; --ok: #5fcf95;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1520; --surface: #162131; --ink: #e8edf4; --muted: #9aa8ba; --line: #283850;
  --accent: #86abe8; --accent-soft: #1d2d47; --ph-bg: #3f3209; --ph-ink: #ffe08a; --ph-line: #a07c12; --ok: #5fcf95;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }



header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.15rem; }
.brand svg { flex: none; }
nav.main { display: flex; gap: 22px; flex-wrap: wrap; }
nav.main a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; }
nav.main a:hover { color: var(--accent); }
.call { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) { nav.main { display: none; } }
@media (max-width: 480px) { .brand { font-size: 1rem; white-space: nowrap; } .call { font-size: .85rem; } }

.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: center; padding-block: 48px 24px; }
.eyebrow { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 800; margin-top: 10px; }
.hero h1 span { color: var(--accent); }
.hero .lead { color: var(--muted); font-size: 1.12rem; margin-top: 18px; max-width: 34ch; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; text-decoration: none; border: 1.5px solid var(--accent); font: 600 1rem var(--body); cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--surface); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn:hover { filter: brightness(1.08); }
.stage { position: relative; min-width: 0; }
#scene { display: block; width: 100%; aspect-ratio: 16 / 10.5; max-width: 100%; }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; padding-block: 28px 8px; gap: 8px; }
  #scene { aspect-ratio: 16 / 10; }
}

.facts { border-block: 1px solid var(--line); background: var(--surface); }
.facts .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-block: 20px; }
.fact b { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fact span { color: var(--muted); font-size: .9rem; }
@media (max-width: 640px) { .facts .wrap { grid-template-columns: 1fr; } }

section.block .wrap { padding-block: 64px; display: grid; gap: 28px; }
section.block .intro { max-width: 60ch; display: grid; gap: 10px; }
section.block .intro p { color: var(--muted); }

.services { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.service { padding: 18px 4px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.service h3 { font-size: 1.05rem; }
.service p { color: var(--muted); font-size: .93rem; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: s; }
.step { display: grid; gap: 8px; align-content: start; }
.step::before { counter-increment: s; content: counter(s); font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--accent); }
.step p { color: var(--muted); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

.price-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 32px; align-items: start; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: grid; gap: 6px; }
.price-card .amount { font-family: var(--display); font-weight: 800; font-size: 4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.price-card .unit { color: var(--muted); }
.price-notes { display: grid; gap: 14px; }
.price-notes p { color: var(--muted); }
@media (max-width: 760px) { .price-row { grid-template-columns: 1fr; } }

.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours td { padding: 10px 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; }
.hours .closed td:last-child { color: var(--muted); }
.hours tr.today td { font-weight: 600; color: var(--accent); }
.visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.addr { display: grid; gap: 6px; font-size: 1.05rem; }
@media (max-width: 760px) { .visit { grid-template-columns: 1fr; } }

.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { color: var(--muted); margin-top: 8px; }

.contact { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; }
.contact .intro { align-content: start; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
form.cf { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .92rem; }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; }
.field textarea { min-height: 110px; resize: vertical; }
.field .err { color: #c0392b; font-size: .85rem; min-height: 0; }
.check { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--muted); }
.check input { margin-top: 5px; }
form.cf .actions { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.done { grid-column: 1 / -1; border: 1px solid var(--ok); color: var(--ok); border-radius: 10px; padding: 14px 16px; }
@media (max-width: 560px) { form.cf { grid-template-columns: 1fr; } }
/* Shown instead of the form when CONTACT_FORM_DISABLED is set */
.contact-direct { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: grid; gap: 22px; align-content: start; }
.contact-direct > div { display: grid; gap: 4px; min-width: 0; }
.contact-direct .label { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.contact-direct .big { font-size: clamp(1.15rem, 3.2vw, 1.6rem); font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.contact-direct .big:hover { text-decoration: underline; }
.contact-direct .nowrap { white-space: nowrap; }
.contact-direct .hint { color: var(--muted); font-size: .92rem; }

/* Impressum and Datenschutz pages */
.legal-page .wrap { padding-block: 48px 64px; display: grid; gap: 20px; max-width: 820px; margin: 0 auto; }
.legal-page h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); font-weight: 800; }
.legal-page h2 { font-size: 1.25rem; margin-top: 18px; }
.legal-page p, .legal-page li { color: var(--muted); }
.legal-page p strong, .legal-page li strong { color: var(--ink); }
.legal-page ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.legal-page .lead { font-size: .95rem; }
.legal-page dl { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 10px 16px; margin: 0; }
.legal-page dt { color: var(--muted); }
.legal-page dd { margin: 0; }
@media (max-width: 640px) { .legal-page dl { grid-template-columns: 1fr; gap: 2px; } .legal-page dd { margin-bottom: 10px; } }
.back { font-weight: 600; text-decoration: none; }

footer.bottom { border-top: 1px solid var(--line); }
footer.bottom .wrap { padding-block: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .88rem; color: var(--muted); }
footer.bottom a { color: var(--muted); }
.done.fail { border-color: #c0392b; color: #c0392b; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Seasonal greeting band and particle layer (assets/saison.js) */
.saison-band { --sb-bg: var(--accent); --sb-ink: #ffffff; --sb-title: #ffffff; background: var(--sb-bg); color: var(--sb-ink); border-block: 1px solid var(--line); }
.saison-band .wrap { display: flex; align-items: center; gap: 18px; padding-block: 20px; }
.saison-emoji { font-size: 2.6rem; line-height: 1; flex: none; }
.saison-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.saison-text b { font-family: var(--display); font-size: 1.5rem; font-weight: 800; color: var(--sb-title); line-height: 1.15; }
.saison-text span { font-size: .95rem; opacity: .92; }
.saison-band button { background: none; border: 0; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 4px 8px; opacity: .8; align-self: flex-start; }
.saison-band button:hover { opacity: 1; }
.saison-weihnachten { --sb-bg: #1e6b3c; --sb-ink: #ffffff; --sb-title: #ffffff; border-block: 4px solid #ffffff; }
.saison-nikolaus { --sb-bg: #8e1b26; --sb-ink: #fbeef0; --sb-title: #ffffff; border-block: 4px solid #e0a42b; }
.saison-nikolaus .saison-emoji svg { display: block; }
.saison-neujahr { --sb-bg: #15233a; --sb-ink: #e8edf4; --sb-title: #f0c35a; }
.saison-halloween { --sb-bg: #2a1b3d; --sb-ink: #efe6fb; --sb-title: #ff8c1a; border-block: 4px solid #ff8c1a; }
.saison-april { --sb-bg: repeating-linear-gradient(-45deg, #f2b705 0 22px, #f7c933 22px 44px); --sb-ink: #2b2f36; --sb-title: #1b1e23; border-block: 4px solid #2b2f36; }
.saison-reveal { animation: saison-pop .5s ease-out; }
@keyframes saison-pop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.saison-ostern { --sb-bg: #f7e7a4; --sb-ink: #3d5a2a; --sb-title: #2f6b2a; }
@media (max-width: 560px) { .saison-emoji { font-size: 2rem; } .saison-text b { font-size: 1.25rem; } .saison-band .wrap { gap: 12px; } }
.saison-layer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }