/* =====================================================================
   AMT FÜR OFFENE FRAGEN · LuzernNord — gemeinsamer Stil
   Website (index.html) und Abholstation (station.html)
   Zämme, reduziert · gelber Nylon · Druck bleibt schwarz-weiss
   ===================================================================== */
:root{
  --schwarz:#141414; --tafel:#EEEEEC; --weiss:#FFFFFF; --linie:#D3D3CF;
  --grau:#6F6F6B; --hell:#B5B5B0; --gelb:#F3CB34;
  --rund:28px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--gelb);color:var(--schwarz);font-family:Archivo,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;font-weight:450;-webkit-font-smoothing:antialiased;font-kerning:normal}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:"Space Mono",ui-monospace,monospace}

/* ── Gelber Nylon: glatt, Wellen wie ein Tuch, grobes ruhiges Korn ── */
.stoff{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#F3CB34}
.stoff i{position:absolute;display:block}
.stoff .falten{inset:-9%;background:url(falten.jpg?v=11051732) center/cover no-repeat;mix-blend-mode:soft-light;will-change:transform}
.stoff .falten.a{opacity:.95;animation:wehen-a 15s ease-in-out infinite alternate}
.stoff .falten.b{opacity:.5;background-image:url(falten2.jpg?v=11051732);animation:wehen-b 21s ease-in-out infinite alternate}
.stoff .korn{inset:0;background:url(korn.png?v=11051732) repeat;background-size:256px 256px;mix-blend-mode:soft-light;opacity:.3}
@keyframes wehen-a{0%{transform:translate3d(0,0,0) scale(1.06) skewX(0deg)}50%{transform:translate3d(-2.6%,1.2%,0) scale(1.1) skewX(1.4deg)}100%{transform:translate3d(2.2%,-1.1%,0) scale(1.07) skewX(-1.2deg)}}
@keyframes wehen-b{0%{transform:translate3d(0,0,0) scale(1.08) skewX(0deg)}100%{transform:translate3d(3%,1.8%,0) scale(1.12) skewX(-1.6deg)}}
@keyframes korn{0%{transform:translate(0,0)}20%{transform:translate(-37px,21px)}40%{transform:translate(18px,-44px)}60%{transform:translate(-25px,-12px)}80%{transform:translate(41px,30px)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.stoff .falten{animation:none}}

/* ── Gerüst ── */
.app{position:relative;z-index:1;min-height:100vh}
.buehne{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:104px 22px 48px}
.tafel{width:100%;max-width:880px;background:var(--tafel);border-radius:var(--rund);padding:40px 48px 40px;box-shadow:0 1px 2px rgba(60,40,0,.12),0 30px 80px rgba(90,60,0,.22)}
.tafel.breit{max-width:1120px}
.unter{width:100%;max-width:880px;margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.unter.breit{max-width:1120px}
.unter.innen{max-width:none;margin-top:22px}
.unter.innen .knopf-h{background:#fff;box-shadow:inset 0 0 0 1px var(--linie)}
.code-titel{margin-top:22px}
.code-nr{margin:4px 0 10px;font-size:clamp(76px,17vw,132px);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.code-text{margin:0;font-size:18px;line-height:1.45;color:var(--grau);max-width:40ch}
.punkte.warte{margin-top:22px;justify-content:flex-start}
.notiz{font-size:15px;font-weight:500;line-height:1.45;max-width:46ch}

/* Kopfzeile (Website) */
.w-kopf{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:10;width:calc(100% - 28px);max-width:1120px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;background:rgba(238,238,236,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;padding:10px 12px 10px 22px;box-shadow:0 1px 2px rgba(60,40,0,.1),0 10px 30px rgba(90,60,0,.14)}
.w-kopf .marke{font-size:16px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.w-kopf nav{display:flex;gap:4px}
.w-kopf nav button{background:none;border:0;border-radius:999px;padding:8px 15px;font-size:15.5px;font-weight:500;color:var(--grau)}
.w-kopf nav button:hover{color:var(--schwarz)}
.w-kopf nav button[aria-current=page]{background:var(--schwarz);color:#fff}
.w-kopf .ort{justify-self:end;font-size:14.5px;color:var(--grau);padding-right:10px;white-space:nowrap}

/* Eingabe */
.w-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px;color:var(--grau)}
.w-meta b{color:var(--schwarz);font-weight:600}
.leise{background:none;border:0;padding:4px 0;font-size:15px;color:var(--schwarz);text-decoration:underline;text-underline-offset:3px}
.frage{margin:18px 0 26px;font-weight:460;font-size:clamp(36px,5.2vw,64px);line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.frage .leitfrage{display:block}
.frage .unterfrage{display:block;margin-top:.32em;font-size:.56em;line-height:1.06;letter-spacing:-.03em;color:var(--grau);text-wrap:balance}
.w-feld{display:block;width:100%;min-height:124px;border:0;border-radius:20px;background:var(--weiss);padding:20px 22px;font-size:23px;font-weight:500;line-height:1.3;letter-spacing:-.01em;resize:none;outline:none;box-shadow:inset 0 0 0 1px var(--linie)}
.w-feld:focus{box-shadow:inset 0 0 0 2px var(--schwarz)}
.w-feld::placeholder{color:#9B9B96}
.zeile2{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-top:14px}
.w-von{flex:1;max-width:400px;border:0;border-bottom:1px solid var(--schwarz);background:transparent;padding:8px 0;font-size:16.5px;outline:none}
.w-von::placeholder{color:#8F8F8A}
.zaehler{font-size:14px;color:var(--grau);white-space:nowrap}
.schritte{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.schritte li{border-left:1px solid var(--linie);padding:0 0 0 16px}
.schritte .nr{display:block;font-size:34px;font-weight:300;color:var(--hell);letter-spacing:-.02em;line-height:1}
.schritte b{display:block;margin-top:16px;font-size:17.5px;font-weight:600}
.schritte span.t{display:block;margin-top:6px;font-size:15.5px;line-height:1.45;color:var(--grau)}

/* Knöpfe */
.pillen{display:flex;gap:8px;flex-wrap:wrap}
.knopf-s{display:inline-flex;align-items:center;gap:12px;background:var(--schwarz);color:#fff;border:0;border-radius:999px;padding:15px 20px 15px 26px;font-size:17px;font-weight:600;letter-spacing:-.005em}
.knopf-s::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.knopf-s:hover{background:#2b2b2b}
.knopf-h{display:inline-flex;align-items:center;gap:10px;background:var(--tafel);color:var(--schwarz);border:0;border-radius:999px;padding:15px 24px;font-size:17px;font-weight:600}
.knopf-h:hover{background:#fff}
.knopf-k{border:1px solid var(--schwarz);background:#fff;border-radius:999px;padding:8px 16px;font-size:15.5px;font-weight:600}
.knopf-k:hover{background:var(--tafel)}
.wackel{animation:wackel .35s}
@keyframes wackel{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* Rückfrage wird geschrieben */
.denkt{min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;text-align:center}
.denkt p{margin:0;font-size:30px;font-weight:460;letter-spacing:-.03em}
.punkte{display:flex;gap:12px}
.punkte i{width:12px;height:12px;border-radius:50%;background:var(--schwarz);animation:hupf 1.1s ease-in-out infinite}
.punkte i:nth-child(2){animation-delay:.15s}
.punkte i:nth-child(3){animation-delay:.3s}
@keyframes hupf{0%,80%,100%{transform:translateY(0);opacity:.25}40%{transform:translateY(-10px);opacity:1}}

/* Ergebnis */
.zitat{margin:14px 0 0;font-size:19.5px;line-height:1.45;color:var(--grau);max-width:56ch}
.trenner{height:1px;background:var(--linie);margin:22px 0}
.klein{font-size:15px;color:var(--grau)}
.rueck{margin:8px 0 0;font-weight:460;font-size:clamp(32px,4.2vw,52px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.hinweis-erg{margin:16px 0 0;font-size:17px;font-weight:500}
.vorschau{display:flex;gap:14px;align-items:flex-start;margin-top:24px;flex-wrap:wrap}
.vorschau .lab{box-shadow:0 1px 3px rgba(0,0,0,.16),0 8px 20px rgba(0,0,0,.08)}

/* Archiv als Liste */
.archiv-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.archiv-kopf h2{margin:0;font-size:clamp(34px,4.4vw,52px);font-weight:460;letter-spacing:-.04em;line-height:1}
.archiv-kopf h2 sup{font-size:.32em;letter-spacing:0;margin-left:4px;vertical-align:super;color:var(--grau)}
.archiv-kopf p{margin:0;font-size:15px;color:var(--grau);max-width:34ch}
.filter{display:flex;gap:6px;overflow-x:auto;padding:16px 0 10px;scrollbar-width:thin}
.chip{flex:none;border:1px solid var(--linie);background:#fff;border-radius:999px;padding:8px 15px;font-size:15px;font-weight:500;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip[aria-pressed=true]{background:var(--schwarz);border-color:var(--schwarz);color:#fff}
.liste{border-top:1px solid var(--linie)}
.zeile{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start;padding:22px 2px;border-bottom:1px solid var(--linie);cursor:pointer}
.zeile:hover .z-antwort{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.zeile:focus-visible{outline:2px solid var(--schwarz);outline-offset:4px;border-radius:6px}
.z-antwort{display:block;font-size:clamp(22px,2.4vw,30px);font-weight:460;letter-spacing:-.03em;line-height:1.12}
.z-rueck{display:block;margin-top:10px;font-size:18px;font-weight:600;line-height:1.35}
.z-rueck em{font-style:normal;font-weight:500;color:var(--grau);margin-right:6px}
.z-frage{display:block;margin-top:6px;font-size:14.5px;color:var(--grau)}
.z-nr{font-size:clamp(22px,2.4vw,30px);font-weight:400;letter-spacing:-.02em;font-style:italic;line-height:1.1}
.zeile.aus{opacity:.45}
.w-leer{padding:28px 0;font-size:17px;color:var(--grau)}

/* Konzept */
.konzept{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px}
.konzept h2{margin:0;font-size:clamp(30px,3.6vw,44px);font-weight:460;letter-spacing:-.04em;line-height:1.02}
.konzept .lead{margin:16px 0 0;font-size:16.5px;line-height:1.55;color:var(--grau)}
.konzept .lead a{color:var(--schwarz);font-weight:600}
.k-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.k-liste li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;padding:16px 0;border-bottom:1px solid var(--linie);font-size:16.5px;line-height:1.5}
.k-liste li .n{color:var(--grau)}
.k-liste li b{display:block;font-weight:600;font-size:18px;margin-bottom:2px}

/* Detail */
dialog{border:0;border-radius:var(--rund);padding:26px 28px 28px;max-width:min(780px,94vw);background:var(--tafel);color:var(--schwarz);box-shadow:0 30px 90px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(20,20,20,.45)}
.d-kopf{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d-kopf span{font-size:15px;color:var(--grau)}
.d-gegen{margin:14px 0 4px;font-weight:460;font-size:clamp(24px,3vw,34px);line-height:1.05;letter-spacing:-.035em}
.d-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}

/* Druck: nur die Etiketten, 62 × 90 mm */
#druck{position:fixed;left:-400mm;top:0}
@page{size:62mm 90mm;margin:0}
@media print{
  html,body{background:#fff!important;margin:0!important;padding:0!important;width:62mm}
  body>*:not(#druck){display:none!important}
  #druck{position:static!important;left:auto!important}
}

@media (max-width:820px){
  .w-kopf{grid-template-columns:1fr auto;padding:8px 8px 8px 16px;top:10px}
  .w-kopf .ort{display:none}
  .w-kopf nav button{padding:6px 10px;font-size:13px}
  .buehne{padding:84px 12px 32px}
  .tafel{padding:28px 22px 26px;border-radius:22px}
  .schritte{grid-template-columns:1fr;gap:14px}
  .schritte b{margin-top:8px}
  .zeile2{flex-direction:column;align-items:stretch}
  .w-von{max-width:none}
  .konzept{grid-template-columns:1fr;gap:26px}
  .vorschau .lab{zoom:.86}
}
@media (max-width:420px){ .w-kopf .marke{font-size:13px} .vorschau .lab{zoom:.74} }