/* ============================================================================
   Festkiste — zweite Stilschicht: Bewegung, Unterseiten, Bestellseite
   Natives Scrollen. Scroll-gebundene Bewegung nur über CSS (animation-timeline),
   nie über JS-Scroll-Handler. prefers-reduced-motion schaltet alles ausser Opazität ab.
   ========================================================================== */

/* ---------- Lesefortschritt im Kopf (scroll-gebunden, CSS) ---------------- */
.fortschritt { position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: var(--messing); transform-origin: left; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .fortschritt { animation: wachsen linear both; animation-timeline: scroll(root); }
  @keyframes wachsen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- Der Hörer im Kopf klingelt einmal beim Laden ------------------ */
@keyframes klingeln { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }

/* ---------- Bilder wandern beim Scrollen (Parallax, CSS) ------------------ */
@supports (animation-timeline: view()) {
  .bild > img { animation: schweben linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes schweben { from { transform: translateY(-5%) scale(1.12); } to { transform: translateY(5%) scale(1.12); } }
  .bild:hover > img { animation-play-state: paused; }
  .ablauf__hinter img { animation: schweben2 linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes schweben2 { from { transform: translateY(-4%) scale(1.1); } to { transform: translateY(4%) scale(1.1); } }
}

/* ---------- Überschriften kommen Wort für Wort ---------------------------- */
.js [data-worte] .w { display: inline-block; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 70ms); }
.js [data-worte]:not(.da) .w { opacity: 0; transform: translateY(.45em) rotate(1.5deg); }
.js [data-worte].sofort .w { transition-duration: .4s; transition-delay: calc(var(--i) * 25ms); }

/* ---------- Lichtfleck folgt dem Zeiger im Hero -------------------------- */
.hero__licht { position: absolute; z-index: 0; width: 46vmin; height: 46vmin; border-radius: 50%; pointer-events: none; left: 0; top: 0; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(236, 162, 79, .45), transparent); mix-blend-mode: soft-light; opacity: 0; transition: opacity .6s; will-change: transform; }
.hero:hover .hero__licht { opacity: 1; }
@media (pointer: coarse) { .hero__licht { display: none; } }

/* ---------- Ton-Knopf: Musik erst auf Klick (Browser erlauben nichts anderes) */
.ton { position: fixed; left: 1rem; bottom: 1rem; z-index: 50; display: inline-flex; align-items: center; gap: .55rem; min-height: 3.1rem; padding: .6rem 1rem .6rem .8rem; border-radius: 999px; border: 1px solid var(--linie); background: color-mix(in srgb, var(--papier) 94%, transparent); color: var(--tinte); cursor: pointer; font-weight: 600; font-size: .9rem; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .4); }
.ton__balken { display: inline-flex; align-items: flex-end; gap: 2px; height: 1rem; }
.ton__balken i { width: 3px; height: 30%; background: var(--messing-tief); border-radius: 2px; }
.ton[aria-pressed="true"] .ton__balken i { animation: tanzen .8s ease-in-out infinite alternate; }
.ton__balken i:nth-child(2) { animation-delay: .15s; } .ton__balken i:nth-child(3) { animation-delay: .3s; } .ton__balken i:nth-child(4) { animation-delay: .45s; }
@keyframes tanzen { from { height: 25%; } to { height: 100%; } }
.ton span.aus { display: none; } .ton[aria-pressed="true"] span.an { display: none; } .ton[aria-pressed="true"] span.aus { display: inline; }
/* schmal: nur das Symbol, rund wie der WhatsApp-Knopf — der Text lag über den Hero-Knöpfen (Screenshot 360 px, 09.09.) */
@media (max-width: 40rem) {
  .ton { width: 3.1rem; height: 3.1rem; padding: 0; justify-content: center; border-radius: 50%; }
  .ton span.an, .ton[aria-pressed="true"] span.aus { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Schaufenster Sortiment (Startseite) --------------------------- */
.sortiment { padding: 5rem 0 3rem; }
.sortiment__kopf { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
@media (min-width: 56rem) { .sortiment__kopf { grid-template-columns: 6fr 5fr; align-items: end; } }
.sortiment__grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .sortiment__grid { grid-template-columns: repeat(6, 1fr); } .sk--1 { grid-column: 1 / 4; } .sk--2 { grid-column: 4 / 7; margin-top: 2.5rem; } .sk--3 { grid-column: 1 / 3; } .sk--4 { grid-column: 3 / 5; margin-top: 1.5rem; } .sk--5 { grid-column: 5 / 7; margin-top: -1rem; } }
.sk { position: relative; display: block; min-width: 0; text-decoration: none; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--linie); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.sk:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -26px rgba(40, 59, 19, .4); }
.sk .bild { border-radius: 0; aspect-ratio: 16 / 10; }
.sk--1 .bild { aspect-ratio: 16 / 11; }
.sk__text { display: block; padding: 1.2rem 1.5rem 1.4rem; } /* span: ohne display:block greift der Innenabstand links nicht (gemessen 23.09.2026: Text 1 px vom Kartenrand) */
.sk h3 { margin: 0 0 .3rem; }
.sk p { color: var(--tinte-weich); font-size: .95rem; }
.sk__preis { display: inline-block; margin-top: .6rem; font-family: var(--display); font-size: 1.15rem; }
.sk__pfeil { position: absolute; right: 1rem; top: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--papier); display: grid; place-items: center; transition: transform .4s var(--ease), background .3s; }
.sk:hover .sk__pfeil { transform: translate(3px, -3px); background: var(--messing-tief); color: #fff; }
.sk__pfeil svg { width: 1.1rem; height: 1.1rem; }
.abzeichen { position: absolute; left: 1rem; top: 1rem; z-index: 3; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; padding: .35rem .6rem; border-radius: 999px; background: var(--tinte); color: var(--papier); }
.abzeichen--bald { background: var(--messing-hell); color: var(--tinte); }

/* ---------- Unterseiten ---------------------------------------------------- */
.brot { font-size: .85rem; color: var(--tinte-weich); padding: 1rem 0 0; }
.brot a { text-decoration: none; display: inline-block; min-height: 44px; min-width: 44px; line-height: 44px; padding-inline: .5rem; margin-left: -.5rem; } /* Tappfläche 44 × 44, gemessen 09.09.: erst 31 × 16, dann 31 × 44 */
.brot a:hover { color: var(--messing-text); }
.brot span { margin: 0 .4rem; }
.seite-hero { padding: 2rem 0 3rem; }
.seite-hero__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .seite-hero__grid { grid-template-columns: 6fr 6fr; align-items: center; gap: 4rem; } }
.seite-hero .bild { aspect-ratio: 5 / 4; }
.seite-hero .bild--hochkant { aspect-ratio: 4 / 5; max-width: 30rem; }
.seite-hero .preis-gross { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 1.2rem 0 .3rem; }
.seite-hero .preis-gross small { font-family: var(--text); font-size: .9rem; color: var(--tinte-weich); display: block; }
.absatz { padding: 3rem 0; }
.absatz--dunkel { background: var(--tinte); color: var(--papier); }
.absatz--dunkel .eyebrow { color: var(--messing-hell); }
.absatz--dunkel h2, .absatz--dunkel h3 { color: #fff; }
.absatz--dunkel p, .absatz--dunkel li { color: #FAF3EC; }
.absatz--band { background: var(--band); }
.zwei-spalten { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .zwei-spalten { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; } }
.liste { display: grid; gap: .7rem; }
.liste li { display: flex; gap: .8rem; align-items: flex-start; min-width: 0; }
.liste li::before { content: ""; flex: none; width: 1.4rem; height: 1.4rem; margin-top: .15rem; border-radius: 50%; background: var(--messing-tief); mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5 9-10' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 70% no-repeat, linear-gradient(#000, #000); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5 9-10' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 70% no-repeat, linear-gradient(#000, #000); mask-composite: exclude; -webkit-mask-composite: xor; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .98rem; }
.tabelle th, .tabelle td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-family: var(--display); font-weight: 500; font-size: 1.05rem; }
.tabelle td:last-child { white-space: nowrap; font-weight: 600; }
.tabelle-wrap { overflow-x: auto; }
.cta-band { padding: 3.5rem 0; text-align: left; }
.cta-band__in { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; padding: 2rem; border-radius: 20px; background: var(--tinte); color: var(--papier); }
.cta-band__in h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); max-width: 22ch; }
.cta-band__in .btn--messing { --bg: var(--messing-hell); --fg: var(--tinte); border-color: var(--messing-hell); } /* Sonne auf Dunkelgrün; mit Terrakotta nur 3,3:1 (gemessen 23.09.2026) */
.cta-band__in .btn--messing:hover { background: #fff; border-color: #fff; color: var(--tinte); }
.warte { max-width: 44rem; }

/* ---------- Bestellseite --------------------------------------------------- */
.bestellung { padding: 1rem 0 5rem; }
.bestellung__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 60rem) { .bestellung__grid { grid-template-columns: 7fr 5fr; gap: 3rem; align-items: start; } .bestellung__summe { position: sticky; top: 5.5rem; } }
.schrittkarte { background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 1.5rem; margin-bottom: 1.2rem; }
.schrittkarte h2 { font-size: 1.45rem; display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1rem; }
.schrittkarte h2 b { font-family: var(--text); font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--messing-text); }
.optionen { display: grid; gap: .8rem; grid-template-columns: 1fr; }
.optionen[hidden] { display: none; }
/* Knopf zum Instagram von raumfürkreatives, Gravur (24.09.2026) */
.insta-knopf { margin-top: .7rem; min-height: 44px; padding: .45rem 1rem; font-size: .92rem; gap: .5rem; white-space: nowrap; max-width: 100%; }
.insta-hinweis { margin-top: 1rem; font-size: .92rem; color: var(--tinte-weich); } /* sonst überstimmt display:grid das hidden (Stick-Auswahl, 24.09.2026) */
@media (min-width: 40rem) { .optionen { grid-template-columns: 1fr 1fr; } }
.option { position: relative; display: block; min-width: 0; padding: 1rem 1rem 1rem 3rem; border: 1.5px solid #77824A; border-radius: 12px; cursor: pointer; transition: border-color .25s, background .25s, transform .3s var(--ease); }
.option:hover { transform: translateY(-2px); }
.option input { position: absolute; left: 1rem; top: 1.15rem; width: 1.3rem; height: 1.3rem; min-height: 0; accent-color: var(--messing-tief); }
.option b { display: block; }
.option span { display: block; color: var(--tinte-weich); font-size: .9rem; }
.option em { display: block; font-style: normal; font-family: var(--display); font-size: 1.15rem; margin-top: .3rem; }
.option .kaution { display: block; font-size: .85rem; color: var(--tinte-weich); margin-top: .1rem; }
.option:has(input:checked) { border-color: var(--messing-tief); background: color-mix(in srgb, var(--messing-hell) 18%, #fff); }
.option:has(input:disabled) { opacity: .45; cursor: not-allowed; transform: none; }
.summe { background: var(--tinte); color: var(--papier); border-radius: 18px; padding: 1.5rem; }
.summe h2 { color: #fff; font-size: 1.4rem; margin-bottom: 1rem; }
.summe dl { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; margin: 0; }
.summe dt { color: #FAF3EC; min-width: 0; }
.summe dd { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summe .total { border-top: 1px solid rgba(250, 243, 236, .3); margin-top: .6rem; padding-top: .8rem; font-family: var(--display); font-size: 1.5rem; }
.summe .total dd { color: var(--messing-hell); }
.summe .kaution { color: #FAF3EC; font-size: .9rem; }
.summe .btn { width: 100%; margin-top: 1.2rem; --bg: var(--messing-hell); --fg: var(--tinte); border-color: var(--messing-hell); } /* Sonne auf Dunkelgrün, wie im Schlussband */
.summe .btn:hover { background: #fff; border-color: #fff; color: var(--tinte); }
.summe .klein { color: #FAF3EC; margin-top: .8rem; }
.hinweis-box { margin-top: .8rem; padding: .8rem 1rem; border-left: 3px solid var(--messing); background: var(--papier-dunkel); font-size: .92rem; }
.hinweis-box[hidden] { display: none; }
.zeitplan { margin-top: 1rem; display: grid; gap: .3rem; font-size: .95rem; }
.zeitplan[hidden] { display: none; } /* display:grid überstimmte hidden: alter Zeitplan blieb nach dem Löschen des Datums stehen (24.09.2026) */
.zeitplan b { font-family: var(--display); font-weight: 500; }
.formular__status:not([hidden]) { display: block; }

/* ---------- Bewegung aus ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ton__balken i, .fortschritt { animation: none !important; }
  .bild > img, .ablauf__hinter img { animation: none !important; transform: none !important; }
  .js [data-worte]:not(.da) .w { transform: none; }
  .hero__licht { display: none; }
  .sk, .option { transform: none !important; }
}

/* ---------- Rechtsseiten: Impressum, Datenschutz, Mietbedingungen ------------------ */
.rechtstext { max-width: 46rem; padding: 1rem 0 4rem; hyphens: auto; }
.rechtstext h1 { font-size: clamp(2.2rem, 6.6vw, 3.5rem); margin-bottom: 1rem; }
.rechtstext h2 { font-size: clamp(1.35rem, 2.9vw, 1.7rem); margin: 2.2rem 0 .6rem; }
.rechtstext p, .rechtstext li, .rechtstext address { color: var(--tinte-weich); overflow-wrap: break-word; }
.rechtstext p + p { margin-top: .8rem; }
.rechtstext ul, .rechtstext ol { margin: .6rem 0 0 1.3rem; display: grid; gap: .45rem; }
.rechtstext ul { list-style: disc; }
.rechtstext ol { list-style: decimal; }
.rechtstext address { font-style: normal; line-height: 1.7; }
.rechtstext a { color: var(--messing-text); }
.rechtstext .stand { font-size: .85rem; margin-top: 2.6rem; }

/* Telefonfotos: kein Parallax-Zoom, das Produkt bleibt ganz im Bild (Natascha 24.09.2026: «das Bild vom Audio-Telefon ist immer noch nicht ganz drauf»; schweben zoomte 12 % und verschob 5 %) */
.bild--ganz > img, .bild--ganz:hover > img { animation: none !important; transform: none !important; }
/* nur echte Fotopixel (Natascha 24.09.2026: «die Seiten sind verschwommen»): das ganze Bild zeigen, in den breiten Karten kleiner in der Mitte */
.bild--ganz > img { object-fit: contain; }
.sk .bild--ganz { background: var(--leinen-hell); }

/* Überschriften besser lesbar, auf allen Seiten (Natascha 24.09.2026: zuerst die Startseite oben, dann «Sag uns dein Datum … hier auch»).
   Bei grossen Überschriften wählt der Browser die feinste optische Stufe (opsz 96), die Haarstriche verschwinden fast.
   Stufe 36 wie beim Schriftzug im Logo, dazu etwas fetter. «body» davor, weil boho.css (nur Startseite, lädt danach) die Überschriften auf 500 setzt. */
body h1, body h2 { font-weight: 600; font-variation-settings: 'opsz' 36; }
body h1 .kursiv, body h2 .kursiv { font-weight: 500; }
/* dasselbe für die übrigen Überschriften (Natascha 24.09.2026: «fixe das auch bei anderen Überschriften»): Zwischentitel,
   die grossen Zahlen (bis 80 px, dort am feinsten) und die grossen Preise */
body h3 { font-weight: 600; }
body .zahl b { font-weight: 500; font-variation-settings: 'opsz' 36; }
body .preis-gross, body .weg-karte .preis, body .summe .total { font-weight: 500; }
body .preis-gross small, body .weg-karte .preis small { font-weight: 400; } /* Kleingedrucktes in Jost bleibt normal */
/* «fi» als ein Zeichen (Natascha 25.09.2026: «zwei Punkte bei findet»): Chrome schaltet Ligaturen bei letter-spacing ab */
body h1, body h2, body h3, body .display { letter-spacing: 0; font-variant-ligatures: common-ligatures; }
/* Gutschein-Karte: sichtbarer Knopf unten rechts (Natascha 25.09.2026); die ganze Karte ist der Link zu WhatsApp */
.sk__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: .6rem; }
.sk__fuss .sk__preis { margin-top: 0; }
.sk__knopf { margin-left: auto; }
/* Wörter mit Bindestrich bleiben zusammen, Silbentrennung aus (Natascha 26.09.2026: «Wörter zusammen, kein neuer Absatz») */
.nw { white-space: nowrap; }
body h1, body h2, body h3, body .rechtstext { hyphens: manual; -webkit-hyphens: manual; }
/* Grid-Kinder dürfen schmaler werden als ihr längstes Wort (sonst 402 px bei 360, gemessen 26.09.2026) */
.hero__text, .hero__in > * { min-width: 0; }
/* Handy besser lesbar (Natascha 26.09.2026): Fliesstext etwas kräftiger und dunkler, kleine Texte grösser */
@media (max-width: 47.99rem) {
  html:root { --tinte-weich: #34461A; }
  body { font-weight: 450; }
  body p, body li, body td, body dd, body dt, body label, body summary { font-size: max(1rem, 1em); }
  body .klein, body small, body .formular .klein, body .hinweis, body .sk p, body .kaution { font-size: max(.95rem, 1em); }
  body .feld label, body .option span, body .option small, body .kachel span:not(.pfeil), body .preis small, body main dt, body legend, body .insta-hinweis, body .summe .kaution, body .schnell__zeile span { font-size: 15.5px; }
}
/* Ohne Foto (26.09.2026): Text über die ganze Breite */
@media (min-width: 56rem) { .natascha__grid--ohne-bild { grid-template-columns: 1fr; max-width: 46rem; } }
/* Handy: Bodoni-Überschriften in der kräftigsten optischen Stufe (Natascha 26.09.2026, Foto vom Android-Handy: Haarstriche verschwinden) */
@media (max-width: 47.99rem) {
  body h1, body h2, body h3, body .display, body .ticker span, body .zahl b, body .preis-gross, body .weg-karte .preis, body .sk__preis, body .zitat, body blockquote {
    font-optical-sizing: none; font-variation-settings: 'opsz' 11; font-weight: 700;
  }
  body h1 .kursiv, body h2 .kursiv, body h3 .kursiv, body .ticker span { font-weight: 600; }
}