/* Affiliate Hub Europe — Gestaltung nach dem Wyld-Notes-Brand-Guide und docs/GESTALTUNG.md
   Dunkler Olivgrund, Sand als Licht, Salbei für Aktives, schmale Versalien. Kein Framework. */
:root {
  --grund: #1E1F1A;
  --grund-warm: #525143;
  --panel: color-mix(in oklab, #687D63 9%, #1E1F1A);
  --panel-hell: color-mix(in oklab, #687D63 16%, #1E1F1A);
  --salbei: #687D63;
  --salbei-tief: #4F6149;
  --sand: #E7CB8A;
  --sand-hell: #F5E7C4;
  --hellblau: #89A5BD;
  --tiefblau: #4C6E89;
  --text: #F2EFE8;
  --text-weich: rgba(242, 239, 232, 0.66);
  --text-leise: rgba(242, 239, 232, 0.45);
  --linie: rgba(242, 239, 232, 0.12);
  --linie-stark: rgba(242, 239, 232, 0.22);
  --cremekarte: #F6F2EA;
  --radius: 4px;
  --mass: 76rem;
  --schrift: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schmal: "Archivo Narrow", "Archivo", "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; background: var(--grund); }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--schrift); font-weight: 300; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--sand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sand-hell); }
b, strong { font-weight: 600; }
::selection { background: var(--salbei); color: var(--text); }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--schmal); font-weight: 700; line-height: 1.02; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 4.8vw, 4.1rem); text-transform: uppercase; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); text-transform: uppercase; letter-spacing: 0; }
h3 { font-size: 1.35rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 1em; }
.etikett { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .28em; font-size: .6875rem; font-weight: 600; color: var(--sand); line-height: 1.4; }
.leise { color: var(--text-weich); font-size: .92rem; }
.mass { max-width: var(--mass); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }

/* Eckklammern — die Notation der Website */
.klammer { --kl: 14px; --ks: 1.5px; --kf: color-mix(in oklab, var(--sand) 65%, transparent);
  background-image: linear-gradient(var(--kf), var(--kf)), linear-gradient(var(--kf), var(--kf)), linear-gradient(var(--kf), var(--kf)), linear-gradient(var(--kf), var(--kf)), linear-gradient(var(--kf), var(--kf)), linear-gradient(var(--kf), var(--kf)), linear-gradient(var(--kf), var(--kf)), linear-gradient(var(--kf), var(--kf));
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  background-size: var(--kl) var(--ks), var(--ks) var(--kl), var(--kl) var(--ks), var(--ks) var(--kl), var(--kl) var(--ks), var(--ks) var(--kl), var(--kl) var(--ks), var(--ks) var(--kl);
  background-repeat: no-repeat; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: color-mix(in oklab, var(--grund) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.kopf .mass { display: flex; align-items: center; gap: 1.5rem; min-height: 4.2rem; }
.marke { display: inline-flex; align-items: baseline; gap: .55em; text-decoration: none; color: var(--text); white-space: nowrap; }
.marke img { height: 28px; width: auto; transform: translateY(.25em); }
.marke .notes { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .34em; font-size: .68rem; font-weight: 500; }
.marke .hubname { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .2em; font-size: .68rem; font-weight: 600; color: var(--sand); margin-left: .8em; padding-left: 1em; border-left: 1px solid var(--linie-stark); }
.haupt { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-left: auto; }
.haupt a { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 600; text-decoration: none; color: var(--text-weich); padding: .4rem 0; border-bottom: 1px solid transparent; }
.haupt a:hover, .haupt a[aria-current] { color: var(--text); border-color: var(--sand); }
.sprachen { display: flex; gap: .3rem; }
.sprachen a { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .12em; font-size: .62rem; font-weight: 600; padding: .32rem .55rem; border: 1px solid var(--linie-stark); border-radius: 999px; text-decoration: none; color: var(--text-weich); }
.sprachen a[aria-current] { background: var(--sand); color: var(--grund); border-color: var(--sand); }
.prototyp { background: var(--sand); color: var(--grund); font-family: var(--schmal); text-transform: uppercase; letter-spacing: .18em; font-size: .62rem; font-weight: 600; text-align: center; padding: .35rem 1rem; }
@media (max-width: 980px) {
  .kopf .mass { flex-wrap: wrap; gap: .5rem 1rem; padding-top: .7rem; padding-bottom: .7rem; }
  .haupt { width: 100%; order: 3; gap: 1rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .2rem; margin-left: 0; }
  .haupt::-webkit-scrollbar { display: none; }
  .haupt a { white-space: nowrap; }
  .marke .hubname { display: none; }
  .hero-bild { min-height: 14rem; }
}

/* Persönlich */
.persona { background: var(--panel); border-bottom: 1px solid var(--linie); }
.persona .mass { display: grid; gap: .5rem; padding-top: 1rem; padding-bottom: 1rem; }
.persona form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; align-items: end; margin-top: 1rem; }
.persona label { display: grid; gap: .3rem; }
.persona label > span, .persona label { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .2em; font-size: .62rem; font-weight: 600; color: var(--sand); }
.persona input { min-width: 0; width: 100%; font: inherit; font-family: var(--schrift); font-size: .95rem; letter-spacing: 0; text-transform: none; padding: .6rem .75rem; border: 1px solid var(--linie-stark); border-radius: var(--radius); background: var(--grund); color: var(--text); }
.persona input::placeholder { color: var(--text-leise); }
.persona input:focus { outline: 2px solid var(--sand); outline-offset: 1px; }
.persona .status { font-size: .84rem; color: var(--text-weich); }
.persona .status.gut { color: var(--sand); }

/* Knöpfe */
.knopf { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; font-weight: 700; padding: .7rem 1.2rem; border-radius: var(--radius); border: 1px solid var(--salbei); background: var(--salbei); color: var(--text); cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; transition: background .15s, border-color .15s, transform .05s; }
.knopf:hover { background: var(--salbei-tief); border-color: var(--salbei-tief); color: var(--text); }
.knopf:active { transform: translateY(1px); }
.knopf.leicht { background: transparent; color: var(--text); border-color: var(--linie-stark); }
.knopf.leicht:hover { border-color: var(--sand); color: var(--sand); background: transparent; }
.knopf.klein { font-size: .62rem; padding: .45rem .8rem; }
.knopf.sand { background: var(--sand); border-color: var(--sand); color: var(--grund); }
.knopf.sand:hover { background: var(--sand-hell); border-color: var(--sand-hell); color: var(--grund); }
.knopf.kopiert { background: var(--sand); border-color: var(--sand); color: var(--grund); }

/* Abschnitte */
main { padding: 0 0 5rem; }
.abschnitt { padding: 3rem 0; border-top: 1px solid var(--linie); }
.abschnitt:first-child { border-top: 0; }
.abschnitt > .mass > .etikett { display: block; margin-bottom: .8rem; }
.einleitung { max-width: 48rem; font-size: 1.08rem; color: var(--text-weich); }

/* Hero — das Präparateblatt */
.hero { padding: 1.5rem 0 3rem; }
.hero-raster { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.25rem; align-items: stretch; }
.hero-panel { position: relative; padding: clamp(1.6rem, 4vw, 3.2rem); border-radius: var(--radius); background-image: linear-gradient(to bottom, color-mix(in oklab, var(--salbei) 62%, black) 0%, color-mix(in oklab, var(--salbei) 24%, var(--grund)) 50%, var(--grund) 100%); }
.hero-panel .etikett { display: block; margin-bottom: 1.2rem; }
.hero-panel h1 { max-width: 16ch; }
.hero-panel .einleitung { font-size: 1.08rem; color: var(--text-weich); max-width: 40rem; }
.hero ul.punkte { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.hero ul.punkte li { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .14em; font-size: .62rem; font-weight: 600; padding: .4rem .8rem; border: 1px solid var(--linie-stark); border-radius: 999px; color: var(--text-weich); }
.countdown { display: inline-grid; grid-auto-flow: column; gap: .9rem; align-items: baseline; margin-top: 1.6rem; padding: .9rem 1.2rem; background: var(--sand); color: var(--grund); border-radius: var(--radius); }
.countdown b { font-family: var(--schmal); font-size: 2.6rem; font-weight: 700; line-height: 1; }
.countdown span { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .14em; font-size: .62rem; font-weight: 600; max-width: 20ch; }
.hero-bild { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 22rem; background: var(--panel); }
.hero-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.hero-bild:hover img { transform: scale(1.02); }
.anmerkung { position: absolute; left: 8%; bottom: 10%; padding: 10px; }
.anmerkung span { display: block; background: var(--sand); color: var(--grund); font-family: var(--schmal); text-transform: uppercase; letter-spacing: .24em; font-size: .68rem; font-weight: 600; padding: .45rem .8rem; white-space: nowrap; }
@media (max-width: 860px) { .hero-raster { grid-template-columns: 1fr; } .hero-raster > * { min-width: 0; } .hero-bild { min-height: 0; order: -1; aspect-ratio: 16 / 10; } }

/* Raster & Karten */
.raster { display: grid; gap: 1px; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); background: var(--linie); border: 1px solid var(--linie); }
.karte { background: var(--grund); padding: 1.4rem 1.5rem; }
.karte h3, .karte h4 { margin-bottom: .4rem; }
.karte p:last-child { margin-bottom: 0; }
a.karte { text-decoration: none; color: inherit; display: block; transition: background .2s; }
a.karte:hover { background: var(--panel); }
a.karte:hover h3 { color: var(--sand); }
.karte .nummer { font-family: var(--schmal); font-size: .68rem; letter-spacing: .28em; color: var(--sand); font-weight: 600; margin-bottom: .8rem; }
.raster:not(.hat-raster) .karte { border-radius: 0; }
.pdf-liste, .raster.frei { gap: 1rem; background: transparent; border: 0; }
.raster.frei .karte, .pdf-liste .karte { background: var(--panel); border: 1px solid var(--linie); border-radius: var(--radius); }

/* Schritte */
ol.schritte { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); background: var(--linie); border: 1px solid var(--linie); }
ol.schritte li { counter-increment: s; background: var(--grund); padding: 1.2rem 1.3rem 1.2rem 3.6rem; position: relative; }
ol.schritte li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 1.2rem; top: 1.25rem; font-family: var(--schmal); font-size: .75rem; letter-spacing: .2em; color: var(--sand); font-weight: 700; }
ol.schritte h4 { margin-bottom: .3rem; }
ol.schritte p { margin: 0; font-size: .95rem; color: var(--text-weich); }

/* Bausteine (kopierbar) */
.baustein { background: var(--panel); border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: .9rem; overflow: hidden; }
.baustein-kopf { display: flex; align-items: center; gap: .9rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--linie); background: var(--panel-hell); }
.baustein-kopf .etikett { font-size: .6rem; }
.baustein-kopf b { font-weight: 600; font-family: var(--schmal); font-size: 1.05rem; }
.baustein-kopf .aktionen { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.baustein .betreff { padding: .7rem 1.1rem 0; font-size: .9rem; color: var(--text-weich); }
.baustein .betreff b { color: var(--text); font-weight: 600; }
.baustein pre { margin: 0; padding: 1rem 1.1rem 1.1rem; white-space: pre-wrap; font: inherit; font-size: .97rem; line-height: 1.6; color: var(--text); }
.ph { color: var(--sand); border-bottom: 1px dashed color-mix(in oklab, var(--sand) 60%, transparent); padding: 0 .1em; }
.ph.gesetzt { border-bottom-color: transparent; color: var(--hellblau); }
.hinweis { font-size: .9rem; color: var(--text-weich); border-left: 2px solid var(--sand); padding: .3rem 0 .3rem 1rem; margin: .8rem 0 1.3rem; }

/* Kalender */
.tabelle-rahmen { overflow-x: auto; }
table.kalender { width: 100%; border-collapse: collapse; border: 1px solid var(--linie); font-size: .93rem; }
table.kalender th, table.kalender td { padding: .7rem .9rem; border-top: 1px solid var(--linie); vertical-align: top; text-align: left; }
table.kalender thead { display: none; }
table.kalender td.tag { font-family: var(--schmal); white-space: nowrap; color: var(--text-weich); font-size: .85rem; }
table.kalender td.tag b { display: block; color: var(--sand); font-weight: 700; letter-spacing: .1em; }
table.kalender tr.start td { background: var(--panel-hell); }
table.kalender td .etikett { display: inline-block; margin-bottom: .2rem; font-size: .58rem; }
table.kalender td:nth-child(3) { color: var(--text-weich); }

/* Düfte */
.duft { display: grid; grid-template-columns: minmax(13rem, 1fr) 2.2fr; gap: 1.5rem 3rem; padding: 3rem 0; border-top: 1px solid var(--linie); }
.duft:first-of-type { border-top: 0; padding-top: 1rem; }
.duft .foto { background: var(--panel); border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; display: grid; place-items: center; }
.duft .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.duft .foto:hover img { transform: scale(1.02); }
.duft h2 { margin-bottom: .2rem; font-size: clamp(2rem, 3.6vw, 3rem); }
.duft .dach { font-size: 1.1rem; color: var(--text-weich); margin-bottom: 1.2rem; }
.pyramide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: .6rem 0 1rem; background: var(--linie); border: 1px solid var(--linie); }
.pyramide div { background: var(--grund); padding: .7rem .9rem; }
.pyramide .etikett { display: block; margin-bottom: .2rem; font-size: .58rem; }
.pyramide p { margin: 0; font-size: .95rem; }
.hof { font-size: .9rem; color: var(--text-weich); margin-bottom: 1.2rem; }
.hof .etikett { font-size: .58rem; }
.stimmen blockquote { margin: 0 0 .7rem; padding: .8rem 1.1rem; background: var(--panel); border-left: 2px solid var(--sand); font-size: .95rem; }
.stimmen blockquote cite { display: block; font-style: normal; font-family: var(--schmal); text-transform: uppercase; letter-spacing: .14em; font-size: .6rem; color: var(--text-weich); margin-top: .4rem; }
.deeplink { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--linie); border-radius: var(--radius); padding: .7rem .9rem; font-size: .9rem; margin-top: .8rem; }
.deeplink .etikett { font-size: .58rem; }
.deeplink code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; color: var(--hellblau); word-break: break-all; }
.deeplink .knopf { margin-left: auto; }
@media (max-width: 760px) { .duft { grid-template-columns: 1fr; } .duft .foto { max-width: 20rem; } .pyramide { grid-template-columns: 1fr; } }
table.passt { width: 100%; border-collapse: collapse; border: 1px solid var(--linie); }
table.passt td { padding: .8rem 1rem; border-top: 1px solid var(--linie); vertical-align: top; }
table.passt td:first-child { width: 42%; }
table.passt td:nth-child(2) { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; white-space: nowrap; color: var(--sand); }
table.passt td:last-child { font-size: .92rem; color: var(--text-weich); }

/* Fragen */
.gruppe { margin-bottom: 2.5rem; }
details.frage { background: var(--grund); border: 1px solid var(--linie); border-bottom: 0; }
details.frage:last-of-type { border-bottom: 1px solid var(--linie); }
details.frage summary { cursor: pointer; padding: .95rem 1.1rem; font-family: var(--schmal); font-size: 1.1rem; font-weight: 600; list-style: none; display: flex; gap: .9rem; }
details.frage summary::before { content: "+"; color: var(--sand); font-weight: 400; width: 1rem; }
details.frage[open] summary::before { content: "–"; }
details.frage[open] { background: var(--panel); }
details.frage summary::-webkit-details-marker { display: none; }
details.frage .antwort { padding: 0 1.1rem 1.1rem 3rem; }
details.frage .antwort p { margin-bottom: .5rem; }
details.frage .quelle, .punkte-liste .quelle { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .1em; font-size: .6rem; color: var(--text-weich); }

/* Programm */
.punkte-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.punkte-liste li { background: var(--grund); padding: .9rem 1.1rem; }
.punkte-liste li p { margin: 0 0 .35rem; }
.offen li { border-left: 2px solid var(--sand); }

/* Leitplanken */
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 800px) { .zwei { grid-template-columns: 1fr; } }
.regel { background: var(--grund); border: 1px solid var(--linie); border-bottom: 0; padding: .9rem 1.1rem; }
.regel:last-child { border-bottom: 1px solid var(--linie); }
.regel h4 { margin-bottom: .25rem; }
.regel p { margin: 0; font-size: .95rem; color: var(--text-weich); }
.darf .regel { border-left: 2px solid var(--salbei); }
.darfnicht .regel { border-left: 2px solid #B5645A; }
.merksatz { font-family: var(--schmal); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 600; max-width: 34ch; padding: 1.4rem 1.6rem; background: var(--sand); color: var(--grund); border-radius: var(--radius); margin-top: 2rem; line-height: 1.2; }
table.laender { width: 100%; border-collapse: collapse; border: 1px solid var(--linie); font-size: .93rem; }
table.laender td { padding: .7rem 1rem; border-top: 1px solid var(--linie); vertical-align: top; }
table.laender td:first-child { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; white-space: nowrap; width: 15rem; color: var(--sand); }
table.laender td:last-child { color: var(--text-weich); }

/* Bilder */
.galerie { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); align-items: start; }
.galerie figure { margin: 0; background: var(--panel); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.galerie figure a { display: block; aspect-ratio: 1; }
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.galerie figure:hover img { transform: scale(1.03); }
.galerie figcaption { font-size: .74rem; padding: .5rem .65rem; color: var(--text-weich); display: flex; justify-content: space-between; gap: .4rem; }
.galerie figcaption a { text-decoration: none; font-family: var(--schmal); text-transform: uppercase; letter-spacing: .1em; font-size: .58rem; font-weight: 700; }

/* QR-Karte (cremefarben, weil sie gedruckt wird) */
.qr-karte { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; background: var(--cremekarte); color: #23241D; border-radius: var(--radius); padding: 1.2rem; max-width: 34rem; }
.qr-karte #qr { width: 132px; height: 132px; display: grid; place-items: center; }
.qr-karte #qr img, .qr-karte #qr canvas { width: 132px; height: 132px; }
.qr-karte .z1 { font-family: var(--schmal); font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.qr-karte .z2 { font-size: .9rem; }
.qr-karte .code { font-family: var(--schmal); font-size: 1.3rem; letter-spacing: .08em; color: var(--salbei-tief); font-weight: 700; }
.qr-karte .z3 { font-size: .7rem; color: #5A5B4E; margin-top: .4rem; }

/* PDF-Liste */
.pdf-liste { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.pdf-liste .karte { display: grid; gap: .5rem; }
.pdf-liste .aktionen { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }

/* Fuß */
footer { border-top: 1px solid var(--linie); padding: 2.5rem 0 3.5rem; font-size: .82rem; color: var(--text-weich); }
footer p { max-width: 62rem; }
footer .etikett { display: block; margin-bottom: .8rem; }

/* Sprachwahl */
.wahl { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 2rem; }
.wahl .sprachen-gross { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.wahl .sprachen-gross a { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 700; padding: .9rem 1.6rem; border: 1px solid var(--linie-stark); border-radius: var(--radius); text-decoration: none; color: var(--text); }
.wahl .sprachen-gross a:hover { border-color: var(--sand); color: var(--sand); }

/* Eintritt — zwei Elemente, nicht acht */
@keyframes eintritt { from { opacity: 0; transform: translateY(14px); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
.hero-panel h1, .hero-panel .einleitung { animation: eintritt 900ms cubic-bezier(.22,1,.36,1) both; }
.hero-panel .einleitung { animation-delay: 80ms; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Druck der normalen Seiten */
@media print {
  .kopf, .persona, .knopf, .sprachen, .prototyp, .suche-knopf, .suche { display: none !important; }
  body { background: #fff; color: #23241D; font-size: 11pt; }
  main { padding: 0; }
  a { color: inherit; text-decoration: none; }
}

/* Scent Finder */
.finder-raster { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .finder-raster { grid-template-columns: 1fr; } }
.finder { background: var(--panel); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.4rem); min-height: 22rem; }
.finder-frage h2 { text-transform: none; font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin: .6rem 0 1.4rem; }
.finder-antworten { display: grid; gap: .6rem; }
.finder-antwort { font: inherit; font-size: 1.05rem; text-align: left; padding: .9rem 1.1rem; background: var(--grund); color: var(--text); border: 1px solid var(--linie-stark); border-radius: var(--radius); cursor: pointer; transition: border-color .15s, background .15s; }
.finder-antwort:hover { border-color: var(--sand); background: var(--panel-hell); }
.finder-balken { height: 2px; background: var(--linie); margin-top: 1.6rem; }
.finder-balken span { display: block; height: 100%; background: var(--sand); transition: width .4s; }
.finder-ergebnis { display: grid; grid-template-columns: minmax(10rem, 1fr) 1.6fr; gap: 1.5rem; align-items: start; }
@media (max-width: 700px) { .finder-ergebnis { grid-template-columns: 1fr; } }
.finder-foto { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); }
.finder-foto img { width: 100%; height: 100%; object-fit: cover; }
.finder-ergebnis h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: .1rem; }
.finder-ergebnis .dach { color: var(--text-weich); font-size: 1.1rem; }
.finder-code { font-family: var(--schmal); font-size: 1.1rem; font-weight: 600; color: var(--sand); }
.finder-kennzeichnung { font-size: .78rem; }
.teilen-box pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--hellblau); word-break: break-all; }
.teilen-box .hinweis { margin: 0 1.1rem 1rem; }
/* Kundenansicht: der Finder ohne Hub-Menü */
body.kundenansicht .haupt, body.kundenansicht .persona, body.kundenansicht .prototyp, body.kundenansicht .teilen-box, body.kundenansicht .sprachen, body.kundenansicht footer .nur-bildschirm { display: none !important; }
body.kundenansicht .finder-raster { grid-template-columns: 1fr; max-width: 52rem; }
body.kundenansicht .marke .hubname { display: none; }

/* Post-Check */
.check-raster { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .check-raster { grid-template-columns: 1fr; } }
#check-text { width: 100%; font: inherit; font-size: 1rem; line-height: 1.55; padding: 1rem 1.1rem; background: var(--panel); color: var(--text); border: 1px solid var(--linie-stark); border-radius: var(--radius); resize: vertical; min-height: 18rem; }
#check-text::placeholder { color: var(--text-leise); }
.check-ok { background: var(--panel); border: 1px solid var(--salbei); border-left: 3px solid var(--salbei); border-radius: var(--radius); padding: 1rem 1.2rem; }
.check-ok p { margin: .3rem 0 0; }
.check-fund { background: var(--panel); border: 1px solid var(--linie); border-left: 3px solid var(--sand); border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: .7rem; }
.check-fund.stop { border-left-color: #B5645A; }
.check-fund.hint { border-left-color: var(--hellblau); }
.check-schwere { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .2em; font-size: .62rem; font-weight: 700; color: var(--sand); }
.check-fund.stop .check-schwere { color: #D8887E; }
.check-fund.hint .check-schwere { color: var(--hellblau); }
.check-fund p { margin: .3rem 0 0; }
.check-kontext { font-size: .9rem; color: var(--text-weich); }
.check-kontext mark { background: color-mix(in oklab, var(--sand) 35%, transparent); color: var(--text); padding: 0 .15em; border-radius: 2px; }
.check-fund .baustein { margin: .7rem 0 0; }
.check-fund .baustein-kopf b { font-family: var(--schrift); font-weight: 400; font-size: .9rem; }

.galerie.hoch { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.galerie.hoch figure a { aspect-ratio: 9 / 16; }

/* Suche — Knopf im Kopf, Overlay über der Seite */
.suche-knopf { display: inline-flex; align-items: center; justify-content: center; color: var(--text-weich); background: transparent; border: 0; padding: 0; cursor: pointer; line-height: 1; }
.suche-knopf:hover { color: var(--sand); }
.suche-knopf.menue { padding: .4rem 0; border-bottom: 1px solid transparent; border-radius: 0; }
.suche-knopf.menue:hover { border-color: var(--sand); }
.suche-knopf.pille { display: none; width: 30px; height: 30px; border: 1px solid var(--linie-stark); border-radius: 999px; }
.suche-knopf.pille:hover { border-color: var(--sand); }
.suche { position: fixed; inset: 0; z-index: 40; background: color-mix(in oklab, var(--grund) 80%, transparent); backdrop-filter: blur(6px); overflow-y: auto; padding: clamp(.6rem, 7vh, 5rem) clamp(.6rem, 3vw, 2rem); }
.suche-panel { max-width: 46rem; margin: 0 auto; background: var(--panel); border: 1px solid var(--linie-stark); border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.suche-form { display: flex; gap: .6rem; align-items: center; padding: .6rem .7rem .6rem 1.1rem; border-bottom: 1px solid var(--linie); }
.suche-form input { flex: 1; min-width: 0; font: inherit; font-size: 1.15rem; padding: .55rem 0; background: transparent; border: 0; color: var(--text); outline: none; }
.suche-form input::placeholder { color: var(--text-leise); }
.suche-form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.suche-stand { padding: .6rem 1.1rem .2rem; font-family: var(--schmal); text-transform: uppercase; letter-spacing: .2em; font-size: .6rem; font-weight: 600; color: var(--sand); }
.suche-stand:empty { display: none; }
.suche-eintrag { display: block; padding: .8rem 1.1rem; border-top: 1px solid var(--linie); text-decoration: none; color: inherit; }
.suche-eintrag:hover, .suche-eintrag:focus-visible { background: var(--panel-hell); outline: none; }
.suche-eintrag .etikett { display: block; font-size: .56rem; margin-bottom: .15rem; }
.suche-eintrag b { display: block; font-family: var(--schmal); font-size: 1.08rem; font-weight: 600; line-height: 1.2; }
.suche-eintrag p { margin: .25rem 0 0; font-size: .9rem; color: var(--text-weich); }
.suche mark { background: color-mix(in oklab, var(--sand) 35%, transparent); color: var(--text); padding: 0 .1em; border-radius: 2px; }
.suche-leer { padding: 1rem 1.1rem; margin: 0; color: var(--text-weich); }
.suche-hinweis { padding: .6rem 1.1rem .7rem; margin: 0; font-size: .78rem; color: var(--text-leise); border-top: 1px solid var(--linie); }
body.suche-offen { overflow: hidden; }
body.kundenansicht .suche-knopf, body.kundenansicht .suche { display: none !important; }
@media (max-width: 980px) {
  .suche-knopf.menue { display: none; }
  .suche-knopf.pille { display: inline-flex; margin-left: auto; }
  .suche-hinweis { display: none; }
}

/* Sprungziele: Platz für den festen Kopf, kurze Markierung nach dem Sprung */
[id] { scroll-margin-top: 6rem; }
@media (max-width: 980px) { [id] { scroll-margin-top: 8rem; } }
@keyframes markiert { 0%, 55% { box-shadow: inset 0 0 0 2px var(--sand); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
.markiert { animation: markiert 2.4s ease-out both; }

/* Kalender: Heute und vorbei */
table.kalender tr.vorbei td { opacity: .42; }
table.kalender tr.heute td { background: var(--panel-hell); }
table.kalender tr.heute td:first-child { box-shadow: inset 3px 0 0 var(--sand); }
.heute-etikett { display: inline-block; margin-left: .45rem; padding: .1rem .45rem; background: var(--sand); color: var(--grund); border-radius: 999px; font-size: .55rem; letter-spacing: .18em; vertical-align: middle; }

/* Handy-Installation */
.installation { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.installation div { background: var(--grund); padding: 1rem 1.2rem; color: var(--text-weich); font-size: .95rem; }

/* Fußzeile: Rechtslinks und Rückkanal */
footer .rueckkanal a { color: var(--sand); }
footer .rechtslinks { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 1.2rem 0 0; }
footer .rechtslinks a { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .14em; font-size: .64rem; font-weight: 600; text-decoration: none; color: var(--text-weich); }
footer .rechtslinks a:hover { color: var(--sand); }

/* Impressum und Datenschutz */
.recht h2 { text-transform: none; font-size: 1.25rem; margin: 1.8rem 0 .4rem; letter-spacing: 0; }
.recht h2.recht-titel { text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--linie); }
.recht #impressum h2.recht-titel { border-top: 0; padding-top: 0; margin-top: 1.5rem; }
.recht p, .recht li { max-width: 46rem; color: var(--text-weich); font-size: .98rem; }
.recht p b { color: var(--text); }
.recht ul { padding-left: 1.2rem; }
.anbieter-kasten { margin-top: 2.5rem; padding: 1.3rem 1.5rem; background: var(--panel); border: 1px solid var(--linie); border-radius: var(--radius); max-width: 40rem; display: grid; gap: .4rem; }
.anbieter-kasten p { margin: 0 0 .6rem; color: var(--text); }
.anbieter-kasten .etikett { margin-top: .4rem; }

/* Profil */
.profil-zeile { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.profil-vorschau { display: flex; align-items: center; gap: .9rem; min-width: 0; flex: 1; }
.profil-foto { flex: none; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--panel-hell); border: 1px solid var(--linie-stark); display: grid; place-items: center; overflow: hidden; font-family: var(--schmal); font-weight: 700; color: var(--sand); font-size: 1.3rem; }
.profil-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profil-foto.klein { width: 2.6rem; height: 2.6rem; }
.profil-text { display: grid; gap: .1rem; min-width: 0; }
.profil-text .etikett { font-size: .58rem; }
.profil-text b { font-family: var(--schmal); font-size: 1.1rem; font-weight: 600; }
.profil-text .leise { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; }
.persona form .foto-feld, .persona form .aktionen { grid-column: 1 / -1; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.persona form .feld-titel { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .2em; font-size: .62rem; font-weight: 600; color: var(--sand); }
.persona form .foto-feld label.knopf { display: inline-block; text-transform: uppercase; letter-spacing: .16em; color: var(--text); }
.persona form .aktionen .status { font-size: .84rem; color: var(--text-weich); }
.persona form .aktionen .status.gut { color: var(--sand); }

/* Bildkarten-Galerie */
.format-filter { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1rem; }
.karten-raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); align-items: start; }
.karte-bild { margin: 0; background: var(--panel); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.karte-vorschau { background: var(--grund); display: grid; place-items: center; min-height: 12rem; color: var(--text-leise); font-size: .85rem; }
.karte-vorschau.story { aspect-ratio: 9 / 16; } .karte-vorschau.post { aspect-ratio: 4 / 5; } .karte-vorschau.pin { aspect-ratio: 2 / 3; }
.karte-vorschau canvas { width: 100%; height: 100%; display: block; }
.karte-bild figcaption { padding: .6rem .8rem; display: flex; justify-content: space-between; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .85rem; }
.karte-bild figcaption > span:first-child { display: grid; gap: .1rem; }
.karte-bild figcaption b { font-family: var(--schmal); font-weight: 600; }
.karte-bild figcaption .etikett { font-size: .55rem; }
.karte-bild .aktionen { display: flex; gap: .35rem; }

/* Serien in der Galerie, Videos */
.serie { display: flex; justify-content: space-between; align-items: baseline; margin: 2rem 0 .7rem; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--linie); padding-bottom: .4rem; }
.serie .leise { font-family: var(--schmal); letter-spacing: .2em; font-size: .7rem; }
.karten-anzahl { display: block; margin: -.2rem 0 1rem; }
.karte-vorschau.quadrat { aspect-ratio: 1; }
.video-raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); align-items: start; }
figure.video { margin: 0; background: var(--panel); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.video video { width: 100%; display: block; background: var(--grund); }
.video.hoch video { aspect-ratio: 9 / 16; } .video.quadrat video { aspect-ratio: 1; } .video.quer video { aspect-ratio: 16 / 9; }
.video figcaption { padding: .6rem .8rem; display: flex; justify-content: space-between; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .85rem; }
.video .aktionen { display: flex; gap: .35rem; }

/* Druckvorlagen-Kacheln in der Galerie */
.druck-vorlagen { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin-bottom: 1.2rem; }
.druck-vorlage { display: grid; gap: .25rem; padding: 1rem 1.1rem; background: var(--panel); border: 1px solid var(--linie); border-radius: var(--radius); text-decoration: none; color: var(--text); }
.druck-vorlage:hover { border-color: var(--sand); color: var(--text); }
.druck-vorlage b { font-family: var(--schmal); text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; }
.druck-vorlage span { font-size: .85rem; color: var(--text-weich); }