:root{
    --night:#0B0B09;
    --coal:#151412;
    --coal-2:#1D1B18;
    --bone:#F3F1EC;
    --fog:#9C958A;
    --jade:#C9B99B;
    --jade-hi:#DBCCAE;
    --ember:#E39A4B;
    --line:rgba(243,241,236,.12);
    --line-jade:rgba(201,185,155,.34);
    --ui:ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
    --pad:clamp(28px,6.5vw,72px);
    --logo:url("data:image/png;base64,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");
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%}
  body{margin:0; overflow-x:clip; background:var(--night); color:var(--bone); font-family:var(--ui); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
  a{color:inherit}
  button{font:inherit; cursor:pointer}
  :focus-visible{outline:2px solid var(--jade); outline-offset:3px}
  .wrap{max-width:1180px; margin:0 auto;
    padding-left:max(var(--pad), env(safe-area-inset-left));
    padding-right:max(var(--pad), env(safe-area-inset-right))}
  .mono{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase}
  h1,h2,h3{font-weight:800; letter-spacing:-.035em; text-transform:uppercase; margin:0}

  /* ---------- Logo (weiß auf transparent, lebt vom Negativraum) ---------- */
  .logo-mark{background-image:var(--logo); background-size:contain; background-position:center; background-repeat:no-repeat; display:block; flex:none}
  .logo-head{width:30px; height:30px}
  .pass-logo{width:26px; height:26px}
  /* Der Panda schaut von rechts in den Raum — rund ein Viertel bleibt außerhalb.
     Der Kontrast kommt über Schlagschatten direkt am Umriss: Sie dunkeln den
     Rauch rund um die weißen Flächen ab, ohne das Logo selbst zu überdecken. */
  .hero-peek{
    position:absolute; right:0; top:50%;
    transform:translate(24%,-50%);
    height:min(84%,760px); aspect-ratio:1;
    pointer-events:none;
    filter:drop-shadow(0 0 26px rgba(11,11,9,.95)) drop-shadow(0 0 70px rgba(11,11,9,.75));
  }
  @media(max-width:900px){
    .hero{min-height:0; display:block}
    .hero-peek{height:auto; width:76vw; top:-4vw; transform:translate(24%,0)}
    .hero-in{padding-top:62vw}
  }

  /* ---------- Kopf & Navigation ---------- */
  header{position:sticky; top:0; z-index:40; background:rgba(10,12,11,.88); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
  /* Der Weichzeichner wird bei jedem Bildaufbau neu berechnet. Auf
     langen Seiten bremst das am Handy merklich — dort deckend. */
  @media(max-width:900px){
    header{background:var(--night); backdrop-filter:none}
  }
  .bar{display:flex; align-items:center; gap:22px; height:78px}
  .logo{display:flex; align-items:center; gap:11px; text-decoration:none; font-weight:700; letter-spacing:.2em; font-size:1.02rem}
  .nav{display:flex; align-items:center; gap:22px; margin-left:auto}
  .nav-link{font-family:var(--mono); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fog);
    text-decoration:none; background:none; border:none; padding:6px 0; border-bottom:1px solid transparent; transition:.2s; white-space:nowrap}
  .nav-link:hover{color:var(--bone); border-color:var(--line-jade)}
  .nav-link.active{color:var(--bone); border-color:var(--jade)}

  .dd{position:relative}
  .dd-menu{position:absolute; right:0; top:calc(100% + 14px); min-width:230px; background:var(--coal); border:1px solid var(--line-jade);
    border-radius:12px; padding:8px; display:none; box-shadow:0 24px 50px -20px #000}
  .dd.open .dd-menu{display:block}
  .dd-menu a{display:block; padding:10px 13px; border-radius:8px; text-decoration:none; color:var(--fog); font-size:.9rem; transition:.15s}
  .dd-menu a:hover{background:rgba(201,185,155,.12); color:var(--bone)}
  .dd-menu hr{border:none; border-top:1px solid var(--line); margin:7px 10px}
  .dd-menu .cap{color:var(--jade); padding:8px 13px 4px; display:block}

  .burger{display:none; position:relative; z-index:2; background:none; border:1px solid var(--line); border-radius:10px; color:var(--bone); width:42px; height:38px; padding:0}
  .burger span{display:block; width:17px; height:1.5px; background:var(--bone); margin:3.5px auto; transition:transform .28s, opacity .18s}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

  /* Vollbildmenü, zentriert — liegt unter dem Kopf, damit das Kreuz erreichbar bleibt */
  .mobile{
    position:fixed; inset:0; z-index:35; display:none;
    flex-direction:column; justify-content:center; align-items:center;
    background:var(--night); text-align:center; overflow-y:auto;
    padding:calc(78px + 22px) var(--pad) calc(32px + env(safe-area-inset-bottom));
  }
  .mobile.open{display:flex}
  .mobile a,.mobile button{
    display:block; width:100%; background:none; border:none; color:var(--bone); text-decoration:none;
    text-align:center; padding:14px 0; font-family:var(--ui);
    font-size:1.75rem; font-weight:800; letter-spacing:-.03em; text-transform:uppercase; line-height:1.15;
  }
  .mobile a:active,.mobile button:active{color:var(--jade)}
  .mobile .cap{color:var(--fog); font-family:var(--mono); font-size:.62rem; letter-spacing:.22em;
    text-transform:uppercase; padding:34px 0 6px; display:block}
  .mobile .klein{font-size:.98rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--fog); padding:9px 0}
  .mobile .btn{width:auto; min-width:0; margin-top:32px; padding:18px 42px;
    font-family:var(--mono); font-size:.94rem; font-weight:700; letter-spacing:.18em; line-height:1.2;
    color:#0B0B09; background:var(--jade); border-color:var(--jade)}
  .mobile .btn:active,.mobile .btn:hover,.mobile .btn:focus{color:#0B0B09; background:var(--jade-hi); border-color:var(--jade-hi)}
  @media(min-width:961px){ .mobile{display:none !important} }
  @media(max-width:960px){
    .nav{display:none}
    .burger{display:block; margin-left:auto}
  }

  .btn{border:1px solid var(--line-jade); background:transparent; color:var(--bone); padding:9px 18px; border-radius:99px;
    font-family:var(--mono); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; transition:.2s; white-space:nowrap; text-decoration:none; display:inline-block}
  .btn:hover{background:var(--jade); border-color:var(--jade); color:var(--night)}
  .btn.solid{background:var(--jade); border-color:var(--jade); color:var(--night); font-weight:600}
  .btn.solid:hover{background:var(--jade-hi); border-color:var(--jade-hi)}
  .btn.ghost{border-color:var(--line); color:var(--fog)}
  .btn.ghost:hover{background:transparent; border-color:var(--bone); color:var(--bone)}
  .btn:disabled{opacity:.4; cursor:not-allowed}

  /* ---------- Seiten ---------- */
  .page{display:none}
  .page.on{display:block}
  .sec{padding:clamp(48px,8vw,92px) 0}
  .sec + .sec{border-top:1px solid var(--line)}
  .sec-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:12px}
  .sec-head h2,.sec-head h1{font-size:clamp(1.9rem,5.4vw,3.2rem); line-height:1}
  .sec-head .num{color:var(--jade)}
  .sec-note{color:var(--fog); max-width:56ch; margin:0 0 32px; font-size:.95rem}

  /* ---------- Start ---------- */
  .hero{position:relative; overflow:hidden; min-height:clamp(560px,82vh,780px); display:flex; align-items:center}
  .smoke{position:absolute; inset:0; overflow:hidden; pointer-events:none}
  .smoke i{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; display:block}
  .s1{width:52vw; height:52vw; left:-8vw; top:-14vw; background:radial-gradient(circle,rgba(201,185,155,.24),transparent 68%); animation:d1 26s ease-in-out infinite alternate}
  .s2{width:46vw; height:46vw; right:-6vw; top:8vw; background:radial-gradient(circle,rgba(227,154,75,.20),transparent 68%); animation:d2 32s ease-in-out infinite alternate}
  .s3{width:60vw; height:38vw; left:22vw; bottom:-18vw; background:radial-gradient(circle,rgba(243,241,236,.10),transparent 70%); animation:d1 38s ease-in-out infinite alternate-reverse}
  @keyframes d1{to{transform:translate3d(6vw,-4vw,0) scale(1.15)}}
  @keyframes d2{to{transform:translate3d(-7vw,5vw,0) scale(1.1)}}
  .hero-in{position:relative; z-index:1; width:100%; padding:clamp(46px,7vw,84px) 0}
  .eyebrow{color:var(--jade); margin:0 0 22px}
  .hero h1{line-height:.88; margin:0 0 26px; font-size:clamp(2.9rem,10vw,7rem); max-width:9ch}
  .hero h1 .out{display:block; color:transparent; -webkit-text-stroke:1.6px var(--bone)}
  .h1-zusatz{font-size:clamp(1.1rem,2.6vw,1.45rem); font-weight:600; letter-spacing:-.01em;
    color:var(--jade); margin:0 0 20px}
  .lede{max-width:46ch; color:var(--fog); font-size:1.06rem; margin:0 0 34px}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px}
  .btn:active{transform:scale(.98)}
  .facts{display:flex; flex-wrap:wrap; gap:0 34px; margin-top:48px; padding-top:20px; border-top:1px solid var(--line); color:var(--fog)}
  .facts b{color:var(--bone); font-weight:600}

  .teasers{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  @media(max-width:860px){.teasers{grid-template-columns:1fr}}
  .teaser{border:1px solid var(--line); border-radius:14px; padding:26px 24px; background:rgba(243,241,236,.03);
    display:flex; flex-direction:column; text-decoration:none; transition:.25s}
  .teaser:hover{border-color:var(--line-jade); transform:translateY(-3px); background:rgba(201,185,155,.06)}
  .teaser h3{font-size:1.35rem; margin:10px 0 8px}
  .teaser p{color:var(--fog); font-size:.92rem; margin:0 0 18px; flex:1}
  .teaser .go{color:var(--jade)}

  /* Bilder: erscheinen nur, wenn die Dateien tatsächlich vorhanden sind */
  .galerie{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
  .galerie figure{margin:0; overflow:hidden; border-radius:16px; border:1px solid var(--line); background:var(--coal)}
  .galerie img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block; transition:transform .5s}
  .galerie figure:hover img{transform:scale(1.04)}
  @media(max-width:700px){
    .galerie{grid-template-columns:1fr 1fr; gap:10px}
    .galerie img{aspect-ratio:1}
  }
  .raumbild{margin:0 0 clamp(28px,5vw,44px); border-radius:18px; overflow:hidden; border:1px solid var(--line)}
  .raumbild img{width:100%; aspect-ratio:21/9; object-fit:cover; display:block}
  @media(max-width:700px){.raumbild img{aspect-ratio:3/2}}

  /* Geöffnet-Anzeige */
  .status{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    font-family:var(--mono); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fog)}
  .status::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--fog); flex:none}
  .status.auf{color:var(--jade)}
  .status.auf::before{background:var(--jade); box-shadow:0 0 0 3px rgba(201,185,155,.18)}
  .status.zu::before{background:#E5705E}
  .status-gross{font-size:.72rem; margin:0 0 20px}
  .status-mobil{display:none}
  @media(max-width:960px){
    .status:not(.status-gross):not(.status-mobil){display:none}
    .status-mobil{display:inline-flex; margin-left:auto; margin-right:14px; font-size:.58rem}
  }
  @media(max-width:520px){ .status-mobil{display:none} }

  .hours-list{list-style:none; margin:0; padding:0; max-width:460px}
  .hours-list li{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid rgba(243,241,236,.07)}
  .hours-list b{font-weight:600}
  .hours-list span{font-family:var(--mono); font-size:.84rem; color:var(--fog)}

  /* ---------- Karte ---------- */
  .menu-layout{display:grid; grid-template-columns:210px 1fr; gap:clamp(26px,5vw,58px); align-items:start}
  /* Ohne diese Zeile weigern sich Rasterspalten zu schrumpfen. Die
     Spalte wird dann breiter als der Bildschirm, und alles darin —
     auch die Filterleiste — wächst mit, statt zu scrollen. */
  .menu-layout > *{min-width:0}
  @media(max-width:860px){.menu-layout{grid-template-columns:1fr}}
  .cats{position:sticky; top:98px; display:flex; flex-direction:column; gap:2px}
  .cats .kat-link{display:block; text-decoration:none; color:var(--fog); padding:9px 12px; border-radius:8px;
    font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; transition:.15s}
  .cats .kat-link:hover{color:var(--bone); background:rgba(243,241,236,.04)}
  .cats .kat-link.aktiv{color:var(--night); background:var(--jade); font-weight:700}
  /* Geschmacksfilter — dieselbe Sprache wie die Kategorieleiste:
     Monospace, gesperrt, versal. Nicht gewählt zurückhaltend, gewählt
     in Leinen mit dunkler Schrift, genau wie die aktive Kategorie. */
  .empty{color:var(--fog); font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
    text-transform:uppercase; padding:26px 0}
  /* Immer eine durchlaufende Leiste, auf jedem Bildschirm. Vorher galt
     das nur unterhalb einer bestimmten Breite — und wenn diese Regel
     aus irgendeinem Grund nicht griff, schrumpften die Knöpfe einfach,
     statt scrollbar zu werden. */
  .filters{display:flex; flex-wrap:nowrap; align-items:center; gap:8px; margin:0 0 26px;
    overflow-x:auto; overscroll-behavior-x:contain; touch-action:pan-x;
    scroll-behavior:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none}
  .filters::-webkit-scrollbar{display:none}
  .filters::before{content:"Geschmack"; flex:0 0 auto; font-family:var(--mono); font-size:.6rem;
    letter-spacing:.2em; text-transform:uppercase; color:var(--fog); margin-right:4px}
  /* flex:0 0 auto ist entscheidend: Ohne das schrumpfen die Knöpfe auf
     Wortbreite zusammen, statt über den Rand hinauszuragen — und was
     nicht hinausragt, lässt sich auch nicht scrollen. */
  .chip{flex:0 0 auto; background:none; border:1px solid var(--line); color:var(--fog);
    padding:8px 15px; border-radius:99px; cursor:pointer; white-space:nowrap;
    font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
    transition:color .18s, border-color .18s, background .18s}
  .chip:hover{color:var(--bone); border-color:var(--fog)}
  .chip[aria-pressed="true"]{background:var(--jade); border-color:var(--jade);
    color:var(--night); font-weight:700}
  .chip[aria-pressed="true"]:hover{background:var(--jade-hi); border-color:var(--jade-hi)}
  @media(max-width:860px){
    .filters{gap:7px; margin-bottom:22px}
    .filters::before{margin-right:6px}
    .chip{padding:10px 15px; font-size:.6rem}
  }

  .kat-block{scroll-margin-top:110px; padding-top:6px}
  .kat-block + .kat-block{margin-top:52px; padding-top:36px; border-top:1px solid var(--line)}
  @media(max-width:860px){
    /* Kategorieleiste klebt unter dem Kopf — Wechseln ohne Zurückscrollen */
    .cats{position:sticky; top:77px; z-index:20; flex-direction:row; overflow-x:auto; gap:8px;
      margin:0 calc(var(--pad)*-1) 22px; padding:12px var(--pad);
      background:var(--night); border-bottom:1px solid var(--line); box-shadow:0 10px 20px -16px #000;
      scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-padding-inline:var(--pad)}
    .cats::-webkit-scrollbar{display:none}
    .cats{scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:auto;
      -webkit-overflow-scrolling:touch}
    .cats::-webkit-scrollbar{display:none}
    .cats .kat-link{flex:none; white-space:nowrap; border:1px solid var(--line); border-radius:99px; padding:11px 17px; font-size:.7rem}
    .kat-block{scroll-margin-top:130px}
  }
  .karten-suche{position:relative; margin-bottom:26px}
  .karten-suche input{width:100%; background:rgba(0,0,0,.3); border:1px solid var(--line); color:var(--bone);
    padding:14px 44px 14px 18px; border-radius:99px; font-family:var(--ui); font-size:16px}
  .karten-suche input:focus{border-color:var(--jade); outline:none}
  .karten-suche button{position:absolute; right:6px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--fog); font-size:1.5rem; line-height:1; padding:6px 12px}
  .karten-suche button:hover{color:var(--bone)}
  .treffer-kat{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--jade); margin-left:8px}
  .cat-title{font-size:clamp(1.7rem,4.5vw,2.6rem); margin-bottom:6px}
  .cat-note{color:var(--fog); font-size:.9rem; margin:0 0 26px}
  .group{margin-bottom:38px}
  .group h4{font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--jade);
    margin:0 0 14px; padding-bottom:9px; border-bottom:1px solid var(--line-jade); font-weight:400}
  /* ─── Artikelzeilen der Karte ────────────────────────────────
     Alles in einem Block, damit sich Grund- und Handy-Regeln nicht
     gegenseitig überschreiben. Reihenfolge zählt bei gleicher
     Gewichtung: Was später steht, gewinnt. */

  /* Zwei Spalten nur, wenn wirklich Platz ist. min() verhindert, dass
     die Spalte breiter wird als der Bildschirm — genau das schob den
     Preis bisher aus dem sichtbaren Bereich. */
  /* Eine Spalte ist der Normalfall. Zwei nur dort, wo wirklich Platz
     ist. Vorher errechnete der Browser die Spalten selbst — bei
     schmalen Geräten konnte dabei ein Raster entstehen, das breiter
     war als der Bildschirm. */
  .items{display:grid; grid-template-columns:1fr; gap:0 clamp(26px,4vw,54px)}
  .items > .item{min-width:0}
  @media(min-width:1180px){
    .items{grid-template-columns:1fr 1fr}
  }

  .item{padding:14px 0; border-bottom:1px solid rgba(243,241,236,.06)}
  .item.mit-bild{display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start}
  .item .item-text{min-width:0}

  .artikelbild{width:172px; height:172px; border-radius:14px; object-fit:cover;
    background:var(--coal); border:1px solid var(--line); cursor:zoom-in;
    transition:border-color .2s, transform .2s}
  .artikelbild:hover{border-color:var(--line-jade); transform:scale(1.02)}
  .artikelbild:focus-visible{outline:2px solid var(--jade); outline-offset:3px}

  /* Bild groß ansehen */
  .bildschau{position:fixed; inset:0; z-index:60; display:flex; align-items:center;
    justify-content:center; padding:24px; cursor:zoom-out;
    background:rgba(6,6,5,.94); opacity:0; transition:opacity .18s}
  /* Ohne diese Zeile bleibt die Ebene liegen: display:flex aus der
     Regel darüber ist stärker als das hidden-Attribut. Sie war dann
     zwar unsichtbar, fing aber weiterhin jeden Klick ab. */
  .bildschau[hidden]{display:none}
  /* Zweite Absicherung, falls doch einmal etwas offen bleibt */
  .bildschau:not(.offen){pointer-events:none}
  .bildschau.offen{opacity:1; pointer-events:auto}
  .bildschau figure{margin:0; text-align:center; max-width:min(460px,86vw)}
  .bildschau img{width:100%; height:auto; border-radius:18px; display:block;
    border:1px solid var(--line-jade)}
  .bildschau figcaption{display:flex; justify-content:space-between; align-items:baseline;
    gap:16px; margin-top:16px; color:var(--bone); font-weight:600; font-size:1.05rem; text-align:left}
  .bildschau .bs-preis{color:var(--jade); font-weight:400; white-space:nowrap}
  .bildschau-zu{position:absolute; top:14px; right:16px; background:none; border:none;
    color:var(--fog); font-size:2.4rem; line-height:1; padding:6px 14px; cursor:pointer}
  .bildschau-zu:hover{color:var(--bone)}
  @media(prefers-reduced-motion:reduce){
    .bildschau{transition:none}
    .artikelbild{transition:none}
    .artikelbild:hover{transform:none}
  }
  .item.nicht-da .artikelbild{opacity:.4; filter:grayscale(1)}

  /* Name, Punktlinie und Preis als Raster statt als Flexzeile: So
     bekommt der Preis eine eigene Spalte, die nie schrumpft, und der
     Name eine, die immer nachgibt. Überlaufen kann das nicht mehr. */
  .item-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(12px,auto) auto;
    align-items:baseline; gap:10px}
  .item-name{font-weight:600; font-size:1rem; min-width:0; overflow-wrap:anywhere}
  .leader{border-bottom:1px dotted rgba(243,241,236,.22); transform:translateY(-4px); align-self:center; height:1px}
  .price{font-family:var(--mono); font-size:.86rem; white-space:nowrap}

  /* Lange Zutatenlisten sollen umbrechen, nicht über den Rand laufen.
     overflow-wrap greift bei einzelnen langen Wörtern, hyphens trennt
     sie an sinnvollen Stellen — dafür steht die Sprache im html-Tag. */
  .desc{color:var(--fog); font-size:.82rem; line-height:1.5; margin:4px 0 0;
    overflow-wrap:anywhere; hyphens:auto}
  .tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; align-items:center}
  .tag{font-family:var(--mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase;
    border:1px solid var(--line-jade); color:var(--jade); padding:2px 7px; border-radius:99px}
  .tag.al{border-color:var(--line); color:var(--fog)}
  .tag.aus{border-color:rgba(227,154,75,.5); color:var(--ember)}
  .item.nicht-da .item-name{text-decoration:line-through; color:var(--fog)}
  .item.nicht-da .price{color:var(--fog)}

  @media(max-width:860px){
    .artikelbild{width:150px; height:150px}
    .item.mit-bild{gap:15px}
  }

  /* Am Handy ist neben dem Bild kein Platz für Name und Preis in einer
     Zeile. Der Preis bekommt deshalb eine eigene Zeile darunter und
     steht in Leinen — dort ist er nicht zu übersehen. */
  @media(max-width:620px){
    .item{padding:16px 0}
    .item.mit-bild{gap:14px}
    .artikelbild{width:112px; height:112px}
    .item-top{grid-template-columns:minmax(0,1fr)}
    .leader{display:none}
    .price{font-size:.92rem; color:var(--jade); margin-top:2px}
    .item-name{font-size:.98rem; line-height:1.32}
    /* Neben dem Bild bleibt wenig Platz — die Zutaten dürfen deshalb
       kleiner sein, solange sie vollständig lesbar bleiben. */
    .desc{font-size:.76rem; line-height:1.45; margin-top:3px}
    .tags{margin-top:5px; gap:5px}
    .tag{font-size:.5rem; padding:2px 6px; letter-spacing:.1em}
  }

  @media(max-width:400px){
    .artikelbild{width:96px; height:96px}
    .item.mit-bild{gap:12px}
    .item-name{font-size:.94rem}
    .desc{font-size:.73rem}
  }

  .strength{display:flex; gap:3px}
  .strength i{width:5px; height:5px; border-radius:50%; background:rgba(243,241,236,.2); display:block}
  .strength i.on{background:var(--ember)}
  .legend{margin-top:30px; padding-top:18px; border-top:1px solid var(--line); color:var(--fog); font-size:.8rem}
  /* Auszug auf der Startseite: dieselben Zeilen, aber anklickbar */
  .item.auszug{display:block; text-decoration:none; padding:16px 0; transition:opacity .2s}
  /* Hier stand eine Regel, die dem Browser erlaubte, Blöcke außerhalb
     des Sichtfelds zu überspringen. Mit Bildern sind die Kategorien
     aber viel höher als jede Schätzung — beim Hineinscrollen wuchs der
     Block plötzlich, die Seite sprang, und es sah aus, als würden
     Artikel fehlen. Die Bilder laden ohnehin erst bei Bedarf, das
     reicht als Bremse. */
  .item.auszug:hover{opacity:.72}
  .item.auszug .tag{margin-top:8px; display:inline-block}

  /* ---------- Mitgliedschaft ---------- */
  .tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px}
  @media(max-width:760px){.tiers{grid-template-columns:1fr}}
  .tier{border:1px solid var(--line); background:rgba(243,241,236,.03); border-radius:14px; padding:28px 24px 24px; display:flex; flex-direction:column; transition:.25s}
  .tier:hover{border-color:var(--line-jade); transform:translateY(-3px)}
  .tier.featured{border-color:var(--line-jade); background:rgba(201,185,155,.07)}
  .tier h3{font-size:1.7rem; margin:4px 0 0}
  .tier .amt{font-family:var(--mono); font-size:1.45rem; color:var(--jade); margin:14px 0 2px}
  .tier .per{color:var(--fog); margin-bottom:20px}
  .tier ul{list-style:none; margin:0 0 24px; padding:0; flex:1}
  .tier li{padding:9px 0 9px 22px; position:relative; font-size:.9rem; border-top:1px solid rgba(243,241,236,.07)}
  .tier li::before{content:"+"; position:absolute; left:2px; color:var(--jade)}
  .tier li:first-child{border-top:none}

  .member{display:grid; grid-template-columns:minmax(0,360px) 1fr; gap:clamp(26px,5vw,58px); align-items:start}
  @media(max-width:860px){.member{grid-template-columns:1fr}}
  .pass{position:relative; aspect-ratio:1.586/1; border-radius:14px; padding:22px; overflow:hidden;
    background:linear-gradient(150deg,#232019 0%,#161410 58%,#0B0B09 100%); border:1px solid var(--line-jade);
    box-shadow:0 26px 60px -24px #000; display:flex; flex-direction:column; justify-content:space-between; transition:transform .25s ease-out}
  .pass::before{content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(118deg,transparent 34%,rgba(201,185,155,.26) 48%,rgba(243,241,236,.14) 52%,transparent 66%);
    transform:translateX(var(--sheen,-30%)); transition:transform .3s ease-out}
  .pass::after{content:""; position:absolute; right:-56px; bottom:-70px; width:220px; height:220px; border-radius:50%; border:1px solid rgba(243,241,236,.09); pointer-events:none}
  .pass-top{display:flex; justify-content:space-between; align-items:flex-start; position:relative}
  .pass-brand{display:flex; align-items:center; gap:8px; font-weight:800}
  .pass-plan{color:var(--jade)}
  .pass-name{font-weight:800; font-size:1.4rem; letter-spacing:-.03em; text-transform:uppercase; position:relative; line-height:1.1}
  .pass-row{display:flex; justify-content:space-between; gap:12px; position:relative; color:var(--fog)}
  .pass-row b{display:block; color:var(--bone); font-weight:600; margin-top:3px}
  .m-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
  .m-head h3{font-size:1.85rem}
  .state{display:inline-flex; align-items:center; gap:7px; color:var(--jade)}
  .dot{width:6px; height:6px; border-radius:50%; background:var(--jade)}
  .credit{display:flex; align-items:center; gap:18px; margin:22px 0; padding:18px 20px; border:1px solid var(--line);
    border-radius:12px; background:rgba(243,241,236,.03); flex-wrap:wrap}
  .credit .big{font-family:var(--mono); font-size:2.3rem; line-height:1; color:var(--ember)}
  .credit .lbl{color:var(--fog); flex:1; min-width:130px}
  .m-benefits{list-style:none; padding:0; margin:0 0 24px; border-top:1px solid var(--line)}
  .m-benefits li{padding:11px 0 11px 24px; border-bottom:1px solid rgba(243,241,236,.06); position:relative; font-size:.92rem}
  .m-benefits li::before{content:"✓"; position:absolute; left:0; color:var(--jade)}
  .m-actions,.switcher{display:flex; flex-wrap:wrap; gap:10px}
  .wechsel-zeile{display:flex; justify-content:space-between; align-items:center; gap:14px; width:100%;
    background:none; border:1px solid var(--line); border-radius:12px; color:var(--bone);
    padding:15px 18px; margin-bottom:8px; text-align:left; transition:.18s}
  .wechsel-zeile:hover{border-color:var(--line-jade); background:rgba(201,185,155,.06)}
  .wechsel-zeile b{font-weight:600}
  .switcher{margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}

  /* Guthaben mit Balken */
  .credit-zahl{display:flex; align-items:center; gap:14px}
  .credit-bar{flex:1; min-width:150px}
  .credit-bar .track{height:7px; border-radius:99px; background:rgba(243,241,236,.1); overflow:hidden; margin-bottom:7px}
  .credit-bar .fill{height:100%; border-radius:99px; background:var(--ember); transition:width .35s}

  /* Ablauf und Fragen */
  #aboExtras{margin-top:clamp(46px,7vw,80px)}
  .ablauf-titel{font-size:1.5rem; margin:0 0 22px}
  .schritte{list-style:none; margin:0 0 clamp(40px,6vw,66px); padding:0;
    display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  @media(max-width:820px){.schritte{grid-template-columns:1fr; gap:0}}
  .schritte li{border:1px solid var(--line); border-radius:14px; padding:24px 22px; background:rgba(243,241,236,.02)}
  @media(max-width:820px){
    .schritte li{border:none; border-radius:0; background:none; padding:18px 0 18px 44px; position:relative;
      border-bottom:1px solid rgba(243,241,236,.07)}
    .schritte li .nr{position:absolute; left:0; top:20px}
  }
  .schritte .nr{color:var(--jade); display:block; margin-bottom:10px}
  .schritte b{display:block; font-size:1.1rem; margin-bottom:6px}
  .schritte p{color:var(--fog); font-size:.92rem; margin:0}

  .faq details{border-bottom:1px solid rgba(243,241,236,.08)}
  .faq summary{cursor:pointer; list-style:none; padding:17px 34px 17px 0; position:relative;
    font-size:1.02rem; font-weight:600; transition:color .18s}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--jade)}
  .faq summary::after{content:"+"; position:absolute; right:6px; top:16px; color:var(--jade);
    font-size:1.3rem; font-weight:400; line-height:1; transition:transform .2s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details p{color:var(--fog); font-size:.94rem; margin:0 0 20px; padding-right:34px; max-width:64ch}
  .tier .wert{color:var(--fog); font-size:.8rem; margin:-16px 0 20px}

  /* ---------- Über uns ---------- */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,64px); align-items:start}
  @media(max-width:820px){.split{grid-template-columns:1fr}}
  .prose{max-width:62ch}
  .prose p{color:var(--fog); margin:0 0 18px}
  .prose p.big{color:var(--bone); font-size:1.15rem}
  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px}
  @media(max-width:820px){.pillars{grid-template-columns:1fr}}
  .pillar{border:1px solid var(--line); border-radius:14px; padding:24px 22px}
  .pillar h4{margin:8px 0 8px; font-weight:800; letter-spacing:-.02em; text-transform:uppercase; font-size:1.15rem}
  .pillar p{color:var(--fog); font-size:.9rem; margin:0}

  /* ---------- Formulare ---------- */
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 18px; max-width:620px}
  @media(max-width:640px){.form-grid{grid-template-columns:1fr}}
  .field{margin-bottom:15px}
  .field.full{grid-column:1/-1}
  .field label{display:block; margin-bottom:6px; color:var(--fog); font-family:var(--mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase}
  .field input,.field select,.field textarea{width:100%; background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--bone);
    padding:13px 14px; border-radius:10px; font-family:var(--ui); font-size:16px}
  .field textarea{min-height:110px; resize:vertical}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--jade); outline:none}
  .field select option{background:var(--coal)}
  .err{color:#E5705E; font-size:.82rem; margin:0; min-height:1px}
  /* Falle für Bots: für Menschen unsichtbar, für Ausfüllautomaten nicht */
  .honigtopf{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  .contact-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:34px}
  .cc{border:1px solid var(--line); border-radius:14px; padding:20px}
  .cc h4{font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--jade); margin:0 0 8px; font-weight:400}
  .cc p{margin:0; color:var(--bone); font-size:.95rem}
  .cc a{color:var(--bone)}

  /* ---------- Rechtstexte ---------- */
  .legal-doc{max-width:70ch}
  .legal-doc h3{font-size:1.05rem; letter-spacing:-.01em; margin:32px 0 10px; color:var(--bone)}
  .legal-doc h3:first-of-type{margin-top:14px}
  .legal-doc p,.legal-doc li{color:var(--fog); font-size:.93rem}
  .legal-doc p{margin:0 0 14px}
  .legal-doc ul{margin:0 0 16px; padding-left:20px}
  .legal-doc li{margin-bottom:6px}
  .todo{border:1px solid var(--ember); background:rgba(227,154,75,.09); border-radius:12px; padding:16px 18px; margin-bottom:28px}
  .todo p{color:var(--bone); margin:0; font-size:.88rem}

  /* ---------- Inhaberbereich ---------- */
  .gate{max-width:390px; margin:0 auto; border:1px solid var(--line-jade); border-radius:16px; padding:30px 26px; background:var(--coal)}
  .kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px}
  @media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
  .kpi{border:1px solid var(--line); border-radius:14px; padding:20px; background:rgba(243,241,236,.03)}
  .kpi .v{font-family:var(--mono); font-size:1.9rem; line-height:1.1; color:var(--bone); margin:6px 0 4px}
  .kpi .v.jade{color:var(--jade)} .kpi .v.ember{color:var(--ember)}
  .kpi .k{font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fog)}
  .kpi .sub{color:var(--fog); font-size:.78rem}
  .panels{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:30px}
  @media(max-width:900px){.panels{grid-template-columns:1fr}}
  .panel{border:1px solid var(--line); border-radius:14px; padding:22px 20px; background:rgba(243,241,236,.02); min-width:0}
  .panel h4{font-family:var(--mono); font-size:.63rem; letter-spacing:.18em; text-transform:uppercase; color:var(--jade); margin:0 0 4px; font-weight:400}
  .panel .cap{color:var(--fog); font-size:.8rem; margin:0 0 18px}
  .panel svg{width:100%; height:auto; display:block; overflow:visible}
  .legend-row{display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; color:var(--fog); font-size:.75rem}
  .legend-row i{width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:6px; vertical-align:middle}
  .dist{list-style:none; margin:0; padding:0}
  .dist li{margin-bottom:14px}
  .dist .top{display:flex; justify-content:space-between; font-size:.88rem; margin-bottom:5px}
  .dist .track{height:7px; border-radius:99px; background:rgba(243,241,236,.09); overflow:hidden}
  .dist .fill{height:100%; border-radius:99px; background:var(--jade)}
  .bdays{list-style:none; margin:0; padding:0}
  .bdays li{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid rgba(243,241,236,.07); font-size:.9rem}
  .bdays span{font-family:var(--mono); font-size:.76rem; color:var(--fog)}
  .tools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
  .tools input{background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--bone); padding:11px 16px; border-radius:99px; font-size:16px; min-width:200px; max-width:100%}
  .tools input:focus{border-color:var(--jade); outline:none}
  .tbl-wrap{border:1px solid var(--line); border-radius:14px; overflow-x:auto}
  table.tbl{width:100%; border-collapse:collapse; min-width:840px}
  table.tbl th{text-align:left; font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fog);
    font-weight:400; padding:14px 16px; border-bottom:1px solid var(--line); white-space:nowrap; cursor:pointer; user-select:none}
  table.tbl th:hover{color:var(--bone)}
  table.tbl td{padding:13px 16px; border-bottom:1px solid rgba(243,241,236,.06); font-size:.88rem; white-space:nowrap}
  table.tbl tr:last-child td{border-bottom:none}
  table.tbl tbody tr:hover{background:rgba(243,241,236,.03)}
  .badge{font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border-radius:99px; border:1px solid}
  .badge.on{color:var(--jade); border-color:var(--line-jade)}
  .badge.off{color:var(--fog); border-color:var(--line)}
  .muted{color:var(--fog)}
  .admin-top{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px}
  .admin-tabs{display:flex; gap:6px; overflow-x:auto; margin-bottom:28px; padding-bottom:4px;
    border-bottom:1px solid var(--line); scrollbar-width:none}
  .admin-tabs::-webkit-scrollbar{display:none}
  .admin-tabs button{background:none; border:1px solid transparent; border-bottom:none; color:var(--fog);
    padding:11px 16px; border-radius:10px 10px 0 0; white-space:nowrap; margin-bottom:-1px;
    font-family:var(--mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; transition:.18s}
  .admin-tabs button:hover{color:var(--bone)}
  .admin-tabs button[aria-selected="true"]{color:var(--bone); background:rgba(243,241,236,.05);
    border-color:var(--line); border-bottom-color:var(--night)}
  .admin-panel{display:none}
  .admin-panel.on{display:block}
  .admin-select{background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--bone);
    padding:11px 16px; border-radius:99px; font-family:var(--ui); font-size:16px}
  .admin-select:focus{border-color:var(--jade); outline:none}

  /* Zeileneditor für Karte und Abo */
  /* ─── Artikelverwaltung im Inhaberbereich ─── */
  .artikel-karte{display:grid; grid-template-columns:26px 26px 120px minmax(0,1fr); gap:14px;
    align-items:start; padding:16px; margin-bottom:12px; border:1px solid var(--line);
    border-radius:14px; background:rgba(243,241,236,.02);
    transition:border-color .15s, transform .15s, opacity .15s}
  .artikel-karte.zieht{border-color:var(--jade); background:rgba(201,185,155,.09);
    transform:scale(1.01); opacity:.92}

  /* Griff zum Ziehen. touch-action:none ist hier zwingend — sonst
     scrollt das Handy die Seite, statt die Karte zu verschieben. */
  .ak-griff{align-self:center; background:none; border:none; color:var(--fog);
    font-size:1.15rem; line-height:1; padding:8px 2px; cursor:grab;
    touch-action:none; letter-spacing:-2px}
  .ak-griff:hover{color:var(--jade)}
  .ak-griff:active{cursor:grabbing}

  .ak-pfeile{display:flex; flex-direction:column; gap:4px; align-self:center}
  .ak-pfeile button{background:none; border:1px solid var(--line); border-radius:6px;
    color:var(--fog); font-size:.55rem; line-height:1; padding:5px 4px; cursor:pointer}
  .ak-pfeile button:hover{color:var(--bone); border-color:var(--fog)}

  .artikel-gruppe{display:block}
  .artikel-karte.geloescht{opacity:.45}
  .artikel-karte.geloescht .ak-text input{text-decoration:line-through}
  .ak-bild{display:flex; flex-direction:column; gap:8px}
  .ak-bild img{width:120px; height:120px; object-fit:cover; border-radius:10px; border:1px solid var(--line)}
  .ak-bild .kein-bild{width:120px; height:120px; border-radius:10px; border:1px dashed var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--fog);
    font-family:var(--mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.1em}
  .ak-text{display:flex; flex-direction:column; gap:9px; min-width:0}
  .ak-zeile{display:grid; grid-template-columns:minmax(0,1fr) 130px; gap:9px}
  .ak-labels{display:flex; flex-wrap:wrap; gap:6px}
  .ak-aktionen{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:2px}
  .chip.mini{padding:5px 11px; font-size:.55rem}
  .btn.mini{padding:6px 12px; font-size:.58rem}
  button.mini{background:none; border:1px solid var(--line); color:var(--fog); border-radius:99px;
    padding:6px 13px; font-family:var(--mono); font-size:.58rem; letter-spacing:.1em;
    text-transform:uppercase; cursor:pointer}
  button.mini:hover{color:var(--bone); border-color:var(--fog)}
  button.mini.warn:hover{color:#E5705E; border-color:#E5705E}

  .artikel-neu{padding:18px; border:1px dashed var(--line-jade); border-radius:14px; margin-top:22px}
  .artikel-neu input{margin-bottom:9px}

  #bildKasten{padding:18px; border:1px solid var(--line-jade); border-radius:14px; margin-bottom:18px;
    background:rgba(201,185,155,.05)}
  .bild-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px;
    max-height:340px; overflow-y:auto}
  .bild-raster button{padding:0; border:1px solid var(--line); border-radius:9px; overflow:hidden;
    background:none; cursor:pointer; aspect-ratio:1}
  .bild-raster button:hover{border-color:var(--jade)}
  .bild-raster img{width:100%; height:100%; object-fit:cover; display:block}

  @media(max-width:700px){
    .artikel-karte{grid-template-columns:26px 26px minmax(0,1fr); gap:10px}
    .ak-bild{grid-column:1 / -1; flex-direction:row; align-items:center}
    .ak-text{grid-column:1 / -1}
    .ak-bild img,.ak-bild .kein-bild{width:88px; height:88px}
    .ak-zeile{grid-template-columns:minmax(0,1fr) 100px}
  }

  .edit-row{display:grid; grid-template-columns:1fr 130px 140px; gap:12px; align-items:center;
    padding:12px 0; border-bottom:1px solid rgba(243,241,236,.07)}
  .edit-row .nm{min-width:0}
  .edit-row .nm b{font-weight:600; display:block}
  .edit-row .nm span{color:var(--fog); font-size:.82rem}
  .edit-row input[type="text"]{width:100%; background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--bone);
    padding:10px 12px; border-radius:10px; font-family:var(--mono); font-size:15px}
  .edit-row input:focus{border-color:var(--jade); outline:none}
  .edit-row.aus .nm b{text-decoration:line-through; color:var(--fog)}
  .schalter{display:inline-flex; align-items:center; gap:8px; color:var(--fog); font-size:.8rem; cursor:pointer; user-select:none}
  .schalter input{accent-color:var(--jade); width:18px; height:18px}
  .edit-grid{display:grid; gap:16px}
  .edit-card{border:1px solid var(--line); border-radius:14px; padding:20px}
  .edit-card h4{margin:0 0 14px; font-size:1.2rem; font-weight:800; text-transform:uppercase; letter-spacing:-.02em}
  .edit-card .zeile{display:grid; grid-template-columns:1fr 120px; gap:12px; align-items:center; margin-bottom:10px}
  .edit-card label{color:var(--fog); font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase}
  .edit-card input{background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--bone);
    padding:10px 12px; border-radius:10px; font-family:var(--mono); font-size:15px; width:100%}
  .edit-card input:focus{border-color:var(--jade); outline:none}
  @media(max-width:640px){
    .edit-row{grid-template-columns:1fr 110px; row-gap:8px}
    .edit-row .schalterzelle{grid-column:1/-1}
  }

  /* Aktionen in der Mitgliederliste */
  .akt{display:flex; gap:6px}
  .akt button{background:none; border:1px solid var(--line); color:var(--fog); border-radius:8px;
    padding:5px 9px; font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; transition:.15s; line-height:1.4}
  .akt button:hover{color:var(--bone); border-color:var(--fog)}
  .akt button.warn:hover{color:#E5705E; border-color:#E5705E}
  .zeile-select{background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--bone);
    border-radius:8px; padding:5px 8px; font-family:var(--mono); font-size:.62rem}

  /* ---------- Dialog ---------- */
  .overlay{position:fixed; inset:0; z-index:60; display:none; place-items:center; padding:18px; background:rgba(6,8,7,.85); backdrop-filter:blur(6px)}
  .overlay.open{display:grid}
  .modal{width:100%; max-width:440px; max-height:92vh; overflow:auto; background:var(--coal); border:1px solid var(--line-jade);
    border-radius:16px; padding:32px 28px 26px; position:relative; box-shadow:0 30px 80px -20px #000}
  .modal h2{font-size:1.6rem; margin:0 0 6px}
  .modal p.sub{color:var(--fog); font-size:.9rem; margin:0 0 22px}
  .close{position:absolute; top:12px; right:14px; background:none; border:none; color:var(--fog); font-size:1.5rem; line-height:1}
  .close:hover{color:var(--bone)}
  .tabs{display:flex; margin-bottom:24px; border-bottom:1px solid var(--line)}
  .tab{background:none; border:none; color:var(--fog); padding:10px 2px; margin-right:24px; margin-bottom:-1px;
    font-family:var(--mono); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid transparent}
  .tab[aria-selected="true"]{color:var(--bone); border-color:var(--jade)}
  .modal .btn{width:100%; padding:13px; margin-top:12px; text-align:center}
  .note{color:var(--fog); font-size:.75rem; margin:16px 0 0; line-height:1.5}

  /* ---------- Fuß ---------- */
  footer{border-top:1px solid var(--line); padding:48px 0 calc(34px + env(safe-area-inset-bottom))}
  .foot{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:30px}
  .foot h4{font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--jade); margin:0 0 10px; font-weight:400}
  .foot p,.foot a{margin:0; color:var(--fog); font-size:.9rem; text-decoration:none; display:block; padding:3px 0}
  .foot a:hover{color:var(--bone)}
  .colophon{margin-top:40px; padding-top:18px; border-top:1px solid var(--line); color:var(--fog); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
  .agentur{margin:26px 0 0; text-align:center; color:var(--fog); opacity:.65; font-size:.6rem; letter-spacing:.24em}
  .agentur a{color:inherit; text-decoration:none; border-bottom:1px solid var(--line); padding:6px 2px; transition:.2s}
  .agentur a:hover{color:var(--bone); border-color:var(--jade)}

  .toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(18px); z-index:70; background:var(--bone); color:var(--night);
    padding:12px 22px; border-radius:99px; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
    opacity:0; pointer-events:none; transition:.28s; max-width:90vw; text-align:center}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

  /* ---------- Handy-Feinschliff ----------
     Schwerpunkt Karte: große Tippflächen, ruhige Zeilen, kurzer Weg. */
  @media(max-width:700px){
    body{font-size:16px}
    .bar{height:68px}
    .cats{top:67px}

    .hero-in{padding-top:58vw; padding-bottom:44px}
    .hero-peek{width:72vw; top:-2vw}
    .hero h1{font-size:clamp(2.5rem,12vw,3.7rem); line-height:.95; max-width:9ch; margin-bottom:22px}
    .lede{font-size:1rem; margin-bottom:30px}
    .eyebrow{margin-bottom:20px; font-size:.64rem}
    .facts{flex-direction:column; align-items:flex-start; gap:11px; margin-top:34px; padding-top:22px; font-size:.64rem; line-height:1.5}
    .cta-row{gap:10px}
    .cta-row .btn{flex:1 1 170px; text-align:center; padding:14px 18px}

    .sec{padding:46px 0}
    .sec-head{gap:10px; margin-bottom:10px}
    .sec-note{margin-bottom:26px; font-size:.94rem}

    /* Die Artikelzeilen selbst stehen weiter oben in einem Block —
       hier nichts wiederholen, sonst überschreibt es sich gegenseitig. */
    .cat-title{margin-bottom:4px}
    .cat-note{margin-bottom:22px}
    .group{margin-bottom:34px}
    .legend{font-size:.7rem; line-height:1.8; margin-top:26px}

    /* Karten und Kacheln nicht bis an die Kante drücken */
    .teaser{padding:26px 22px}
    .tier{padding:26px 22px 22px}
    .cc{padding:20px 18px}
    .panel{padding:20px 18px}
    .kpi{padding:18px 16px}
    .credit{gap:14px; padding:18px 16px}
    .credit .big{font-size:2.1rem}
    .todo{padding:16px 18px}
    .gate{padding:28px 22px}

    /* Karte zuerst, dann eine klare Zäsur, dann der Rest */
    .member{gap:0}
    .member > div:first-child{margin-bottom:34px; padding-bottom:30px; border-bottom:1px solid var(--line)}
    .member .pass{border-radius:16px; padding:20px}
    .pass-name{font-size:1.5rem}
    .m-head h3{font-size:1.5rem}
    .credit{flex-direction:column; align-items:stretch; gap:14px}
    .credit-zahl{display:flex; align-items:center; gap:14px}
    .credit .big{font-size:2.6rem}
    .credit .lbl{flex:1}
    .credit .btn{width:100%; text-align:center}
    .m-actions .btn,.switcher .btn{flex:1 1 auto; min-width:44%; text-align:center}
    .modal{padding:28px 22px 24px; border-radius:16px}
    .tools input{width:100%}
    .tools .btn{flex:1; text-align:center}

    .foot{gap:26px}
    .foot p,.foot a{padding:7px 0; font-size:.95rem}
    .colophon{flex-direction:column; gap:8px; margin-top:32px}
  }
  /* Sehr schmale Geräte */
  @media(max-width:380px){
    :root{--pad:20px}
    .logo{font-size:1.05rem}
    .cta-row .btn{flex:1 1 100%}
    .hero h1{font-size:2.5rem}
    .kpis{gap:12px}
  }

  @media(prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important} html{scroll-behavior:auto}}