/* ═══════════════════════════════════════════════════════════════
   leihmich.org — Verleih des Vereins SeiMensch
   Papier, Linolschnitt, Werkstatt. Signatur: gerissene Kante.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:#f9f5ea;
  --paper-2:#f3ecdb;
  --card:#fffefa;
  --ink:#1d2318;
  --ink-mid:#5a6150;
  --ink-soft:#8b9080;
  --green:#2f6a45;
  --green-deep:#215033;
  --green-pale:#e6efe1;
  --gold:#f2bf3f;
  --gold-deep:#cf9d18;
  --gold-pale:#fcf2d4;
  --line:rgba(29,35,24,.13);
  --line-2:rgba(29,35,24,.07);
  --shadow:0 1px 2px rgba(29,35,24,.05),0 4px 14px rgba(29,35,24,.06);
  --shadow-lift:0 3px 8px rgba(29,35,24,.08),0 14px 34px rgba(29,35,24,.11);
  --r:14px;
  --maxw:1240px;
  --display:'Outfit',system-ui,sans-serif;
  --hand:'Caveat',cursive;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Das hidden-Attribut kommt aus dem Browser-Stylesheet und verliert gegen
   jedes eigene display:. Ohne diese Zeile stehen versteckte Bloecke sichtbar
   da — zugeschlagen bei .komm-neu (display:flex). */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--display);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto ist Pflicht, sonst gewinnt das height-Attribut aus dem HTML
   und aspect-ratio bleibt wirkungslos. Wo eine feste Hoehe gebraucht wird
   (.thing-im, .cart-i), setzen die eigenen Regeln sie weiter unten zurueck. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2.5px solid var(--green);outline-offset:2px;border-radius:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:#fff;padding:12px 20px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ── Kopf ──────────────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:90;background:rgba(249,245,234,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2)}
.hd-in{display:flex;align-items:center;gap:16px;height:74px;min-width:0}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mk{width:42px;height:42px;object-fit:contain;flex-shrink:0}
.brand-tx{display:flex;flex-direction:column;line-height:1}
.brand-nm{font-size:1.31rem;font-weight:800;letter-spacing:-.028em}
.brand-nm span{font-weight:500;color:var(--ink-soft)}
.brand-cl{font-size:.7rem;color:var(--ink-soft);margin-top:3px;letter-spacing:.005em}
.nav{display:flex;gap:22px;margin-left:14px;flex-shrink:0}
.nav a{white-space:nowrap}
.nav a{font-size:.925rem;font-weight:500;color:var(--ink-mid);padding:5px 0;position:relative}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--gold);border-radius:2px;transition:right .22s ease}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.nav a[aria-current]{color:var(--ink);font-weight:600}
/* ── Suche im Kopf ─────────────────────────────────────────────
   Liegt auf jeder Seite und ist immer sichtbar. Ohne JavaScript bleibt es
   ein Formular, das auf /alle/ abschickt — die Vorschau ist eine Zugabe,
   keine Voraussetzung. */
.sb{position:relative;flex:1 1 160px;max-width:300px;margin-left:16px;min-width:0}
.sb-f{display:flex;align-items:center;gap:9px;min-width:0;height:42px;padding:0 12px;
  background:var(--card);border:1.5px solid var(--line);border-radius:12px;
  transition:border-color .18s,box-shadow .22s,background .18s}
.sb-f:focus-within{border-color:var(--green);background:#fff;
  box-shadow:0 0 0 4px rgba(47,106,69,.1),var(--shadow)}
.sb-ico{display:flex;color:var(--ink-soft);flex-shrink:0;transition:color .18s}
.sb-ico svg{width:18px;height:18px}
.sb-f:focus-within .sb-ico{color:var(--green)}
.sb-in{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:.92rem;
  color:var(--ink);padding:0;outline:none}
.sb-in::placeholder{color:var(--ink-soft)}
/* Das Kreuz der Browser-Suchfelder doppelt unseres — weg damit. */
.sb-in::-webkit-search-cancel-button{display:none}
.sb-x{display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;color:var(--ink-soft);flex-shrink:0;transition:background .15s,color .15s}
.sb-x svg{width:14px;height:14px}
.sb-x:hover{background:var(--paper-2);color:var(--ink)}
/* Tastenkürzel-Hinweis; auf Geräten ohne Tastatur sinnlos, siehe unten. */
.sb-k{flex-shrink:0;font-family:inherit;font-size:.72rem;font-weight:700;
  color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line-2);
  border-radius:6px;padding:2px 7px;line-height:1.3;transition:opacity .18s}
.sb-f:focus-within .sb-k{opacity:0}

/* Genau so breit wie das Feld — eine Mindestbreite ragt rechts aus dem
   Kopf heraus, sobald das Feld schmaler wird. */
.sb-pop{position:absolute;top:calc(100% + 9px);left:0;right:0;z-index:95;
  background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-lift);overflow:hidden;
  animation:sbAuf .22s cubic-bezier(.22,1,.36,1) both}
@keyframes sbAuf{from{opacity:0;transform:translateY(-8px) scale(.985)}}
.sb-kopf{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);padding:13px 15px 8px}
.sb-l{list-style:none;max-height:min(58vh,430px);overflow-y:auto;overscroll-behavior:contain}
.sb-t{display:flex;align-items:center;gap:12px;padding:9px 15px;cursor:pointer;
  transition:background .13s}
.sb-t:hover,.sb-t.auf{background:var(--green-pale)}
.sb-t img{width:44px;height:44px;border-radius:9px;object-fit:cover;flex-shrink:0;
  background:var(--paper-2)}
/* Name und Kategorie sind Spans — ohne eigene Spalte stehen sie sonst in
   einer Zeile aneinandergeklebt und sprengen die Klappe nach rechts. */
.sb-t-b{display:flex;flex-direction:column;min-width:0;flex:1}
.sb-t-n{display:block;font-size:.92rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-t-n mark{background:none;color:var(--green-deep);font-weight:800}
.sb-t-c{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Vorschlags-Wörter für den leeren Zustand */
.sb-chips{display:flex;flex-wrap:wrap;gap:7px;padding:2px 15px 14px}
.sb-chip{font-size:.8rem;font-weight:500;padding:6px 12px;border-radius:20px;
  background:var(--paper-2);border:1px solid var(--line-2);color:var(--ink-mid);
  transition:background .15s,color .15s,transform .15s}
.sb-chip:hover{background:var(--green-pale);color:var(--green-deep);transform:translateY(-1px)}
.sb-leer{padding:4px 15px 16px;font-size:.87rem;color:var(--ink-mid);line-height:1.55}
.sb-leer b{display:block;color:var(--ink);margin-bottom:3px}
.sb-alle{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 15px;border-top:1px solid var(--line-2);background:var(--paper);
  font-size:.86rem;font-weight:600;color:var(--green-deep);transition:background .15s}
.sb-alle svg{width:16px;height:16px;transition:transform .18s}
.sb-alle:hover{background:var(--green-pale)}
.sb-alle:hover svg{transform:translateX(3px)}

.hd-act{margin-left:auto;display:flex;align-items:center;gap:4px}
.act{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 11px;
  border-radius:10px;color:var(--ink-mid);position:relative;transition:background .15s,color .15s}
.act:hover{background:var(--paper-2);color:var(--ink)}
.act svg{width:21px;height:21px}
.act-l{font-size:.66rem;font-weight:600;letter-spacing:.01em}
.badge{position:absolute;top:2px;right:5px;min-width:17px;height:17px;padding:0 4px;
  background:var(--gold);color:var(--ink);border-radius:9px;font-size:.66rem;font-weight:800;
  display:none;align-items:center;justify-content:center;line-height:1}
.badge.on{display:flex}
.bt{display:none}

/* ── Gerissene Kante: die Signatur ─────────────────────────── */
.torn{position:relative}
.torn::before,.torn::after{content:'';position:absolute;left:0;right:0;height:13px;
  background-repeat:repeat-x;background-size:112px 13px;pointer-events:none}
.torn::before{top:-1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='13'%3E%3Cpath d='M0 13V4.2l7-2.1 5.4 3.1L20 1l6.3 3.6L33 .7l5.6 4.1L46 1.9l6.8 3.4L59 1.2l7.4 4.3 5.9-3.9 6.1 3.1 7.3-3.7 5.4 4.2 7.1-2.6 6.4 3.3 5.9-3.4 5.7 3.9V13z' fill='%23f9f5ea'/%3E%3C/svg%3E")}
.torn::after{bottom:-1px;transform:scaleY(-1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='13'%3E%3Cpath d='M0 13V4.2l7-2.1 5.4 3.1L20 1l6.3 3.6L33 .7l5.6 4.1L46 1.9l6.8 3.4L59 1.2l7.4 4.3 5.9-3.9 6.1 3.1 7.3-3.7 5.4 4.2 7.1-2.6 6.4 3.3 5.9-3.4 5.7 3.9V13z' fill='%23f9f5ea'/%3E%3C/svg%3E")}

/* ── Hero ──────────────────────────────────────────────────────
   Die vier Kennzahlen sind Teil der Komposition, nicht eine Leiste
   darunter: die beiden Zahlen liegen als Karten auf dem Foto, die
   zwei Textangaben stehen als feine Zeile unter der Suche.
   Tiefe entsteht dadurch, dass Flaeche, Foto und Karten sich
   unterschiedlich stark zum Zeiger bewegen (data-tiefe). ────── */
.hero{position:relative;padding:44px 0 58px;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center;
  position:relative;z-index:1}

/* feines Papierkorn — gibt der Flaeche Griffigkeit */
.korn{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .2 0 0 0 0 .14 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

.hero h1{font-size:clamp(2.4rem,4.7vw,3.75rem);font-weight:800;line-height:1.05;
  letter-spacing:-.033em;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--green);position:relative;white-space:nowrap;
  display:inline-block}
/* handgezogener Strich statt Balken — passt zum Linolschnitt der Marke */
.unterstrich{position:absolute;left:-2%;bottom:-.13em;width:104%;height:.3em;overflow:visible}
.unterstrich path{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:230;stroke-dashoffset:230;
  animation:strichZiehen .85s .5s cubic-bezier(.25,.9,.35,1) forwards}
@keyframes strichZiehen{to{stroke-dashoffset:0}}

.hero-sub{font-size:1.08rem;color:var(--ink-mid);max-width:34em;margin-bottom:28px}

.find{display:flex;gap:9px;max-width:490px}
.find-f{flex:1;display:flex;align-items:center;gap:11px;background:var(--card);
  border:1.5px solid var(--line);border-radius:12px;padding:0 16px;
  transition:border-color .18s,box-shadow .28s cubic-bezier(.22,1,.36,1)}
.find-f:focus-within{border-color:var(--green);box-shadow:0 0 0 4px rgba(47,106,69,.14)}
.find-f svg{width:19px;height:19px;color:var(--ink-soft);flex-shrink:0}
.find-f input{flex:1;border:none;outline:none;background:none;font-size:.98rem;
  padding:15px 0;color:var(--ink);min-width:0}
.find-f input::placeholder{color:var(--ink-soft)}
.btn-go{position:relative;overflow:hidden;background:var(--green);color:#fff;font-weight:700;
  font-size:.95rem;padding:0 27px;border-radius:12px;
  transition:background .18s,transform .2s cubic-bezier(.34,1.4,.64,1),box-shadow .25s}
.btn-go span{position:relative;z-index:1}
.btn-go::after{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
  transform:translateX(-120%)}
.btn-go:hover{background:var(--green-deep);transform:translateY(-2px);
  box-shadow:0 9px 22px rgba(33,80,51,.3)}
.btn-go:hover::after{animation:glanz .75s ease}
@keyframes glanz{to{transform:translateX(120%)}}
.btn-go:active{transform:translateY(0)}

.chips{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:20px}
.chips-l{font-size:.79rem;color:var(--ink-soft);margin-right:1px}
.chip{font-size:.79rem;font-weight:500;padding:6px 11px;border-radius:20px;white-space:nowrap;
  background:var(--card);border:1px solid var(--line);color:var(--ink-mid);
  transition:border-color .18s,color .18s,background .18s,transform .22s cubic-bezier(.34,1.4,.64,1)}
.chip:hover{border-color:var(--green);color:var(--green);background:var(--green-pale);
  transform:translateY(-2px)}

/* die zwei Textangaben, fein unter der Suche */
.hero-fakten{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;
  font-size:.86rem;color:var(--ink-mid)}
.hero-fakten span{display:inline-flex;align-items:center;gap:7px}
.hero-fakten svg{width:16px;height:16px;color:var(--green);flex-shrink:0}

/* ── Bildseite mit Tiefe ───────────────────────────────────── */
.hero-vis{position:relative;perspective:1200px;transform-style:preserve-3d}
.hero-mask{position:absolute;width:0;height:0;overflow:hidden}
.hv-blob{position:absolute;z-index:0;left:-12%;right:4%;bottom:-7%;height:62%;
  background:var(--gold);opacity:.92;
  border-radius:52% 48% 42% 58%/58% 44% 56% 42%;
  animation:blobDrift 19s ease-in-out infinite;will-change:transform}
@keyframes blobDrift{
  0%,100%{border-radius:52% 48% 42% 58%/58% 44% 56% 42%}
  50%    {border-radius:44% 56% 55% 45%/48% 56% 44% 52%}}
.hv-foto{position:relative;z-index:1;display:block;
  filter:drop-shadow(0 22px 40px rgba(29,35,24,.19));will-change:transform}
/* Foto ungeschnitten: hochformatig, traegt oben die Tafel und unten das Schild */
/* Vier Aufnahmen, die sich weich abloesen. Jede liegt ueber der naechsten;
   blendet die obere aus, kommt die darunter zum Vorschein — deshalb kein
   Geisterbild wie bei zwei gleichzeitig halbtransparenten Ebenen. */
.wechsel{position:relative;display:block;aspect-ratio:896/892;
  clip-path:url(#heroMaske);background:var(--paper-2);overflow:hidden}
.wb{position:absolute;inset:0;display:block;opacity:0;will-change:opacity,transform}
.wb img{width:100%;height:100%;object-fit:cover;display:block}
.wb1{z-index:4;opacity:1}
.wb2{z-index:3}
.wb3{z-index:2}
.wb4{z-index:1}
.wb{animation:wechseln 22s linear infinite}
.wb1{animation-delay:0s}
.wb2{animation-delay:5.5s}
.wb3{animation-delay:11s}
.wb4{animation-delay:16.5s}
@keyframes wechseln{
  0%  {opacity:1; transform:scale(1.018)}
  25% {opacity:1; transform:scale(1.048)}
  31% {opacity:0; transform:scale(1.054)}
  62% {opacity:0; transform:scale(1)}
  94% {opacity:0; transform:scale(1.006)}
  100%{opacity:1; transform:scale(1.018)}}

/* ── Emailschild „aus unserer Werkstatt" ───────────────────────
   War ins Standbild eingebrannt und ist in den Aufnahmen nicht mehr
   enthalten. Reagiert bewusst NICHT auf die Maus — es haengt an der Wand,
   nicht am Zeiger. Bewegt wird es nur beim Hereinkommen und vom Scrollen.

   Drei Ebenen, weil sich Transformationen sonst gegenseitig ueberschreiben:
   .schild    Position + Pendel beim Auftritt
   .schild-w  langsames Wiegen, Periode A
   .schild-in langsames Wiegen, Periode B (teilerfremd zu A)
   Zwei Perioden, die nicht ineinander aufgehen, ergeben eine Bewegung,
   die sich sichtbar nie wiederholt — das unterscheidet sie von einem
   mechanisch wirkenden Einzel-Loop. */
.schild{position:absolute;z-index:3;right:-9%;bottom:4%;display:block;
  transform-origin:76% -180%;
  animation:schildPendel 2.4s .6s cubic-bezier(.16,.9,.3,1) both}
.schild-w{display:block;transform-origin:76% -140%;
  rotate:var(--schwung,0deg);transition:rotate .5s cubic-bezier(.22,1.3,.4,1);
  animation:wiegenA 11s 3s ease-in-out infinite}
.schild-in{display:block;position:relative;padding:22px 34px 25px;
  transform-origin:76% -110%;
  background:linear-gradient(168deg,#fefdf6 0%,#f6f1e3 58%,#e7e0cb 100%);
  border-radius:11px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 -2px 6px rgba(120,110,86,.16) inset,
             var(--schatten,0 14px 30px rgba(29,35,24,.26));
  animation:wiegenB 7.3s 3s ease-in-out infinite}

/* Pendel: schwingt aus wie ein Schild an zwei Haken, Amplitude faellt ab */
@keyframes schildPendel{
  0%  {opacity:0; transform:translateY(-58px) rotate(-19deg) scale(.88)}
  14% {opacity:1; transform:translateY(0)     rotate(7.5deg)  scale(1.035)}
  27% {           transform:                  rotate(-8.4deg) scale(1)}
  39% {           transform:                  rotate(4.2deg)}
  50% {           transform:                  rotate(-5.4deg)}
  61% {           transform:                  rotate(1.1deg)}
  71% {           transform:                  rotate(-3.9deg)}
  80% {           transform:                  rotate(-1.2deg)}
  88% {           transform:                  rotate(-3.2deg)}
  95% {           transform:                  rotate(-2.1deg)}
  100%{opacity:1; transform:                  rotate(-2.6deg)}}
@keyframes wiegenA{0%,100%{transform:rotate(-.9deg)}50%{transform:rotate(.9deg)}}
@keyframes wiegenB{0%,100%{transform:rotate(.45deg)}50%{transform:rotate(-.45deg)}}

.schild-t{display:block;font-family:var(--display);font-weight:800;
  font-size:1.62rem;line-height:1.28;color:#242819;letter-spacing:-.018em;
  white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.75)}
/* die Herzen schlagen leicht versetzt — ein Herz, kein Metronom */
.schild-t b{color:var(--gold);font-weight:inherit;font-size:1.06em;
  display:inline-block;transform:translateY(.06em);
  animation:herzschlag 3.4s 3.2s ease-in-out infinite}
.schild-t br+ b,.schild-t b:last-of-type{animation-delay:3.55s}
@keyframes herzschlag{
  0%,72%,100%{transform:translateY(.06em) scale(1)}
  78%        {transform:translateY(.06em) scale(1.17)}
  84%        {transform:translateY(.06em) scale(1.02)}
  90%        {transform:translateY(.06em) scale(1.09)}}
.niete{position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#cfc7b0,#8e8770 70%);
  box-shadow:0 1px 1px rgba(255,255,255,.7)}
.niete-l{left:12px;bottom:12px}
.niete-r{right:12px;top:12px}

.karte{position:absolute;z-index:2;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line-2);border-radius:15px;
  padding:13px 17px 12px;box-shadow:0 10px 30px rgba(29,35,24,.16);
  will-change:transform}
.karte svg{width:19px;height:19px;color:var(--green);margin-bottom:5px}
.karte b{font-size:1.72rem;font-weight:800;letter-spacing:-.028em;line-height:1.05;
  font-variant-numeric:tabular-nums}
.karte i{font-style:normal;font-size:.79rem;color:var(--ink-mid);line-height:1.35;
  margin-top:1px;white-space:nowrap}
.karte-a{left:-13%;bottom:12%;transform:rotate(-2.4deg)}

/* Auftritt: eine gestaffelte Bewegung */
@keyframes auftritt{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes karteRein{from{opacity:0;transform:translateY(24px) scale(.9) rotate(0)}}
.hero h1,.hero-sub,.find,.chips,.hero-fakten{animation:auftritt .64s cubic-bezier(.22,1,.36,1) both}
.hero h1{animation-delay:.04s}
.hero-sub{animation-delay:.12s}
.find{animation-delay:.2s}
.chips{animation-delay:.28s}
.hero-fakten{animation-delay:.36s}
.hv-foto,.hv-blob{animation-name:auftritt,blobDrift;animation-duration:.7s,19s;
  animation-delay:.1s,0s;animation-fill-mode:both,none;
  animation-timing-function:cubic-bezier(.22,1,.36,1),ease-in-out;
  animation-iteration-count:1,infinite}
.hv-foto{animation:auftritt .7s .1s cubic-bezier(.22,1,.36,1) both}
.karte{animation:karteRein .7s cubic-bezier(.3,1.5,.5,1) both}
.karte-a{animation-delay:.5s}

/* ── Abschnitte ────────────────────────────────────────────── */
.sec{padding:66px 0}
.sec-hd{margin-bottom:32px}
.sec-hd h2{font-size:clamp(1.65rem,2.9vw,2.15rem);font-weight:800;letter-spacing:-.028em}
.sec-hd p{color:var(--ink-mid);margin-top:6px;font-size:1.02rem}
.sec-lnk{display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-weight:600;color:var(--green);font-size:.96rem}
.sec-lnk svg{width:17px;height:17px;transition:transform .18s}
.sec-lnk:hover svg{transform:translateX(4px)}

/* ── Kategorien ────────────────────────────────────────────── */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:16px}
.cat{position:relative;overflow:hidden;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);
  padding:26px 20px 22px;text-align:center;
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,border-color .2s}
/* Goldschein waechst beim Zeigen von unten herein */
.cat::before{content:'';position:absolute;left:0;right:0;bottom:0;height:0;
  background:linear-gradient(to top,var(--gold-pale),transparent);
  transition:height .38s cubic-bezier(.22,1,.36,1);pointer-events:none}
.cat:hover::before{height:100%}
.cat>*{position:relative}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:transparent}
.cat-ico{width:46px;height:46px;color:var(--ink);margin:0 auto 15px;opacity:.88;
  transition:color .24s,transform .38s cubic-bezier(.3,1.3,.4,1)}
.cat:hover .cat-ico{color:var(--green);transform:scale(1.1) rotate(-4deg)}
/* Die Icons zeichnen sich beim Einblenden selbst — dieselbe Handschrift wie
   bei den vier Schritten. Eine grosszuegige Strichlaenge fuer alle Pfade. */
.cats.da .cat-ico path,.cats.da .cat-ico circle{stroke-dasharray:220;stroke-dashoffset:220;
  animation:strich-ziehen 1s cubic-bezier(.4,0,.3,1) forwards}
.cats.da .cat:nth-child(2) .cat-ico *{animation-delay:.09s}
.cats.da .cat:nth-child(3) .cat-ico *{animation-delay:.18s}
.cats.da .cat:nth-child(4) .cat-ico *{animation-delay:.27s}
.cats.da .cat:nth-child(5) .cat-ico *{animation-delay:.36s}
.cats.da .cat:nth-child(6) .cat-ico *{animation-delay:.45s}
.cats.da .cat:nth-child(7) .cat-ico *{animation-delay:.54s}
.cats.da .cat:nth-child(8) .cat-ico *{animation-delay:.63s}
.cat-n{font-weight:700;font-size:1.03rem;letter-spacing:-.012em}
.cat-c{font-size:.86rem;color:var(--ink-soft);margin-top:3px}
.cat-d{font-size:.8rem;color:var(--ink-soft);margin-top:7px;line-height:1.4}
.cat.all{background:var(--gold-pale);border-color:rgba(207,157,24,.24);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.cat.all .cat-n{color:var(--gold-deep)}

.note{background:var(--green-pale);border-radius:var(--r);padding:24px 30px;
  margin-top:26px;display:flex;align-items:center;gap:18px}
.note b{font-weight:700}
.note p{color:var(--ink-mid);font-size:.95rem;margin-top:2px}
.note-n{font-size:1.06rem;font-weight:700;letter-spacing:-.015em}

/* ── Dinge-Raster ──────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:20px}
.thing{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.thing:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:transparent}
/* ⚠️ 1/1, nicht 4/3. Alle Fotos sind quadratisch aufbereitet (ImageOps.fit,
   640² bzw. 420²). Ein 4:3-Rahmen schnitt mit object-fit:cover ein Viertel
   jedes Bildes weg — oben und unten je 12,5 %. Gemessen: Kachel 282x212 bei
   Quelle 640x640. Damit war genau die Arbeit zunichte, die in das saubere
   Zuschneiden der Lagerfotos geflossen ist. */
.thing-im{position:relative;aspect-ratio:1/1;background:var(--paper-2);overflow:hidden}
/* Kennzeichnung auch auf der Kachel: 88 der 234 Bilder zeigen ein
   vergleichbares Gerät, nicht unser Exemplar. Auf der Detailseite stand das
   längst, im Raster fehlte es. Bewusst klein und leise. */
.thing-bsp{position:absolute;left:9px;bottom:9px;z-index:2;
  background:rgba(255,254,250,.9);color:var(--ink-soft);
  font-size:.68rem;font-weight:600;letter-spacing:.02em;
  padding:3px 8px;border-radius:20px;pointer-events:none;
  box-shadow:0 1px 4px rgba(29,35,24,.1)}
.thing-im img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.thing:hover .thing-im img{transform:scale(1.045)}
.thing-b{flex:1;padding:15px 16px 16px;display:flex;flex-direction:column}
.thing-n{font-weight:700;font-size:.97rem;line-height:1.3;letter-spacing:-.012em}
.thing-c{font-size:.82rem;color:var(--ink-soft);margin-top:3px}
.thing-a{margin-top:auto;padding-top:14px;display:flex;gap:8px;align-items:center}
.btn-add{flex:1;background:var(--gold);color:var(--ink);font-weight:700;font-size:.89rem;
  padding:10px 14px;border-radius:9px;text-align:center;
  transition:background .16s,transform .12s}
.btn-add:hover{background:var(--gold-deep)}
.btn-add:active{transform:translateY(1px)}
.thing.in .btn-add{background:var(--green);color:#fff}
.fav{position:absolute;top:9px;right:9px;width:33px;height:33px;border-radius:50%;
  background:rgba(255,254,250,.93);display:flex;align-items:center;justify-content:center;
  color:var(--ink-mid);transition:color .16s,transform .18s,background .16s;z-index:2}
.fav svg{width:18px;height:18px}
.fav:hover{transform:scale(1.12);color:var(--gold-deep)}
.fav.on{color:var(--gold-deep)}
.fav.on svg{fill:var(--gold)}

/* ── Werkzeugleiste Listing ────────────────────────────────── */
.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.sel{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:9px 14px;font-size:.89rem;font-weight:500;color:var(--ink-mid)}
.sel svg{width:16px;height:16px}
.sel select{border:none;background:none;outline:none;font:inherit;color:var(--ink);
  font-weight:600;cursor:pointer}
.cnt{margin-left:auto;font-size:.89rem;color:var(--ink-soft)}
.back{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:500;
  color:var(--ink-mid);margin-bottom:16px}
.back svg{width:16px;height:16px}
.back:hover{color:var(--green)}
.pg-hd{margin-bottom:24px}
.pg-hd h1{font-size:clamp(1.85rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.03em}
.pg-hd p{color:var(--ink-mid);margin-top:5px}
.empty{text-align:center;padding:60px 20px;color:var(--ink-mid)}
.empty b{display:block;font-size:1.1rem;color:var(--ink);margin-bottom:6px}

/* Nachladen statt endloser Liste */
.mehr-w{display:flex;justify-content:center;margin-top:30px}
.btn-mehr{background:var(--card);border:1.5px solid var(--line);color:var(--ink);
  font-weight:600;font-size:.95rem;padding:14px 30px;border-radius:12px;
  transition:border-color .18s,color .18s,transform .16s,box-shadow .2s}
.btn-mehr:hover{border-color:var(--green);color:var(--green-deep);
  transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-mehr:active{transform:translateY(0)}

/* ── Stimmen ───────────────────────────────────────────────────
   Echte Beiträge aus dem Bestand, nichts Erfundenes. Der Abschnitt bleibt
   versteckt, solange es keine gibt — eine leere Überschrift wäre schlimmer
   als gar keine. */
.sec-stimmen{background:var(--paper-2)}
.stimmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.st{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 22px 20px;box-shadow:var(--shadow);
  transition:transform .24s cubic-bezier(.34,1.3,.64,1),box-shadow .24s}
.st:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:var(--shadow-lift)}
/* Das Anführungszeichen ist gezeichnet, nicht getippt — es soll Fläche sein. */
.st::before{content:"„";position:absolute;top:-6px;left:16px;
  font-family:var(--display);font-size:5rem;line-height:1;color:var(--gold);
  opacity:.34;pointer-events:none}
.st-t{position:relative;font-size:1rem;line-height:1.62;color:var(--ink);
  margin-bottom:18px}
.st-f{display:flex;align-items:center;gap:11px;border-top:1px solid var(--line-2);
  padding-top:14px}
.st-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;
  background:var(--green-pale)}
.st-av-l{display:grid;place-items:center;font-weight:800;color:var(--green-deep);
  font-size:1.02rem}
.st-n{font-size:.92rem;font-weight:700;line-height:1.3}
.st-m{font-size:.78rem;color:var(--ink-soft);margin-top:1px}
.st-m a{color:var(--green-deep);text-decoration:underline;
  text-decoration-color:rgba(47,106,69,.3);text-underline-offset:2px}
.st-m a:hover{text-decoration-color:var(--green)}

/* ── Kategorienleiste auf „Entdecken" ──────────────────────────
   Filtert ohne Seitenwechsel. Die Zahl je Knopf kommt aus dem Bau, steht
   also auch ohne JavaScript da und stimmt immer mit dem Bestand überein. */
.kfilter{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 26px}
.kf{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:22px;
  background:var(--card);border:1.5px solid var(--line);color:var(--ink-mid);
  font-size:.88rem;font-weight:600;position:relative;overflow:hidden;
  transition:border-color .18s,color .18s,background .18s,transform .16s}
.kf span{font-size:.76rem;font-weight:700;color:var(--ink-soft);
  background:var(--paper-2);border-radius:11px;padding:1px 7px;transition:all .18s}
.kf:hover{border-color:var(--green);color:var(--green-deep);transform:translateY(-2px)}
.kf.on{background:var(--green);border-color:var(--green);color:#fff}
.kf.on span{background:rgba(255,255,255,.22);color:#fff}
/* Beim Umschalten wandert ein Lichtstreifen durch — dieselbe Geste wie beim
   Hauptknopf und den Zweck-Karten. */
.kf.on::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.4) 50%,transparent 62%);
  transform:translateX(-120%);animation:glanz .7s ease}
/* Auftritt gestaffelt, damit die Leiste sich aufbaut statt hinzuspringen. */
.kf{animation:auftritt .45s cubic-bezier(.22,1,.36,1) both}
.kf:nth-child(1){animation-delay:.02s}.kf:nth-child(2){animation-delay:.05s}
.kf:nth-child(3){animation-delay:.08s}.kf:nth-child(4){animation-delay:.11s}
.kf:nth-child(5){animation-delay:.14s}.kf:nth-child(6){animation-delay:.17s}
.kf:nth-child(7){animation-delay:.2s}.kf:nth-child(8){animation-delay:.23s}
.kf:nth-child(9){animation-delay:.26s}.kf:nth-child(10){animation-delay:.29s}
.kf:nth-child(11){animation-delay:.32s}.kf:nth-child(12){animation-delay:.35s}

/* ── Detailseite ───────────────────────────────────────────── */
.det{display:grid;grid-template-columns:.92fr 1fr;gap:48px;align-items:start;padding-top:8px}
/* ── Bildergalerie auf der Detailseite ─────────────────────────
   Mehrere Ansichten zum Durchschalten. Beispielbilder sind als solche
   gekennzeichnet — sie zeigen ein vergleichbares Geraet, nicht das
   Exemplar des Vereins. Das eigene Foto ist immer die letzte Ansicht. */
.galerie{align-self:start}
.gal-buehne{position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line);aspect-ratio:1/1}
.gal-b{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .35s cubic-bezier(.22,1,.36,1)}
.gal-b.da{opacity:1;visibility:visible}
.gal-b img{width:100%;height:100%;object-fit:cover;display:block}
.gal-hinweis{position:absolute;left:12px;top:12px;z-index:2;
  background:rgba(255,254,250,.94);color:var(--ink-mid);
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  padding:5px 11px;border-radius:20px;box-shadow:0 2px 8px rgba(29,35,24,.12)}
.gal-hinweis.eigen{background:var(--green);color:#fff}
/* Hinweisband im Bild — NUR wo ein falscher Eindruck jemanden gefährden
   könnte (Schutz- und Rettungsausrüstung). Farb- und Bauartunterschiede
   deckt die Zeile unter der Galerie ab; dafür braucht es kein Band.
   Bewusst hell und leise: es ist eine Einordnung, keine Mängelrüge. Ein
   dunkles Vollband liest sich wie eine Warnung vor dem Ding selbst und
   wertet den ganzen Katalog ab. */
.gal-band{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
  display:flex;gap:9px;align-items:flex-start;
  background:rgba(255,254,250,.94);color:var(--ink-mid);
  font-size:.75rem;font-weight:500;line-height:1.45;
  padding:9px 12px;border-radius:9px;box-shadow:0 2px 10px rgba(29,35,24,.14)}
.gal-band::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--gold-deep);margin-top:5px}

.gal-pfeil{position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:rgba(255,254,250,.93);color:var(--ink);
  box-shadow:0 3px 12px rgba(29,35,24,.2);opacity:0;
  transition:opacity .2s,transform .2s cubic-bezier(.34,1.4,.64,1)}
.gal-pfeil svg{width:19px;height:19px}
.gal-buehne:hover .gal-pfeil,.gal-pfeil:focus-visible{opacity:1}
.gal-pfeil:hover{transform:translateY(-50%) scale(1.09)}
.gal-vor{right:12px}
.gal-zurueck{left:12px}

.gal-mini{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}
.gal-m{width:66px;height:66px;border-radius:10px;overflow:hidden;padding:0;
  border:2px solid transparent;background:var(--paper-2);
  transition:border-color .18s,transform .18s cubic-bezier(.34,1.4,.64,1)}
.gal-m img{width:100%;height:100%;object-fit:cover;display:block}
.gal-m:hover{transform:translateY(-2px)}
.gal-m.da{border-color:var(--green)}

.gal-quelle{font-size:.76rem;color:var(--ink-soft);margin-top:11px;line-height:1.5}
.gal-quelle a{color:var(--ink-mid);text-decoration:underline;
  text-decoration-color:rgba(29,35,24,.25);text-underline-offset:2px}
.gal-quelle a:hover{color:var(--green)}

.det h1{font-size:clamp(1.75rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.12;margin-bottom:12px}
.det-cat{display:inline-flex;align-items:center;gap:7px;background:var(--green-pale);
  color:var(--green-deep);font-size:.84rem;font-weight:600;padding:5px 13px;border-radius:20px}
.det-cat svg{width:15px;height:15px}
.det-d{font-size:1.045rem;color:var(--ink-mid);margin:22px 0 26px;line-height:1.62}
.det-a{display:flex;gap:11px;flex-wrap:wrap}
.btn-big{background:var(--gold);color:var(--ink);font-weight:700;font-size:1rem;
  padding:14px 30px;border-radius:11px;transition:background .16s,transform .12s}
.btn-big:hover{background:var(--gold-deep)}
.btn-big:active{transform:translateY(1px)}
.btn-gh{background:var(--card);border:1.5px solid var(--line);color:var(--ink);
  font-weight:600;font-size:.96rem;padding:13px 24px;border-radius:11px;
  display:inline-flex;align-items:center;gap:9px;transition:border-color .16s,color .16s}
.btn-gh:hover{border-color:var(--green);color:var(--green)}
.btn-gh svg{width:18px;height:18px}
.facts{margin-top:30px;border-top:1px solid var(--line);padding-top:22px;
  display:flex;flex-direction:column;gap:13px}
.fact{display:flex;gap:13px;align-items:flex-start;font-size:.93rem;color:var(--ink-mid)}
.fact svg{width:19px;height:19px;color:var(--green);flex-shrink:0;margin-top:1px}
.fact b{color:var(--ink);font-weight:600}

/* ── Weitersagen ───────────────────────────────────────────────
   Der native Teilen-Knopf steht im HTML auf hidden; leihmich.js nimmt das
   Attribut weg, sobald der Browser navigator.share kann. Die drei festen
   Wege daneben funktionieren immer, auch am Schreibtisch. */
.teilen{margin-top:26px;border-top:1px solid var(--line);padding-top:18px}
.teilen-t{display:block;font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:11px}
.teilen-r{display:flex;gap:8px;flex-wrap:wrap}
.tl{display:inline-flex;align-items:center;gap:7px;background:var(--card);
  border:1.5px solid var(--line);border-radius:10px;padding:9px 14px;
  font-size:.86rem;font-weight:600;color:var(--ink-mid);
  transition:border-color .16s,color .16s,background .16s,transform .16s}
.tl svg{width:16px;height:16px;flex-shrink:0}
.tl:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
.tl-nativ{background:var(--green);border-color:var(--green);color:#fff}
.tl-nativ:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.tl-wa:hover{border-color:#25d366;color:#128c47}
.tl.gemacht{background:var(--green-pale);border-color:var(--green);color:var(--green-deep)}

/* ── Detailseite: der ausgebaute Teil ──────────────────────────
   Links die Einsatzzwecke als nummerierte Karten, rechts der Zettel mit den
   Hinweisen und darunter die belegten Daten. Fehlt der Zweck-Block, stellt
   .mehr-ohne die beiden Restspalten nebeneinander. */
.sec-mehr{padding-top:0}
.mehr{display:grid;grid-template-columns:1.34fr .8fr;gap:34px 46px;align-items:start}
.mehr-ohne{grid-template-columns:1fr 1fr}
/* Zweck und Daten stehen untereinander links, der Zettel bildet die rechte
   Spalte. Andersherum (Zettel + Daten rechts) blieb unter den Karten ein
   dreihundert Pixel hohes Loch stehen. */
.mehr .zweck{grid-column:1;grid-row:1}
.mehr .eignung{grid-column:1;grid-row:2}
.mehr .daten{grid-column:1;grid-row:3}
.mehr .wissen{grid-column:2;grid-row:1/span 3;position:sticky;top:92px}
/* „Passt dazu" laeuft ueber die volle Breite — es sind Kacheln, keine Liste. */
.mehr .passt{grid-column:1/-1;grid-row:4}
.mehr-ohne .wissen,.mehr-ohne .daten{grid-column:auto;grid-row:auto;position:static}

.mehr-h{display:flex;align-items:center;gap:12px;font-size:1.16rem;font-weight:800;
  letter-spacing:-.02em;margin-bottom:17px}
.mehr-i{width:33px;height:33px;border-radius:10px;background:var(--green-pale);
  color:var(--green-deep);display:grid;place-items:center;flex-shrink:0;
  transform:scale(.5) rotate(-18deg);opacity:0;
  transition:transform .5s cubic-bezier(.34,1.5,.64,1),opacity .4s}
.reveal.da .mehr-i{transform:none;opacity:1}
.mehr-i svg{width:18px;height:18px}
/* Das Zeichen zeichnet sich selbst — derselbe Kniff wie bei den
   Kategorie-Icons: der Strich beginnt vollständig verschoben. */
.mehr-i svg path,.mehr-i svg circle{stroke-dasharray:90;stroke-dashoffset:90;
  transition:stroke-dashoffset .8s cubic-bezier(.22,1,.36,1) .18s}
.reveal.da .mehr-i svg path,.reveal.da .mehr-i svg circle{stroke-dashoffset:0}
/* Der Goldstrich zieht sich auf, sobald der Block ins Blickfeld kommt. */
.mehr-strich{flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),rgba(242,191,63,0));
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.22,1,.36,1) .12s}
.reveal.da .mehr-strich{transform:scaleX(1)}

.zweck-g{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.zw{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 19px 18px;
  transition:transform .22s cubic-bezier(.34,1.3,.64,1),box-shadow .22s,border-color .22s}
.zw:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);
  border-color:rgba(47,106,69,.28)}
.zw::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--gold);transform:scaleY(0);transform-origin:top;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.zw:hover::before{transform:scaleY(1)}
/* Ein Lichtstreifen wandert beim Darüberfahren über die Karte —
   dieselbe Geste wie beim grünen Hauptknopf (@keyframes glanz). */
.zw::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.62) 50%,transparent 62%);
  transform:translateX(-120%)}
.zw:hover::after{animation:glanz .8s ease}
/* Die Ziffer springt auf, sobald die Karte steht. */
.zw-n{display:block;font-size:.7rem;font-weight:800;letter-spacing:.16em;
  color:var(--gold-deep);margin-bottom:9px}
.reveal-g.da .zw-n{animation:ziffernSprung .55s cubic-bezier(.34,1.55,.64,1) both}
.reveal-g.da>*:nth-child(1) .zw-n{animation-delay:.16s}
.reveal-g.da>*:nth-child(2) .zw-n{animation-delay:.21s}
.reveal-g.da>*:nth-child(3) .zw-n{animation-delay:.26s}
.reveal-g.da>*:nth-child(4) .zw-n{animation-delay:.31s}
.reveal-g.da>*:nth-child(5) .zw-n{animation-delay:.36s}
@keyframes ziffernSprung{from{opacity:0;transform:translateY(7px) scale(.55)}}
.zw h3{font-size:1.01rem;font-weight:700;letter-spacing:-.01em;margin-bottom:5px}
.zw p{font-size:.91rem;color:var(--ink-mid);line-height:1.58}

/* Hinweise auf einem Zettel — das Klebeband ist dasselbe Motiv wie bei
   „So funktioniert's". */
/* Der Zettel legt sich hin und wird dann festgeklebt: erst kippt er in seine
   leichte Schräge, danach zieht sich der Klebestreifen in die Breite. Genau
   die Reihenfolge, in der man es auch von Hand machen würde. */
.wissen-l{list-style:none;position:relative;background:var(--gold-pale);
  border:1px solid rgba(207,157,24,.24);border-radius:var(--r);
  padding:24px 20px 20px;box-shadow:var(--shadow);
  transform:rotate(-1.6deg) translateY(16px);opacity:0;
  transition:transform .62s cubic-bezier(.22,1,.36,1),opacity .5s}
.wissen.da .wissen-l{transform:rotate(-.4deg) translateY(0);opacity:1}
.wissen-l::before{content:"";position:absolute;top:-9px;left:50%;
  width:76px;height:19px;border-radius:2px;
  transform:translateX(-50%) rotate(-2.4deg) scaleX(.12);opacity:0;
  background:rgba(255,254,250,.74);border:1px solid rgba(29,35,24,.06);
  transition:transform .42s cubic-bezier(.34,1.4,.64,1) .42s,opacity .2s .42s}
.wissen.da .wissen-l::before{transform:translateX(-50%) rotate(-2.4deg) scaleX(1);opacity:1}
.wissen-l li{display:flex;flex-direction:column;gap:2px;padding:11px 0;
  border-bottom:1px dashed rgba(207,157,24,.34)}
.wissen-l li:first-child{padding-top:2px}
.wissen-l li:last-child{border-bottom:0;padding-bottom:0}
.wissen-l b{font-size:.93rem;font-weight:700}
.wissen-l span{font-size:.89rem;color:var(--ink-mid);line-height:1.55}

/* ── Geeignet / Nicht geeignet ─────────────────────────────────
   Zwei Spalten nebeneinander, damit man den Unterschied auf einen Blick
   sieht. Die rechte Spalte ist die nuetzlichere: sie erspart die Fahrt
   nach Feldkirchen fuer ein Geraet, das die Aufgabe nicht kann. */
.eig{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.eig-s{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:17px 18px 15px}
.eig-s h3{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:700;
  letter-spacing:.01em;margin-bottom:11px}
.eig-s h3 svg{width:17px;height:17px;flex-shrink:0}
.eig-s ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.eig-s li{position:relative;padding-left:15px;font-size:.9rem;line-height:1.5;
  color:var(--ink-mid)}
.eig-s li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%}
.eig-ja{border-color:rgba(47,106,69,.26)}
.eig-ja h3{color:var(--green-deep)}
.eig-ja li::before{background:var(--green)}
.eig-nein h3{color:#a3402f}
.eig-nein li::before{background:#c2705f}

/* ── Passt dazu ────────────────────────────────────────────────
   Verweise auf ANDERE Dinge aus dem Bestand — dasselbe Akkusystem, das
   noetige Zubehoer, das Gegenstueck. Die Slugs prueft der Bau. */
.pz-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:11px}
.pz{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:10px 13px 10px 10px;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.pz:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--shadow)}
.pz img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex-shrink:0;
  background:var(--paper-2)}
.pz span{display:flex;flex-direction:column;min-width:0;font-size:.78rem;
  color:var(--ink-soft);line-height:1.35}
.pz b{font-size:.9rem;font-weight:700;color:var(--ink);
  /* Zwei Zeilen statt Auslassungszeichen — die Namen sind lang, und der Platz
     unter der Kachel ist ohnehin da. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  line-clamp:2;overflow:hidden}
.pz-grund{font-size:.86rem;color:var(--ink-mid);margin:-6px 0 13px;line-height:1.5}

.dat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:4px 18px}
.dat-z{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line-2)}
.dat-z:last-child{border-bottom:0}
.dat dt{font-size:.86rem;color:var(--ink-soft)}
/* Der Wert läuft von rechts ein — die Zahl kommt nach der Bezeichnung an,
   so wie man eine Tabelle liest. */
.dat dd{font-size:.92rem;font-weight:700;text-align:right;
  transform:translateX(14px);opacity:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s}
.dat.da dd{transform:none;opacity:1}
.dat.da .dat-z:nth-child(1) dd{transition-delay:.1s}
.dat.da .dat-z:nth-child(2) dd{transition-delay:.16s}
.dat.da .dat-z:nth-child(3) dd{transition-delay:.22s}
.dat.da .dat-z:nth-child(4) dd{transition-delay:.28s}
.dat.da .dat-z:nth-child(5) dd{transition-delay:.34s}
.dat.da .dat-z:nth-child(6) dd{transition-delay:.4s}
/* Woher die Zahlen kommen. Ohne diese Zeile wirkt jede Angabe erfunden. */
.dat-q{font-size:.75rem;color:var(--ink-soft);margin-top:9px;padding-left:2px;line-height:1.5}

/* Bedienungsanleitung beim Hersteller — fremdes Ziel, neuer Tab. Das sagt
   die zweite Zeile ausdrücklich, damit der Sprung niemanden überrascht. */
.handbuch{display:flex;align-items:center;gap:12px;margin-top:14px;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  padding:14px 16px;transition:border-color .18s,transform .18s,box-shadow .18s}
.handbuch:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--shadow)}
.handbuch>svg:first-child{width:22px;height:22px;color:var(--green);flex-shrink:0}
.handbuch>svg:last-child{width:15px;height:15px;color:var(--ink-soft);
  flex-shrink:0;margin-left:auto;transition:color .18s}
.handbuch:hover>svg:last-child{color:var(--green)}
.handbuch span{display:flex;flex-direction:column;gap:1px;font-size:.76rem;
  color:var(--ink-soft);line-height:1.4}
.handbuch b{font-size:.93rem;font-weight:700;color:var(--ink)}
/* Der Pfeil wandert beim Darüberfahren ein Stück nach außen — dieselbe
   Richtung, in die der Klick führt. */
.handbuch:hover>svg:last-child{transform:translate(2px,-2px)}
.handbuch>svg:last-child{transition:color .18s,transform .18s}

/* ── Auftritt der Detailseite ──────────────────────────────────
   Die rechte Spalte tritt beim Laden von unten ein, Zeile für Zeile.
   Das ist die einzige Bewegung ohne Scrollauslöser — sie erklärt dem Auge
   die Lesereihenfolge, statt alles gleichzeitig hinzustellen. */
.det-cat,.det h1,.det-d,.det-a,.facts,.teilen{
  animation:auftritt .6s cubic-bezier(.22,1,.36,1) both}
.det-cat{animation-delay:.05s}
.det h1{animation-delay:.11s}
.det-d{animation-delay:.18s}
.det-a{animation-delay:.25s}
.facts{animation-delay:.32s}
.teilen{animation-delay:.39s}
/* Das Bild kommt aus der Tiefe, leicht vergrößert und schärft sich ein. */
.det .galerie{animation:bildRein .8s cubic-bezier(.22,1,.36,1) both}
@keyframes bildRein{from{opacity:0;transform:scale(.965)}}

/* Teilen-Knöpfe treten nacheinander auf. */
.teilen-r>*{animation:auftritt .5s cubic-bezier(.22,1,.36,1) both}
.teilen-r>*:nth-child(1){animation-delay:.44s}
.teilen-r>*:nth-child(2){animation-delay:.5s}
.teilen-r>*:nth-child(3){animation-delay:.56s}
.teilen-r>*:nth-child(4){animation-delay:.62s}
.teilen-r>*:nth-child(5){animation-delay:.68s}
/* Rückmeldung „Kopiert": kurz aufatmen statt nur Farbe wechseln. */
.tl.gemacht{animation:kopiert .5s cubic-bezier(.34,1.5,.64,1)}
@keyframes kopiert{40%{transform:translateY(-3px) scale(1.05)}}

/* ── Leihkorb ──────────────────────────────────────────────── */
.cart{max-width:660px;margin:0 auto}
.cart-i{display:flex;gap:15px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:13px;margin-bottom:11px}
.cart-i img{width:74px;height:74px;object-fit:cover;border-radius:9px;flex-shrink:0;
  background:var(--paper-2)}
.cart-i-b{flex:1;min-width:0}
.cart-i-n{font-weight:700;font-size:.99rem;letter-spacing:-.012em}
.cart-i-c{font-size:.85rem;color:var(--ink-soft);margin-top:2px}
.cart-rm{width:34px;height:34px;border-radius:50%;color:var(--ink-soft);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.cart-rm svg{width:17px;height:17px}
.cart-rm:hover{background:var(--paper-2);color:#a8433a}
.cart-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;margin-top:20px}
.cart-row{display:flex;align-items:flex-start;gap:12px;font-size:.94rem;color:var(--ink-mid)}
.cart-row svg{width:19px;height:19px;color:var(--green);flex-shrink:0;margin-top:2px}
.cart-row b{color:var(--ink);font-weight:600;display:block}
.btn-wa{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  background:var(--green);color:#fff;font-weight:700;font-size:1.02rem;padding:16px;
  border-radius:12px;margin-top:20px;transition:background .16s,transform .12s}
.btn-wa:hover{background:var(--green-deep)}
.btn-wa:active{transform:translateY(1px)}
.btn-wa svg{width:22px;height:22px}
.cart-hint{text-align:center;font-size:.85rem;color:var(--ink-soft);margin-top:11px}

/* ── Ablauf: die vier Schritte ─────────────────────────────────
   Alles laeuft EINMAL, wenn der Abschnitt in den Blick kommt, und bleibt
   dann stehen. Reihenfolge:
     0.2 der Goldfaden zieht sich von links nach rechts
     0.3 die Ringe schliessen sich, versetzt
     0.5 die Icons zeichnen sich, versetzt
     0.8 die Ziffern springen auf
     2.0 ein Goldpunkt laeuft den Weg ab und weckt jede Station im Vorbeigehen
   Kein Dauerloop: eine Seite, auf der staendig etwas zuckt, liest sich
   unruhig — und laesst jedes Geraet dauerhaft neu zeichnen. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.steps-faden{position:absolute;top:34px;left:12.5%;width:75%;height:22px;overflow:visible;
  z-index:0;pointer-events:none}
.steps-faden path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.faden-weg{stroke:var(--gold);stroke-width:2.4;opacity:.7;
  stroke-dasharray:1020;stroke-dashoffset:1020}
.steps.da .faden-weg{animation:faden-ziehen 1.25s .18s cubic-bezier(.45,0,.15,1) forwards}
@keyframes faden-ziehen{to{stroke-dashoffset:0}}

/* Der Laufpunkt: ein kurzer runder Strich, der ueber denselben Weg wandert */
.faden-punkt{stroke:var(--gold-deep);stroke-width:7;stroke-dasharray:0 1020;
  stroke-dashoffset:0;opacity:0}
.steps.da .faden-punkt{animation:punkt-laufen 2.5s 1.95s cubic-bezier(.4,0,.35,1) forwards}
@keyframes punkt-laufen{
  0%{opacity:0;stroke-dasharray:0 1020;stroke-dashoffset:0}
  8%{opacity:.85;stroke-dasharray:2 1020;stroke-dashoffset:0}
  88%{opacity:.85;stroke-dasharray:2 1020;stroke-dashoffset:-1020}
  100%{opacity:0;stroke-dasharray:2 1020;stroke-dashoffset:-1020}}

.step{text-align:center;position:relative;padding:0 6px;z-index:1}
.step-mk{position:relative;width:76px;height:76px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);border-radius:50%;box-shadow:var(--shadow);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
.step:hover .step-mk{transform:translateY(-3px)}
/* Jede Station hebt sich kurz, wenn der Laufpunkt sie erreicht */
.steps.da .step-mk{animation:station .75s cubic-bezier(.3,1.1,.4,1) 2.05s both}
@keyframes station{
  0%{transform:translateY(0)} 34%{transform:translateY(-6px)}
  100%{transform:translateY(0)}}

.step-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.step-ring circle{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:208;stroke-dashoffset:208;transform:rotate(-96deg);transform-origin:50% 50%}
.steps.da .step-ring circle{animation:strich-ziehen .8s cubic-bezier(.35,0,.2,1) forwards}
@keyframes strich-ziehen{to{stroke-dashoffset:0}}

/* Die Icons zeichnen sich selbst. Eine grosszuegige Strichlaenge fuer alle:
   die Pfade sind unterschiedlich lang, jeder ist am Ende trotzdem fertig. */
.step-ico{width:38px;height:38px;color:var(--ink);opacity:0}
.step-ico path,.step-ico circle{stroke-dasharray:200;stroke-dashoffset:200}
.steps.da .step-ico{animation:auftauchen .3s ease-out forwards}
.steps.da .step-ico path,.steps.da .step-ico circle{
  animation:strich-ziehen .95s cubic-bezier(.4,0,.3,1) forwards}
@keyframes auftauchen{to{opacity:1}}

.step-n{position:absolute;right:-2px;top:-1px;width:25px;height:25px;border-radius:50%;
  background:var(--gold);color:#3a2b05;font-weight:800;font-size:.83rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(29,35,24,.18);opacity:0;transform:scale(.4)}
.steps.da .step-n{animation:ziffer .45s cubic-bezier(.25,1.5,.4,1) forwards}
@keyframes ziffer{to{opacity:1;transform:scale(1)}}

/* Versatz je Station — der Reihe nach von links nach rechts */
.steps.da .step:nth-child(2) .step-ring circle{animation-delay:.30s}
.steps.da .step:nth-child(3) .step-ring circle{animation-delay:.44s}
.steps.da .step:nth-child(4) .step-ring circle{animation-delay:.58s}
.steps.da .step:nth-child(5) .step-ring circle{animation-delay:.72s}
.steps.da .step:nth-child(2) .step-ico,
.steps.da .step:nth-child(2) .step-ico path,
.steps.da .step:nth-child(2) .step-ico circle{animation-delay:.52s}
.steps.da .step:nth-child(3) .step-ico,
.steps.da .step:nth-child(3) .step-ico path,
.steps.da .step:nth-child(3) .step-ico circle{animation-delay:.68s}
.steps.da .step:nth-child(4) .step-ico,
.steps.da .step:nth-child(4) .step-ico path,
.steps.da .step:nth-child(4) .step-ico circle{animation-delay:.84s}
.steps.da .step:nth-child(5) .step-ico,
.steps.da .step:nth-child(5) .step-ico path,
.steps.da .step:nth-child(5) .step-ico circle{animation-delay:1s}
.steps.da .step:nth-child(2) .step-n{animation-delay:.82s}
.steps.da .step:nth-child(3) .step-n{animation-delay:.98s}
.steps.da .step:nth-child(4) .step-n{animation-delay:1.14s}
.steps.da .step:nth-child(5) .step-n{animation-delay:1.3s}
.steps.da .step:nth-child(3) .step-mk{animation-delay:2.72s}
.steps.da .step:nth-child(4) .step-mk{animation-delay:3.38s}
.steps.da .step:nth-child(5) .step-mk{animation-delay:4.04s}

.step h3{font-size:1.03rem;font-weight:700;margin-bottom:6px;letter-spacing:-.015em}
.step p{font-size:.9rem;color:var(--ink-mid);line-height:1.5}

.zettel{background:var(--card);border:1px solid var(--line-2);border-radius:3px;
  padding:30px 36px;max-width:560px;margin:44px auto 0;position:relative;
  box-shadow:var(--shadow-lift);transform:rotate(-.85deg);
  font-family:var(--hand);font-size:1.42rem;line-height:1.5;color:var(--ink)}
.zettel::before{content:'';position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:104px;height:27px;background:rgba(242,191,63,.42);border-radius:2px}
.zettel .hz{color:var(--green);font-size:1.6rem;line-height:1}
/* Der Zettel faellt an seinen Platz — sein Endzustand ist gedreht, deshalb
   braucht er eine eigene Regel und darf nicht auf .reveal zurueckfallen. */
.zettel.reveal{opacity:0;transform:rotate(-3.6deg) translateY(28px) scale(.975)}
.zettel.reveal.da{opacity:1;transform:rotate(-.85deg) translateY(0) scale(1);
  transition:opacity .45s ease-out,transform .85s cubic-bezier(.2,1.12,.35,1)}
.zettel.reveal::before{transform:translateX(-50%) rotate(-3deg) scaleX(.15);opacity:0}
.zettel.reveal.da::before{transform:translateX(-50%) rotate(-3deg) scaleX(1);opacity:1;
  transition:transform .5s .42s cubic-bezier(.3,1.5,.4,1),opacity .28s .42s}

/* ── Über uns ──────────────────────────────────────────────── */
/* ── Über uns ──────────────────────────────────────────────────
   Alles Wesentliche ohne Scrollen: These links, Beleg rechts.
   Das Foto ist Beweisstueck, nicht Plakat — deshalb begrenzt. */
.ab{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;
  min-height:min(660px,calc(100vh - 210px));padding:26px 0 30px}
.ab-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:20px}
.ab-eyebrow::before{content:'';width:26px;height:2px;background:var(--gold);border-radius:2px}
.ab h1{font-size:clamp(2.1rem,4.1vw,3.25rem);font-weight:800;line-height:1.06;
  letter-spacing:-.033em;margin-bottom:22px}
/* Zeilenweise aufdecken — die Zeilen schieben sich unter einer Kante hervor */
.zeile{display:block;overflow:hidden}
.zeile>span{display:block;transform:translateY(105%);
  animation:zeileHoch .78s cubic-bezier(.22,1,.36,1) both}
.zeile:nth-child(1)>span{animation-delay:.05s}
.zeile:nth-child(2)>span{animation-delay:.15s}
.zeile:nth-child(3)>span{animation-delay:.25s}
@keyframes zeileHoch{to{transform:none}}
.ab h1 em{font-style:normal;color:var(--green)}
.ab-p{font-size:1.06rem;color:var(--ink-mid);line-height:1.62;max-width:44ch;margin-bottom:14px;
  animation:auftritt .6s .42s cubic-bezier(.22,1,.36,1) both}
.ab-p:last-of-type{animation-delay:.5s}
.ab-cta{display:inline-flex;align-items:center;gap:10px;margin-top:14px;background:var(--green);
  color:#fff;font-weight:700;font-size:.98rem;padding:14px 26px;border-radius:12px;
  animation:auftritt .6s .58s cubic-bezier(.22,1,.36,1) both;
  transition:background .16s,transform .16s,box-shadow .2s}
.ab-cta svg{width:18px;height:18px;transition:transform .22s}
.ab-cta:hover{background:var(--green-deep);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(33,80,51,.26)}
.ab-cta:hover svg{transform:translateX(5px)}

/* Foto: organischer Rahmen, folgt leicht dem Zeiger */
.ab-fig{position:relative;perspective:1100px;margin:0;
  animation:auftritt .7s .2s cubic-bezier(.22,1,.36,1) both}
.ab-fig::before{content:'';position:absolute;z-index:0;left:-6%;right:10%;bottom:-5%;height:52%;
  background:var(--gold);opacity:.9;border-radius:52% 48% 42% 58%/58% 44% 56% 42%;
  animation:blobDrift 17s ease-in-out infinite}
.ab-pic{position:relative;z-index:1;display:block;overflow:hidden;
  border-radius:34% 66% 56% 44%/44% 38% 62% 56%;
  box-shadow:0 18px 46px rgba(29,35,24,.18);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-radius 1.2s ease}
.ab-fig:hover .ab-pic{border-radius:42% 58% 46% 54%/50% 44% 56% 50%;
  transition:transform .12s linear,border-radius 1.2s ease}
.ab-pic img{width:100%;height:auto;aspect-ratio:4/3.05;object-fit:cover;display:block;
  transform:scale(1.06);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.ab-fig:hover .ab-pic img{transform:scale(1.11)}
.ab-cap{position:absolute;z-index:2;right:-8px;bottom:-14px;max-width:17rem;
  background:var(--card);border:1px solid var(--line-2);border-radius:12px;
  padding:12px 16px;font-size:.85rem;line-height:1.45;color:var(--ink-mid);
  box-shadow:var(--shadow-lift);transform:rotate(-1.4deg)}
.ab-cap b{color:var(--ink);font-weight:700}
.ab-cap a{color:var(--green);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(47,106,69,.32);text-underline-offset:2px;
  transition:text-decoration-color .16s,color .16s}
.ab-cap a:hover{color:var(--green-deep);text-decoration-color:currentColor}

/* Zahlenzeile */
.ab-fakten{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  border-top:1px solid var(--line);padding:26px 0 4px}
.ab-f{text-align:center}
.ab-f b{display:block;font-size:1.62rem;font-weight:800;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.ab-f span{font-size:.87rem;color:var(--ink-mid)}

/* Werte */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.val{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;
  transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s,border-color .24s}
.val:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:transparent}
.val svg{width:34px;height:34px;color:var(--green);margin-bottom:13px;
  transition:transform .35s cubic-bezier(.34,1.4,.64,1)}
.val:hover svg{transform:scale(1.14) rotate(-7deg)}
.val h3{font-size:1.04rem;font-weight:700;margin-bottom:6px;letter-spacing:-.015em}
.val p{font-size:.93rem;color:var(--ink-mid);line-height:1.55}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.val svg{width:36px;height:36px;color:var(--green);margin-bottom:13px}
.val h3{font-size:1.06rem;font-weight:700;margin-bottom:6px;letter-spacing:-.015em}
.val p{font-size:.93rem;color:var(--ink-mid);line-height:1.55}
.prose{max-width:62ch}
.prose p{margin-bottom:15px;color:var(--ink-mid);font-size:1.03rem;line-height:1.65}
.prose p strong{color:var(--ink);font-weight:600}

/* ── Fuß ───────────────────────────────────────────────────────
   Schlank: eine Zeile Verweise statt drei Spalten. Der Schriftzug darunter
   ist Flaeche, kein Text — unten angeschnitten, damit die Seite nicht
   aufhoert, sondern ausläuft. Alles faehrt EINMAL auf, wenn der Fuss in den
   Blick kommt (.reveal setzt .da), danach steht es. */
.ft{background:var(--paper-2);margin-top:74px;padding:38px 0 clamp(16px,3.6vw,52px);
  border-top:1px solid var(--line-2);overflow:hidden}
.ft-top{display:flex;justify-content:space-between;align-items:center;
  gap:30px;flex-wrap:wrap;padding-bottom:24px}

.ft-marke{max-width:19.5em}
.ft-ab{font-size:.85rem;color:var(--ink-mid);margin-top:10px;line-height:1.55}

/* Verweise in einer Zeile, die umbrechen darf */
.ft-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-left:auto}
.ft-nav ul{list-style:none;display:flex;gap:15px;flex-wrap:wrap}
.ft-nav ul a{position:relative;font-size:.84rem;font-weight:500;color:var(--ink-mid);
  padding:3px 0;white-space:nowrap;transition:color .2s ease}
/* Goldstrich waechst von links — dasselbe Verhalten wie im Kopfmenue */
.ft-nav ul a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--gold);border-radius:2px;transition:right .26s cubic-bezier(.22,1,.36,1)}
.ft-nav ul a:hover{color:var(--ink)}
.ft-nav ul a:hover::after{right:0}

.ft-wa{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;
  font-weight:700;font-size:.84rem;padding:9px 17px;border-radius:30px;white-space:nowrap;
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .25s ease,background .18s}
.ft-wa svg{width:17px;height:17px}
.ft-wa:hover{background:var(--green-deep);transform:translateY(-2px);
  box-shadow:0 9px 22px rgba(33,80,51,.28)}
.ft-wa:active{transform:translateY(0)}

/* Der grosse Schriftzug: Flaeche, kein Text zum Lesen — der Name steht
   darueber schon lesbar. clamp haelt ihn auf jeder Breite randfuellend,
   space-between verteilt die Buchstaben bis in beide Ecken.
   ⚠️ NICHT anschneiden. Ein Schnitt knapp unter der Grundlinie rasiert die
   Rundungen von e, m, c und o — das liest sich als Fehler, nicht als Absicht.

   Jeder Buchstabe sitzt in einer eigenen Maske: span kappt, i faehrt hoch.
   Die Maske reicht per padding .22em unter die Grundlinie, damit die
   Unterlaenge des g im Ruhezustand vollstaendig sichtbar bleibt; das
   negative margin nimmt den Platz wieder aus dem Umbruch. */
.ft-wort{display:flex;justify-content:space-between;align-items:flex-end;
  margin:0 -.02em;font-weight:800;letter-spacing:-.055em;line-height:1;
  font-size:clamp(2.9rem,13.1vw,11.2rem);color:var(--ink);opacity:.1;
  user-select:none;transition:opacity .5s ease}
.ft:hover .ft-wort{opacity:.14}
.ft-wort span{display:block;overflow:hidden;line-height:1;
  padding:.1em 0 .22em;margin:-.1em 0 -.22em;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.ft-wort i{display:block;font-style:normal;transform:translateY(136%);
  transition:color .28s ease}
.ft.da .ft-wort i{animation:wort-auf .95s cubic-bezier(.19,1,.28,1) forwards}
@keyframes wort-auf{to{transform:translateY(0)}}
/* Buchstabe fuer Buchstabe, von links */
.ft.da .ft-wort span:nth-child(1) i{animation-delay:.30s}
.ft.da .ft-wort span:nth-child(2) i{animation-delay:.35s}
.ft.da .ft-wort span:nth-child(3) i{animation-delay:.40s}
.ft.da .ft-wort span:nth-child(4) i{animation-delay:.45s}
.ft.da .ft-wort span:nth-child(5) i{animation-delay:.50s}
.ft.da .ft-wort span:nth-child(6) i{animation-delay:.55s}
.ft.da .ft-wort span:nth-child(7) i{animation-delay:.60s}
.ft.da .ft-wort span:nth-child(8) i{animation-delay:.65s}
.ft.da .ft-wort span:nth-child(9) i{animation-delay:.70s}
.ft.da .ft-wort span:nth-child(10) i{animation-delay:.75s}
.ft.da .ft-wort span:nth-child(11) i{animation-delay:.80s}
.ft.da .ft-wort span:nth-child(12) i{animation-delay:.85s}
/* Beim Zeigen hebt sich der Buchstabe unter dem Zeiger */
.ft-wort span:hover{transform:translateY(-.055em)}
.ft-wort span:hover i{color:var(--green)}

/* Auftritt der oberen Zeile: Marke, dann die Verweise nacheinander */
.ft .ft-marke,.ft-nav ul li,.ft-wa{opacity:0;transform:translateY(14px)}
.ft.da .ft-marke,.ft.da .ft-nav ul li,.ft.da .ft-wa{
  animation:ft-auf .6s cubic-bezier(.22,1,.36,1) forwards}
@keyframes ft-auf{to{opacity:1;transform:none}}
.ft.da .ft-nav ul li:nth-child(1){animation-delay:.10s}
.ft.da .ft-nav ul li:nth-child(2){animation-delay:.15s}
.ft.da .ft-nav ul li:nth-child(3){animation-delay:.20s}
.ft.da .ft-nav ul li:nth-child(4){animation-delay:.25s}
.ft.da .ft-nav ul li:nth-child(5){animation-delay:.30s}
.ft.da .ft-nav ul li:nth-child(6){animation-delay:.35s}
.ft.da .ft-wa{animation-delay:.42s}

/* ── Mitlaufende Leiste auf der Artikelseite (nur Handy) ───────
   „Ausborgen" steht mobil erst nach dem Bild. Wer weiter unten liest, muss
   sonst wieder hochscrollen, um es in den Leihkorb zu legen. Die Leiste
   erscheint erst, wenn die Knoepfe oben aus dem Blick sind — vorher waere
   sie doppelt und wuerde nur Platz kosten. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:85;display:none;
  align-items:center;gap:10px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));
  background:rgba(249,245,234,.95);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(29,35,24,.08);
  transform:translateY(115%);
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.dock.an{transform:none}
/* Beim Schreiben eines Beitrags aus dem Weg — die Tastatur schiebt das
   Eingabefeld sonst genau unter die Leiste. */
.dock.weg{transform:translateY(115%)}
.dock .btn-add{flex:1;background:var(--gold);color:var(--ink);font-weight:700;
  font-size:1rem;padding:14px 20px;border-radius:11px;text-align:center;
  transition:background .16s,transform .12s}
.dock .btn-add:hover{background:var(--gold-deep)}
.dock .btn-add:active{transform:translateY(1px)}
.dock-wa{display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:50px;height:50px;border-radius:11px;background:var(--green);color:#fff;
  transition:background .16s}
.dock-wa svg{width:22px;height:22px}
.dock-wa:hover{background:var(--green-deep)}

/* ── Korb-Knopf mobil ──────────────────────────────────────── */
.fab{position:fixed;right:18px;bottom:18px;z-index:80;display:none;align-items:center;gap:9px;
  background:var(--green);color:#fff;font-weight:700;font-size:.92rem;padding:14px 21px;
  border-radius:30px;box-shadow:0 6px 22px rgba(33,80,51,.34)}
.fab svg{width:19px;height:19px}
.fab.on{display:flex}

/* ── Meldung ───────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,80px);z-index:120;
  background:var(--ink);color:var(--paper);font-size:.92rem;font-weight:500;
  padding:13px 22px;border-radius:11px;box-shadow:var(--shadow-lift);
  opacity:0;transition:transform .3s cubic-bezier(.3,1.3,.6,1),opacity .25s;pointer-events:none}
.toast.on{transform:translate(-50%,0);opacity:1}

/* ── Schmal ────────────────────────────────────────────────── */
@media(max-width:1400px){
  /* Der Pendelausschlag macht den Kasten kurzzeitig ~40 px breiter.
     Weil die Bildspalte mit dem Fenster schrumpft, ein Prozentwert aber
     mitschrumpft, ist der Abstand hier in Stufen gesetzt statt einmal
     prozentual — sonst wird das Schild beim Hereinschwingen angeschnitten. */
  .schild{right:7%;bottom:5%}
}
/* Ab hier wird die Kopfzeile zu eng für Menü + Suche nebeneinander: die Suche
   rutscht in eine eigene Zeile darunter und bleibt damit trotzdem immer
   sichtbar — genau das ist ihr Zweck. */
@media(max-width:1240px){
  .hd-in{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px;row-gap:11px}
  .sb{order:9;flex:1 0 100%;max-width:none;margin-left:0}
  .sb-pop{min-width:0}
}
/* Ohne Tastatur ist der Hinweis auf die Taste „/" nur Zierat. */
@media(hover:none){.sb-k{display:none}}

@media(max-width:1180px){
  /* waehrend des Pendelns wird der Kasten ~40 px breiter — Luft lassen */
  .schild{right:9%;bottom:5%}
  .schild-in{padding:18px 26px 20px}
  .schild-t{font-size:1.4rem}
}
@media(max-width:960px){
  .hero-in{grid-template-columns:1fr;gap:38px}
  /* ⚠️ width:100% ist Pflicht. Ein Rasterelement mit margin-inline:auto wird
     zum Schrumpf-Element und misst seine Kinder — die sind hier alle absolut
     positioniert, macht Breite 0. Ergebnis: das Hero-Foto fehlte unter 960 px
     komplett und die schwebenden Kaertchen rutschten unter die Kopfzeile. */
  .hero-vis{order:-1;max-width:520px;margin:0 auto;width:100%}
    .det{grid-template-columns:1fr;gap:28px}
  /* Der Zweispalter des Mehr-Teils faellt zusammen; die Rasterzuweisungen
     muessen mit zurueckgenommen werden, sonst bleiben Luecken stehen. */
  .mehr,.mehr-ohne{grid-template-columns:1fr;gap:30px}
  .mehr .zweck,.mehr .wissen,.mehr .daten,.mehr .eignung,.mehr .passt{
    grid-column:auto;grid-row:auto;position:static}
  .ft-top{gap:30px}
  .ft-nav{width:100%}
  .hz-row{grid-template-columns:repeat(2,1fr);row-gap:22px;column-gap:14px}
  .hz-i{border-left:none;padding:0}
    .vals{grid-template-columns:1fr;gap:14px}
  .ab{grid-template-columns:1fr;gap:34px;min-height:0;padding:24px 0 26px}
  .ab-fig{order:-1;max-width:520px;margin:0 auto 12px}
  .ab-cap{right:0;bottom:-20px;max-width:15rem}
  .ab-p{max-width:none}
  .ab-fakten{grid-template-columns:repeat(2,1fr);gap:20px 12px;padding-top:22px}
  /* Zwischen 720 und 980 stehen Hauptmenue UND alle Knopfbeschriftungen —
     mit dem Abmelden-Knopf lief die Kopfzeile ueber. Merkliste, Leihkorb und
     Abmelden werden hier zu reinen Symbolen; Name und Sterne bleiben. */
  .act:not(.act-kt) .act-l{display:none}
  .act:not(.act-kt){padding:8px 9px}
  .nav{gap:20px}
  .steps{grid-template-columns:repeat(2,1fr);gap:30px}
  /* Im Zweispalter verbaende der Faden nur Schritt 1 mit 2 und liefe dann
     ins Leere — im Raster ergibt er keinen Weg mehr. */
  .steps-faden{display:none}

}
/* Ab hier passt Hauptmenue + Konto nicht mehr nebeneinander: das Menue
   wandert in den Klappknopf, Name und Sterne bleiben sichtbar. Ohne diesen
   eigenen Umbruchpunkt lief die Kopfzeile zwischen 720 und 900 ueber, sobald
   jemand angemeldet war. */
@media(max-width:900px){
  .nav{display:none}
  .bt{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
    border-radius:10px;color:var(--ink-mid);margin-left:auto}
  .bt svg{width:22px;height:22px}
  .hd-act{margin-left:0;gap:0}
  .brand-cl{display:none}
}

@media(max-width:720px){
  .nur-breit{display:none}
  .zweck-g{grid-template-columns:1fr}
  .eig{grid-template-columns:1fr}
  /* Fünf Teilen-Knöpfe nebeneinander sprengen die Zeile — hier zaehlt nur
     das Symbol, die Beschriftung faellt weg. */
  .tl span{display:none}
  .tl{padding:11px 13px}
  .tl-nativ span{display:inline}
  /* Karten nach innen, sonst schneidet der Bildschirmrand sie ab */
  .karte-a{left:2%;bottom:6%}
  /* Schild nach innen und kleiner, sonst schneidet der Rand es ab */
  .schild{right:3%;bottom:5%}
  .schild-in{padding:13px 18px 15px;border-radius:9px}
  .schild-t{font-size:1.14rem}
  .niete{width:5px;height:5px}
  .niete-l{left:9px;bottom:9px}
  .niete-r{right:9px;top:9px}
    .karte{padding:10px 13px 9px;border-radius:13px}
  .karte b{font-size:1.42rem}
  .karte i{font-size:.73rem}
  .hero{padding:30px 0 34px}
  .nav{display:none}
  .bt{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
    border-radius:10px;color:var(--ink-mid);margin-left:auto}
  .bt svg{width:22px;height:22px}
  .hd-act{margin-left:0;gap:0}
  .act-l{display:none}
  .act{padding:8px}
  /* Die Leiste gibt es nur auf dem Handy — am Schreibtisch stehen die
     Knoepfe ohnehin dauerhaft neben dem Bild. */
  .dock{display:flex}
  /* Platz, damit die Leiste den Fuss nicht verdeckt. */
  body[data-page="ding"]{padding-bottom:84px}
  /* Der Leihkorb-Knopf muss ueber die Leiste, sonst liegen sie uebereinander. */
  body[data-page="ding"] .fab{bottom:94px}
  /* Die Bestaetigung ebenso — sie erschien sonst hinter der Leiste. */
  body[data-page="ding"] .toast{bottom:150px}
  /* ⚠️ Kein festes height: die Suche liegt hier in einer zweiten Zeile und
     wuerde sonst abgeschnitten. Die alte 64-px-Regel stammt aus der Zeit
     vor der Suchleiste und hat sie auf dem Handy gekappt. */
  .hd-in{height:auto;gap:10px;padding-top:10px;padding-bottom:10px;row-gap:9px}
  .sb-f{height:40px}
  .brand-cl{display:none}
  .brand-mk{width:36px;height:36px}
  .brand-nm{font-size:1.16rem}
  .wrap{padding:0 16px}
  .hero-zahlen::before{left:-16px;right:-16px}
  .hero{padding:34px 0 44px}
  .sec{padding:46px 0}
  .find{flex-direction:column;max-width:none}
  .btn-go{padding:14px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(154px,1fr));gap:13px}
  .cats{grid-template-columns:repeat(2,1fr);gap:11px}
  .cat{padding:20px 13px 17px}
  .cat-d{display:none}
  .thing-b{padding:12px 13px 13px}
  .thing-n{font-size:.91rem}
  .hz-row{gap:18px 10px}
  .hz-i b{font-size:1.32rem}
  .ft{padding-top:38px}
  .ft-top{flex-direction:column;gap:24px;padding-bottom:26px}
  .ft-nav{flex-direction:column;align-items:flex-start;gap:18px}
  .ft-nav ul{flex-direction:column;gap:13px}
  .zettel{font-size:1.26rem;padding:26px 24px}
  .note{flex-direction:column;text-align:center;gap:10px;padding:22px}
  .det-a{flex-direction:column}
  .det-a .btn-big,.det-a .btn-gh{width:100%;text-align:center;justify-content:center}
}

/* ── Aufklappmenü mobil ────────────────────────────────────── */
.mnav{display:none;border-top:1px solid var(--line-2);background:var(--paper);
  padding:10px 0 16px}
.mnav.on{display:block}
.mnav a{display:block;padding:12px 22px;font-size:1rem;font-weight:600;color:var(--ink-mid)}
.mnav a:hover{color:var(--green);background:var(--paper-2)}

/* ── Abschnitte beim Scrollen einblenden ───────────────────── */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.reveal.da{opacity:1;transform:none}
.reveal-g>*{opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.reveal-g.da>*{opacity:1;transform:none}
.reveal-g.da>*:nth-child(1){transition-delay:.02s}
.reveal-g.da>*:nth-child(2){transition-delay:.07s}
.reveal-g.da>*:nth-child(3){transition-delay:.12s}
.reveal-g.da>*:nth-child(4){transition-delay:.17s}
.reveal-g.da>*:nth-child(5){transition-delay:.22s}
.reveal-g.da>*:nth-child(6){transition-delay:.27s}
.reveal-g.da>*:nth-child(7){transition-delay:.32s}
.reveal-g.da>*:nth-child(8){transition-delay:.37s}

/* Wer keine Bewegung will, bekommt keine — und sieht trotzdem alles. */
/* Wer keine Bewegung will, bekommt keine — und sieht trotzdem alles.
   Jedes Element, das seinen sichtbaren Zustand erst per Animation erreicht,
   muss hier seinen Endzustand gesetzt bekommen. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .thing:hover,.cat:hover{transform:none}
  .reveal,.reveal-g>*{opacity:1;transform:none}
  .hero h1,.hero-sub,.find,.chips,.hero-fakten,.hv-foto,.karte{
    opacity:1;transform:none;clip-path:none}
  .karte-a{transform:rotate(-2.4deg)}
    .unterstrich path{stroke-dashoffset:0}   /* sonst ist der Strich gar nicht da */
  .schild{opacity:1;transform:rotate(-2.6deg)}
  .schild-w,.schild-in,.schild-t b{transform:none;rotate:0deg}
  .wb{animation:none;opacity:0;transform:none}
  .wb1{opacity:1}
  .ab-fig,.ab-p,.ab-cta,.zeile>span{opacity:1;transform:none}
  .steps-faden path,.step-ring circle,.step-ico path,.step-ico circle{stroke-dashoffset:0}
  .faden-punkt{opacity:0}
  .step-mk{transform:none}
  .ft .ft-marke,.ft-nav ul li,.ft-wa{opacity:1;transform:none}
  .ft-wort i{transform:none}
  .step-ico,.step-n{opacity:1;transform:none}
  .cat-ico path,.cat-ico circle{stroke-dashoffset:0}
  .ortkarte-pin{animation:none}
  /* Der Goldstrich der Abschnitte steht sonst auf scaleX(0) und fehlt ganz. */
  .mehr-strich{transform:scaleX(1)}
  .zw:hover{transform:none}
  /* Alles, was seinen sichtbaren Zustand erst per Übergang erreicht, braucht
     ihn hier ausdrücklich — reveal() setzt .da zwar sofort, aber darauf soll
     sich die Darstellung nicht verlassen müssen. */
  .mehr-i{transform:none;opacity:1}
  .mehr-i svg path,.mehr-i svg circle{stroke-dashoffset:0}
  .wissen-l{transform:rotate(-.4deg);opacity:1}
  .wissen-l::before{transform:translateX(-50%) rotate(-2.4deg) scaleX(1);opacity:1}
  .dat dd{transform:none;opacity:1}
  .fq-in{grid-template-rows:1fr}
  .step-n{transform:scale(1)}
  .zettel.reveal{opacity:1;transform:rotate(-.85deg)}
  .zettel.reveal::before{transform:translateX(-50%) rotate(-3deg);opacity:1}
}

/* ── Konto und Kommentare ──────────────────────────────────────
   Angemeldet wird ueber Clerk, alles Eigene liegt im Umfrage-Dienst.
   ⚠️ Clerk kann fehlen (Netz, Werbeblocker). Jeder Block hier startet
   deshalb versteckt und wird erst eingeblendet, wenn der Zustand feststeht —
   nie umgekehrt, sonst blitzt „Anmelden" bei Angemeldeten kurz auf. */

/* Knopf im Kopf */
.act-kt .kt-av{display:flex;align-items:center;justify-content:center;
  width:21px;height:21px;border-radius:50%;overflow:hidden}
.act-kt .kt-av svg{width:21px;height:21px}
.act-kt .kt-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.act-kt.an .kt-av{box-shadow:0 0 0 2px var(--gold)}
/* Abmelden steht nur da, wenn jemand angemeldet ist — konto.js blendet ein.
   ⚠️ Gemessen: mit Suchleiste, Name und Sternen war die Kopfzeile im
   angemeldeten Zustand 1302 px breit bei 1240 px Platz — der Knopf lief
   rechts aus dem Bild. Die Beschriftung kostet genau diese 62 px; Symbol,
   title und aria-label bleiben, verstanden wird er trotzdem. */
.act-aus .act-l{display:none}
.act-aus{color:var(--ink-soft)}
.act-aus:hover{color:#a3402f;background:var(--paper-2)}
.act-aus svg{width:21px;height:21px}

/* Sterne vom Verein. Nur vorhandene werden gezeichnet — eine Reihe leerer
   Sterne saehe nach schlechter Bewertung aus, und bewertet wird hier niemand. */
.sterne{display:inline-flex;align-items:center;gap:1px;vertical-align:middle}
.sterne svg{width:15px;height:15px;fill:var(--gold);stroke:none;display:block}
.sterne-k svg{width:12px;height:12px}
.act-kt .act-l .sterne-k{margin-left:3px}
.act-kt .act-l .sterne-k svg{width:9px;height:9px}
.kt-sterne-t{font-size:.86rem;color:var(--ink-soft)}

/* ── Kommentare unter einem Ding ─────────────────────────── */
.komm{max-width:760px}
.komm-neu{display:flex;gap:14px;align-items:flex-start;margin-bottom:30px}
.komm-av{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;
  background:var(--paper-2)}
.komm-av-leer{display:flex;align-items:center;justify-content:center;
  font-weight:800;color:var(--ink-soft);font-size:1.05rem;overflow:hidden}
.komm-av-leer img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.komm-feld{flex:1;min-width:0}
.komm-feld textarea{width:100%;resize:vertical;min-height:84px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--card);
  padding:13px 15px;font:inherit;font-size:.96rem;color:var(--ink);
  transition:border-color .18s,box-shadow .28s cubic-bezier(.22,1,.36,1)}
.komm-feld textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 4px rgba(47,106,69,.14)}
.komm-fuss{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-top:10px}
.komm-zaehler{font-size:.8rem;color:var(--ink-soft)}
.komm-fehler{margin-top:9px;font-size:.88rem;color:#a3402f;background:#fbeeea;
  border:1px solid #efd3cb;border-radius:9px;padding:9px 13px}
.komm-fuss .btn-go{padding:11px 22px;font-size:.92rem}

.komm-anmelden{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r);padding:20px 24px;margin-bottom:30px}
.komm-anmelden p{color:var(--ink-mid);font-size:.95rem;margin:0}
.komm-anmelden .btn-go{padding:11px 22px;font-size:.92rem;flex-shrink:0}

.komm-liste{display:flex;flex-direction:column;gap:22px}
.komm-e{display:flex;gap:14px;align-items:flex-start}
.komm-b{flex:1;min-width:0}
.komm-kopf{display:flex;align-items:center;gap:9px;margin-bottom:3px;flex-wrap:wrap}
.komm-kopf b{font-size:.95rem;font-weight:700}
.komm-kopf time{font-size:.8rem;color:var(--ink-soft)}
.komm-weg{margin-left:auto;color:var(--ink-soft);padding:3px;border-radius:7px;
  opacity:0;transition:opacity .2s,color .2s,background .2s}
.komm-weg svg{width:16px;height:16px;display:block}
.komm-e:hover .komm-weg,.komm-weg:focus-visible{opacity:1}
.komm-weg:hover{color:#a3402f;background:var(--paper-2)}
.komm-b p{font-size:.96rem;color:var(--ink-mid);line-height:1.6;
  overflow-wrap:anywhere}
.komm-leer{color:var(--ink-soft);font-size:.94rem}

/* ── Kontoseite ──────────────────────────────────────────── */
.kt-gast-in{background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r);padding:34px 36px;max-width:620px;box-shadow:var(--shadow)}
.kt-gast-in h2{font-size:1.35rem;font-weight:800;letter-spacing:-.025em;margin-bottom:16px}
.kt-vorteile{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.kt-vorteile li{position:relative;padding-left:26px;color:var(--ink-mid);font-size:.96rem;
  line-height:1.55}
.kt-vorteile li::before{content:'';position:absolute;left:2px;top:.6em;width:9px;height:9px;
  border-radius:50%;background:var(--gold)}
.kt-vorteile strong{color:var(--ink);font-weight:700}
.kt-gross{padding:14px 28px;font-size:.98rem}
.kt-klein{font-size:.85rem;color:var(--ink-soft);margin-top:14px;line-height:1.55}

.kt-reiter{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:28px;
  overflow-x:auto}
.kt-reiter-k{position:relative;padding:11px 18px;font-size:.94rem;font-weight:600;
  color:var(--ink-soft);white-space:nowrap;transition:color .2s}
.kt-reiter-k::after{content:'';position:absolute;left:12px;right:100%;bottom:-1px;height:2px;
  background:var(--gold);border-radius:2px;transition:right .26s cubic-bezier(.22,1,.36,1)}
.kt-reiter-k:hover{color:var(--ink-mid)}
.kt-reiter-k.da{color:var(--ink)}
.kt-reiter-k.da::after{right:12px}

.kt-blatt{display:none}
.kt-blatt.da{display:block}
.kt-blatt h2{font-size:1.2rem;font-weight:800;letter-spacing:-.02em;margin-bottom:16px}
.kt-kopf{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:18px}
.kt-kopf h2{margin-bottom:0}

.kt-liste{list-style:none;display:flex;flex-direction:column;gap:12px}
.kt-zeile{display:flex;align-items:center;gap:16px;background:var(--card);
  border:1px solid var(--line-2);border-radius:12px;padding:12px 16px;
  transition:border-color .2s,transform .25s cubic-bezier(.22,1,.36,1)}
.kt-zeile:hover{border-color:var(--line);transform:translateY(-1px)}
.kt-zeile img{width:62px;height:62px;border-radius:9px;object-fit:cover;flex-shrink:0;
  background:var(--paper-2)}
.kt-z-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.kt-z-b b{font-size:.97rem;font-weight:700}
.kt-z-b a:hover b{color:var(--green)}
.kt-z-b span{font-size:.83rem;color:var(--ink-soft)}
.kt-nochmal{flex-shrink:0;padding:9px 16px;font-size:.88rem}
.kt-abmelden{margin-top:26px}
.kt-h{font-size:1rem;font-weight:700;margin:34px 0 6px}
.kt-bild h3{font-size:1rem;font-weight:700;margin-bottom:5px}
.kt-bild p{font-size:.88rem;color:var(--ink-soft);margin-bottom:14px}
.kt-bild-w{display:flex;gap:14px;flex-wrap:wrap}
.kt-bild-k{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 16px;border:2px solid var(--line-2);border-radius:14px;
  background:var(--card);transition:border-color .2s,transform .25s cubic-bezier(.22,1,.36,1)}
.kt-bild-k img{width:64px;height:64px;border-radius:50%;object-fit:cover;
  background:var(--paper-2)}
.kt-bild-k span{font-size:.83rem;font-weight:600;color:var(--ink-mid)}
.kt-bild-k:hover{border-color:var(--line);transform:translateY(-2px)}
.kt-bild-k.da{border-color:var(--gold)}
.kt-bild-k.da span{color:var(--ink)}
.kt-weg{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.kt-weg h3{font-size:1rem;font-weight:700;margin-bottom:7px}
.kt-weg p{font-size:.88rem;color:var(--ink-soft);line-height:1.55;max-width:44em}
.kt-weg-k{margin-top:15px;font-size:.88rem;font-weight:600;color:#a3402f;
  border:1.5px solid #e4c6bf;background:var(--card);border-radius:10px;
  padding:10px 18px;transition:background .18s,border-color .18s}
.kt-weg-k:hover{background:#fbeeea;border-color:#d6a99f}
.kt-weg-k:disabled{opacity:.5;cursor:default}
.kt-weg-f{margin-top:11px;color:#a3402f;font-size:.88rem}
#ktProfilFeld{margin-top:18px}
#ktProfilFeld .cl-rootBox,#ktProfilFeld .cl-card{width:100%;box-shadow:none}

@media(max-width:720px){
  .komm-anmelden{flex-direction:column;align-items:flex-start}
  .kt-gast-in{padding:26px 22px}
  .kt-zeile{flex-wrap:wrap}
  .kt-nochmal{width:100%;text-align:center}
}

/* ── Standort und Karte ────────────────────────────────────────
   Die Karte laedt erst auf Knopfdruck (siehe karte() in leihmich.js). Das
   Vorschaufeld ist deshalb selbst gezeichnet — ein gerastertes Papierfeld mit
   Nadel, kein Bild von Google. */
.ort{background:var(--paper-2)}
.ort-g{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.ort-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--green);margin-bottom:13px}
.ort-eyebrow svg{width:16px;height:16px}
.ort-t h2{font-size:clamp(1.6rem,2.7vw,2.1rem);font-weight:800;letter-spacing:-.028em;
  margin-bottom:16px}
.ort-adr{font-style:normal;font-size:1.02rem;line-height:1.65;color:var(--ink-mid);
  padding-left:15px;border-left:2.5px solid var(--gold);margin-bottom:16px}
.ort-adr b{display:block;color:var(--ink);font-weight:700}
.ort-p{font-size:.95rem;color:var(--ink-mid);line-height:1.65;margin-bottom:22px;max-width:38em}
.ort-a{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.ort-a .btn-go{padding:13px 24px;font-size:.94rem}
.ort-a .btn-gh{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;font-size:.92rem}
.ort-a .btn-gh svg{width:18px;height:18px}

.ortkarte{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-2);box-shadow:var(--shadow);background:var(--card)}
.ortkarte iframe{display:block;width:100%;height:100%;border:0}
.ortkarte-vor{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:26px;text-align:center}
/* gerastertes Feld: erinnert an eine Karte, ohne eine zu laden */
.ortkarte-netz{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:38px 38px}
.ortkarte-pin{position:relative;color:var(--green);animation:pin-wippen 2.8s ease-in-out infinite}
.ortkarte-pin svg{width:44px;height:44px}
@keyframes pin-wippen{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.ortkarte-k{position:relative;background:var(--card);border:1.5px solid var(--line);
  border-radius:11px;padding:11px 20px;font-size:.93rem;font-weight:600;color:var(--ink);
  box-shadow:var(--shadow);transition:transform .22s cubic-bezier(.34,1.4,.64,1),
    border-color .18s,box-shadow .25s}
.ortkarte-k:hover{transform:translateY(-2px);border-color:var(--green);box-shadow:var(--shadow-lift)}
.ortkarte-h{position:relative;font-size:.79rem;color:var(--ink-soft);max-width:26em;line-height:1.5}

/* ── Häufige Fragen ────────────────────────────────────────── */
.fqs{display:flex;flex-direction:column;gap:10px;max-width:62em}
.fq{background:var(--card);border:1px solid var(--line-2);border-radius:13px;
  transition:border-color .22s,box-shadow .28s}
.fq[open]{border-color:var(--line);box-shadow:var(--shadow)}
.fq summary{display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:17px 22px;font-size:1rem;font-weight:700;letter-spacing:-.012em}
.fq summary::-webkit-details-marker{display:none}
.fq summary:hover{color:var(--green)}
.fq summary span{flex:1}
.fq-pf{width:20px;height:20px;flex-shrink:0;color:var(--ink-soft);
  transition:transform .3s cubic-bezier(.22,1,.36,1),color .2s}
.fq[open] .fq-pf{transform:rotate(180deg);color:var(--green)}
/* 0fr -> 1fr laesst sich weich bewegen, max-height mit Rateweret nicht */
.fq-in{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .34s cubic-bezier(.22,1,.36,1)}
.fq[open] .fq-in{grid-template-rows:1fr}
.fq-in>div{overflow:hidden}
.fq-in p{padding:0 22px 19px;font-size:.96rem;color:var(--ink-mid);line-height:1.68;
  max-width:60ch}

.ab-mehr{margin-top:30px;color:var(--ink-mid);font-size:.97rem}
.ab-mehr a{color:var(--green);font-weight:600}

@media(max-width:900px){
  .ort-g{grid-template-columns:1fr;gap:30px}
  .ortkarte{aspect-ratio:16/11}
}

/* ── Rechtstexte ───────────────────────────────────────────── */
.prose h2{font-size:1.08rem;font-weight:700;letter-spacing:-.015em;
  margin:30px 0 9px;color:var(--ink)}
.prose h2:first-of-type{margin-top:22px}
.prose p,.prose li{font-size:.96rem;color:var(--ink-mid);line-height:1.68;max-width:68ch}
.prose p{margin-bottom:11px}
.prose ul{list-style:none;margin:4px 0 14px}
.prose li{position:relative;padding-left:22px;margin-bottom:7px}
.prose li::before{content:'';position:absolute;left:2px;top:.72em;width:7px;height:7px;
  border-radius:50%;background:var(--gold)}
.prose a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--green-deep)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.87em;
  background:var(--paper-2);padding:1px 5px;border-radius:4px}
.rt-vor{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);
  padding:20px 24px;margin-bottom:8px!important;max-width:68ch}
.rt-fuss{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.87rem;color:var(--ink-soft)}

/* ── Bildnachweis ──────────────────────────────────────────── */
.nachweis{width:100%;border-collapse:collapse;font-size:.88rem}
.nachweis th{text-align:left;font-size:.73rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-soft);font-weight:700;
  padding:0 14px 9px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.nachweis td{padding:9px 14px 9px 0;border-bottom:1px solid var(--line-2);
  vertical-align:top;color:var(--ink-mid)}
.nachweis td:first-child{font-weight:600;color:var(--ink)}
.nachweis a{color:var(--green);text-decoration:underline;
  text-decoration-color:rgba(47,106,69,.3);text-underline-offset:2px}
.nachweis tbody tr:hover{background:var(--card)}