@font-face{font-family:'Outfit';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/outfit-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --green:#2e7d4f; --green-dark:#23613e; --green-soft:#e7f1e7;
  --accent:#e0883c; --accent-soft:#fbeeda;
  --bg:#f6f4ec; --card:#fff;
  --ink:#16241a; --muted:#5b6b59; --line:#e8e4d8;
  --warn:#b54708; --danger:#b42318; --ok:#2e7d4f;
  --radius:18px;
  --shadow:0 1px 2px rgba(20,40,25,.04),0 10px 30px rgba(20,40,25,.08);
  --shadow-sm:0 1px 2px rgba(20,40,25,.05),0 2px 10px rgba(20,40,25,.05);
  --font-head:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
/* Sprungziele (#einzelne-daten, FAQ, A-Z-Lexikon) duerfen nicht unter dem
   Sticky-Kopf landen -> Hoehe der Leiste als Scroll-Polster. */
html{scroll-padding-top:74px}
body{margin:0;font:16px/1.6 var(--font-body);
  color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%}
h1,h2,h3,.brand,.price,.cand-name,.dz-text,.scan-head,.stat-card .num{
  font-family:var(--font-head);letter-spacing:-.015em}
main{max-width:680px;margin:0 auto;padding:0 16px 56px}

/* Sticky-Kopf (Logo + Navigation bleiben beim Scrollen stehen).
   Kein max-width/margin:auto mehr: Die Leiste laeuft ueber die volle Breite, damit der
   Hintergrund beim Scrollen alles abdeckt; das seitliche Padding zentriert den Inhalt
   trotzdem exakt auf 680px wie <main>. Spart einen Wrapper in allen 16 Seiten. */
.topbar{display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:80;
  padding:14px max(16px,calc(50% - 324px));
  background:var(--bg);border-bottom:1px solid var(--line)}
/* Halbtransparent nur, wenn der Browser wirklich weichzeichnen kann - sonst waere der
   durchscrollende Text unter der Leiste lesbar. */
@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)){
  .topbar{background:rgba(246,244,236,.85);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
.brand{display:inline-block;width:132px;height:32px;font-size:0;line-height:0;color:transparent;
  text-decoration:none;background:url(/assets/img/logo.png?v=5) left center/contain no-repeat}
.pro-link{color:var(--green-dark);font-weight:600;text-decoration:none}

/* Einheitliche Link-Farbe: nie Browser-Blau/Lila. Buttons, Karten, Marke und Footer setzen
   ihre eigene Farbe per hoeherer Spezifitaet und bleiben davon unberuehrt. */
a{color:var(--green-dark)}
a:visited{color:var(--green-dark)}
a:hover{color:var(--green)}
.art-card,.art-card .art-name{color:var(--ink)}

.hero{text-align:center;padding:30px 0 8px}
.hero h1{font-size:clamp(1.95rem,6.5vw,2.6rem);line-height:1.12;margin:.1em 0 .3em}
.sub{color:var(--muted);margin:.4em auto;max-width:48ch;font-size:1.12rem}

.safety-top{background:var(--green-soft);border:1px solid #d4e6d4;color:#284a31;
  padding:14px 16px;border-radius:var(--radius);font-size:.95rem;margin:16px 0}

.uploader{margin:8px 0 4px}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--card);border:2px dashed #cfdac9;border-radius:var(--radius);
  padding:40px 18px;cursor:pointer;box-shadow:var(--shadow-sm);
  transition:border-color .15s,background .15s,box-shadow .15s}
.dropzone:hover,.dropzone.drag{border-color:var(--green);background:var(--green-soft);box-shadow:var(--shadow)}
.dz-icon{font-size:1.7rem;width:60px;height:60px;border-radius:50%;background:var(--green-soft);
  display:flex;align-items:center;justify-content:center}
.dz-text{color:var(--ink);font-weight:600;font-size:1.08rem}

.preview-wrap{display:flex;flex-direction:column;gap:10px;align-items:center}
#preview{max-width:100%;max-height:340px;border-radius:var(--radius);box-shadow:var(--shadow)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  appearance:none;border:0;border-radius:14px;padding:13px 22px;font-size:1rem;line-height:1.25;
  font-weight:600;font-family:var(--font-head);cursor:pointer;text-decoration:none;
  transition:background .18s,transform .18s,box-shadow .18s}
.btn.primary{background:var(--green);color:#fff;box-shadow:0 6px 16px rgba(46,125,79,.26)}
.btn.primary:hover{background:var(--green-dark);transform:translateY(-1px)}
.btn.primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--green);color:var(--green-dark)}
.btn.full{width:100%}

.result{margin:18px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);margin-bottom:12px}
.cand-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cand-name{font-weight:700;font-size:1.1rem}
.cand-lat{color:var(--muted);font-style:italic;font-size:.9rem}
.conf{font-size:.85rem;color:var(--muted);white-space:nowrap}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.82rem;
  font-weight:700;margin:8px 0}
.badge.essbar,.badge.bedingt_essbar{background:#ecfdf3;color:#067647}
.badge.ungeniessbar,.badge.unbekannt{background:#f2f4f7;color:#475467}
.badge.giftig{background:#fef3f2;color:#b42318}
.badge.toedlich{background:#b42318;color:#fff}
.confusions{margin:8px 0 0;padding-left:18px;color:#7c2d12;font-size:.9rem}
.confusions li{margin:5px 0}
.confusions .badge{margin:0 2px 0 0;font-size:.72rem;padding:2px 8px;vertical-align:middle}
.conf-lat{color:var(--muted);font-style:italic;font-size:.85em}
.note{color:var(--muted);font-size:.92rem;margin:8px 0 0}
.safety-note{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;
  padding:12px 14px;font-size:.9rem;margin-top:6px}

.spinner{display:inline-block;width:22px;height:22px;border:3px solid #cdd6cf;
  border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite;
  vertical-align:middle;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{text-align:center;color:var(--muted);padding:22px}
/* Scan-Fortschritt: dunkle Box, Spinner links, "noch ca. X Sekunden", Balken unten */
.scanning{max-width:460px;margin:6px auto;background:#1b241d;color:#eef2ee;
  border-radius:14px;padding:16px 18px;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.scan-row{display:flex;align-items:center;gap:13px;margin-bottom:13px}
.scanning .spinner{width:24px;height:24px;margin:0;flex:none;
  border:3px solid rgba(255,255,255,.22);border-top-color:#7dd59a}
.scan-texts{display:flex;flex-direction:column;gap:2px;min-width:0}
.scan-msg{font-weight:600;font-size:.98rem;line-height:1.25}
.scan-sec{font-weight:700;color:#7dd59a;font-size:.86rem;font-variant-numeric:tabular-nums}
.scan-bar{height:10px;background:rgba(255,255,255,.14);border-radius:999px;overflow:hidden}
.scan-bar span{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#34a85a,#7dd59a);transition:width .15s linear}
.scan-bar span.done{animation:scanpulse 1.1s ease-in-out infinite}
@keyframes scanpulse{0%,100%{opacity:1}50%{opacity:.55}}
.error{background:#fef3f2;border:1px solid #fecdca;color:#b42318;
  padding:12px 14px;border-radius:12px}
.demo-tag{display:inline-block;background:#eef2ff;color:#3538cd;font-size:.78rem;
  font-weight:700;padding:2px 8px;border-radius:6px;margin-bottom:8px}

.pro{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 22px;margin-top:30px;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden}
.pro::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--accent)}
.pro-title{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:6px}
.pro-title h2{margin:0}
.pro-emblem{width:48px;height:48px;flex:none}
.pro-emblem img{width:100%;height:100%;display:block;border-radius:12px}
.pro-feats{list-style:none;text-align:left;max-width:34ch;margin:20px auto 24px;padding:0}
.pro-feats li{position:relative;padding-left:30px;margin:14px 0;line-height:1.5;color:var(--ink)}
.pro-feats li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--green);font-weight:800;font-size:1.05em}
.pro-active-note{max-width:42ch;margin:.6em auto 1.2em;color:var(--ink)}
.price{font-size:2.2rem;font-weight:800;color:var(--green-dark);margin:.1em 0 0;line-height:1.05}
.price-per{font-family:var(--font-body);font-size:1.05rem;font-weight:600;color:var(--muted)}
.abo-hint{display:block;font-family:var(--font-body);font-size:.9rem;font-weight:500;color:var(--muted);margin:4px 0 20px;letter-spacing:0}
.fineprint{max-width:46ch;margin:0 auto 18px;font-size:.82rem;line-height:1.6;color:var(--muted)}
.fineprint a{color:var(--green-dark);text-decoration:underline;text-underline-offset:2px}
.fineprint a:visited{color:var(--green-dark)}
.fineprint a:hover{color:var(--green)}
.pro .btn{display:block;width:100%;margin-top:4px}

/* Arten-Lexikon */
.crumb{font-size:.85rem;color:var(--muted);margin:14px 0 4px}
.crumb a{color:var(--green);text-decoration:none}
.lead{font-size:1.05rem;color:var(--ink);margin:.6em 0 1.2em}
.specs{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
.specs dt{font-weight:700;color:var(--muted)}
.specs dd{margin:0}
.card h2{font-size:1.1rem;margin:.1em 0 .6em}
.cta{text-align:center;background:var(--green-soft);border-radius:var(--radius);padding:22px;margin:18px 0}
.cta p{margin:0 0 12px;font-weight:600}
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;margin:16px 0}
.art-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .18s,box-shadow .18s}
.art-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.art-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;background:#eef0ea;transition:transform .4s}
.art-card:hover .art-thumb{transform:scale(1.05)}
.art-card .badge{margin:12px 14px 0}
.art-name{font-weight:700;line-height:1.25;hyphens:auto;overflow-wrap:break-word;padding:4px 14px 0}
.art-card .cand-lat{padding:2px 14px 16px}

/* Steckbrief-Bild + Pflicht-Bildnachweis */
.art-figure{margin:14px 0 6px}
.art-figure img{width:100%;max-height:440px;object-fit:cover;border-radius:var(--radius);
  box-shadow:var(--shadow);background:#eef0ea}
.art-figure figcaption{font-size:.78rem;color:var(--muted);margin-top:6px}
.art-figure figcaption a{color:var(--muted)}
.lex-link{display:block;text-align:center;margin:18px 0;color:var(--green);font-weight:600;text-decoration:none}

/* FAQ */
.faq-list{margin:8px 0}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);margin-bottom:12px}
.faq-q{font-size:1.08rem;margin:0 0 .4em;color:var(--ink)}
.faq-a{color:var(--muted);margin:0}
.faq-a a{color:var(--green)}
.faq-a p{margin:0 0 .6em}
.faq-a ul,.faq-a ol{margin:.2em 0 .6em;padding-left:20px}
.faq-a li{margin:.25em 0}
.faq-a strong{color:var(--ink)}

/* FAQ-Abschnitte + Inhaltsverzeichnis */
.faq-toc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px;box-shadow:var(--shadow);margin:16px 0}
.faq-toc strong{display:block;margin-bottom:6px}
.faq-toc ol{margin:0;padding-left:20px}
.faq-toc li{margin:3px 0}
.faq-toc a{color:var(--green);text-decoration:none}
.faq-section{margin:26px 0 8px;scroll-margin-top:16px}
.faq-section>h2{font-size:1.3rem;color:var(--green-dark);border-bottom:2px solid var(--line);
  padding-bottom:6px;margin:0 0 14px}

/* Tabelle (Laenderregeln) */
.table-wrap{overflow-x:auto;margin:.4em 0 .2em}
.faq-table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:520px}
.faq-table th,.faq-table td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.faq-table th{background:var(--green-soft);color:var(--ink)}
.faq-table td:first-child{font-weight:600;white-space:nowrap}

/* Start-Hinweis (18+ / Haftung) */
html.agegate-open{overflow:hidden}
.agegate{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:rgba(20,40,25,.55);padding:18px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.agegate__box{background:var(--card);max-width:460px;width:100%;border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(0,0,0,.30);padding:26px 24px;max-height:92vh;overflow:auto}
.agegate__box h2{margin:0 0 .4em;font-size:1.35rem}
.agegate__lead{color:var(--ink);margin:0 0 .9em}
.agegate__list{margin:0 0 1em;padding-left:20px;color:var(--muted);font-size:.95rem}
.agegate__list li{margin:.4em 0}
.agegate__list strong{color:var(--ink)}
.agegate__confirm{background:var(--green-soft);border-radius:12px;padding:11px 13px;font-size:.92rem;margin:0 0 1.1em;color:var(--ink)}
.agegate__small{color:var(--muted);font-size:.82rem;text-align:center;margin:.9em 0 0}

/* Rechtstexte */
.legal{padding-top:6px}
.legal h1{font-size:1.6rem;margin:.2em 0 .6em}
.legal h2{font-size:1.12rem;margin:1.3em 0 .35em}
.legal p{color:var(--ink);margin:.2em 0 .8em}
.legal a{color:var(--green)}

/* Kontaktformular */
.contact-form{display:flex;flex-direction:column;gap:14px;margin:8px 0}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-weight:600}
.contact-form input[type=text],.contact-form input[type=email],.contact-form textarea{
  font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--green);border-color:var(--green)}
.contact-form .consent-row{flex-direction:row;align-items:flex-start;gap:9px;font-weight:400;font-size:.92rem;color:var(--muted)}
.contact-form .consent-row a{color:var(--green)}
.field-err{color:var(--danger);font-size:.85rem;font-weight:400}

.ad-slot{margin:18px auto;max-width:1040px;text-align:center}
.ad-slot .ad-label{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ad-slot .adsbygoogle{display:block;min-height:90px}
/* Werbeplatz-Platzhalter (Build-/Vorschau-Phase, config ad_preview) */
.ad-slot.ad-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:110px;border:2px dashed #c9d4cb;border-radius:14px;background:rgba(47,107,58,.035)}
.ad-ph-label{font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:.76rem;color:var(--muted)}
.ad-ph-sub{font-size:.73rem;color:var(--muted)}
.foot{max-width:680px;margin:0 auto;padding:24px 16px;color:var(--muted);font-size:.82rem;
  text-align:center}
.foot a{color:var(--muted)}

/* --- Konten & Memberbereich ------------------------------------------------ */
.topnav{display:flex;gap:16px;align-items:center}
.topnav a{color:var(--green);font-weight:600;text-decoration:none}
.topnav a.acct{padding:6px 12px;border:1px solid var(--green);border-radius:999px}
/* Hamburger-Button (nur Mobil sichtbar) -> Animation zu X wenn offen */
.navtoggle{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;background:none;border:0;cursor:pointer;padding:0;flex:none}
.navtoggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s,opacity .22s}
.topbar.nav-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.topbar.nav-open .navtoggle span:nth-child(2){opacity:0}
.topbar.nav-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:600px){
  /* sticky/Hintergrund kommen jetzt global von .topbar - hier nur noch das Burger-Menue */
  .navtoggle{display:flex}
  .topnav{position:absolute;top:calc(100% - 2px);left:16px;right:16px;z-index:70;flex-direction:column;
    align-items:stretch;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow);padding:8px;display:none}
  .topbar.nav-open .topnav{display:flex}
  .topnav a{padding:12px 14px;border-radius:10px;font-size:1.05rem}
  .topnav a:active{background:var(--accent-soft)}
  .topnav a.acct{border:1px solid var(--green);border-radius:999px;margin-top:4px;text-align:center;font-weight:700}
}

.auth-wrap{max-width:440px}
.auth-card{margin-top:18px}
.auth-tabs{display:flex;gap:6px;margin:-4px 0 16px}
.auth-tabs a{flex:1;text-align:center;padding:10px;border-radius:10px;text-decoration:none;
  color:var(--muted);font-weight:600;background:#f2f4f0}
.auth-tabs a.active{background:var(--green);color:#fff}
.auth-or{display:flex;align-items:center;text-align:center;color:var(--muted);margin:14px 0;font-size:.85rem}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-or span{padding:0 12px}
.auth-fine{font-size:.85rem;color:var(--muted);text-align:center;margin:.6em 0 0}
.btn.social{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600}
.btn.social .g{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;
  border-radius:50%;background:#fff;border:1px solid var(--line);color:#4285f4;font-weight:700}
.btn.social+.btn.social{margin-top:10px}
.btn.social.apple{background:#000;border-color:#000;color:#fff}
.btn.social.apple .a{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;color:#fff}
.btn.small{padding:8px 14px;font-size:.88rem}
.btn.danger{background:var(--danger);color:#fff}
.info{background:#eff8ff;border:1px solid #b2ddff;color:#175cd3;padding:12px 14px;border-radius:12px;margin:14px 0}
form label{display:block;margin:12px 0;font-weight:600}
form label small{font-weight:400;color:var(--muted)}
form input[type=text],form input[type=email],form input[type=password]{display:block;width:100%;
  margin-top:6px;padding:12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-weight:400}

.member{max-width:680px}
.member-head h1{font-size:1.5rem;margin:.2em 0}
.member-flash{margin:10px 0}
.verify-banner{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;padding:10px 14px;border-radius:12px;margin:12px 0;font-size:.92rem}
.member-tabs{display:flex;gap:6px;overflow-x:auto;margin:16px 0;padding-bottom:2px}
.member-tabs a{white-space:nowrap;padding:9px 14px;border-radius:999px;text-decoration:none;
  color:var(--muted);font-weight:600;background:#f2f4f0}
.member-tabs a.active{background:var(--green);color:#fff}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 16px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 10px;text-align:center}
.stat-card .num{display:block;font-size:1.3rem;font-weight:700;color:var(--green)}
.stat-card .lbl{display:block;font-size:.8rem;color:var(--muted);margin-top:4px}
.member-cta{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 20px}
.empty{color:var(--muted);text-align:center;padding:24px 0}

.scan-list{display:grid;gap:12px}
.scan-list.full{margin-top:8px}
.scan-card{position:relative;display:flex;gap:12px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:12px}
.scan-card img,.scan-noimg{width:72px;height:72px;border-radius:10px;object-fit:cover;flex:none}
.scan-noimg{display:flex;align-items:center;justify-content:center;background:#f2f4f0;font-size:1.6rem}
.scan-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.scan-meta small{color:var(--muted)}
.scan-lex-link{color:inherit;text-decoration:none}
.scan-lex-link:hover,.scan-lex-link:focus{color:var(--green,#2e7d4f);text-decoration:underline}
.scan-thumb-link{flex:none;display:block;line-height:0;border-radius:10px;overflow:hidden}
.scan-thumb-link:hover{opacity:.92}

/* Preise */
.pricing-page{max-width:960px;margin:0 auto;padding:8px 16px 44px}
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;align-items:stretch}
@media(max-width:700px){.pricing{grid-template-columns:1fr}}
.price-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:26px 24px;display:flex;flex-direction:column}
.price-card.featured{border-color:var(--green,#2e7d4f);box-shadow:0 14px 38px rgba(46,125,79,.16)}
.price-badge{position:absolute;top:-12px;left:24px;background:var(--green,#2e7d4f);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.price-name{font-size:1.15rem;font-weight:700;margin:0;color:var(--ink)}
.price-amount{display:flex;align-items:baseline;gap:7px;margin:12px 0 2px;flex-wrap:wrap}
.price-amount .amt{font-size:2.3rem;font-weight:800;line-height:1;color:var(--ink)}
.price-amount .per{color:var(--muted);font-size:.92rem}
.price-sub{color:var(--muted);font-size:.88rem;margin:0 0 18px;min-height:2.4em}
.price-feats{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:11px}
.price-feats li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.4}
.price-feats li::before{content:"✓";color:var(--green,#2e7d4f);font-weight:800;flex:none}
.price-card .btn{margin-top:auto}
.price-fine{max-width:760px;margin:24px auto 0;color:var(--muted);font-size:.82rem;text-align:center;line-height:1.6}
.price-fine a{color:inherit}

/* Startseiten-Hero-Bild (Featurette) */
.hero-figure{margin:20px 0 6px}
.featurette-image,.img-responsive{max-width:100%;height:auto}
.featurette-image{display:block;width:100%;border-radius:16px;box-shadow:0 14px 34px rgba(30,50,35,.16)}

/* Bestimmen-Gate (App: Rewarded-Werbung vor der Gratis-Bestimmung) */
.adgate{text-align:center;max-width:440px;margin:0 auto}
.adgate h3{margin:0 0 8px}
/* Als Layer/Modal - immer im Blick, unabhaengig von der Scrollposition */
.adgate-overlay{position:fixed;inset:0;z-index:2000;display:flex;justify-content:center;
  padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:rgba(20,30,22,.62);backdrop-filter:blur(2px)}
/* margin:auto zentriert bei Platz UND laesst bei zu hohem Inhalt oben+unten scrollen
   (align-items:center wuerde den oberen Rand abschneiden). */
.adgate-modal{width:100%;max-width:360px;margin:auto;text-align:center;
  animation:adgateIn .18s ease-out}
/* Nativer AdMob-Banner unten: Modal-Inhalt nicht dahinter verstecken. */
body.has-native-banner .adgate-overlay{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
/* Kurze Displays: kompakter, damit ohne Scrollen oben+unten alles sichtbar bleibt. */
@media (max-height:760px){
  .adgate-modal p{margin:.4em 0}
  .adgate-modal .appgate-or{margin:11px 0 9px}
  .adgate-pro{padding:15px 14px 13px}
  .adgate-pro h3{margin:.1em 0 .35em;font-size:1.06rem}
  .adgate-pro .upsell-list li{padding:3px 0 3px 24px}
  .adgate-pro .upsell-price{font-size:1.3rem;margin:.1em 0}
  .adgate-pro .abo-hint{margin:2px 0 11px}
  .adgate-close{margin-top:8px}
}
.adgate-modal h3{margin:0 0 8px}
.adgate-close{display:block;width:100%;margin-top:12px;background:none;border:0;
  color:var(--muted);font-size:.9rem;cursor:pointer;padding:4px}
.adgate-close:hover{color:var(--ink)}
@keyframes adgateIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
/* Platz fuer den nativen AdMob-Banner (App, unten) - verhindert Verdecken von Inhalt */
body.has-native-banner{padding-bottom:64px}
/* A-Z-Index im Lexikon (interne Verlinkung / Crawl-Tiefe) */
.az-index{margin:36px 0 8px;border-top:1px solid var(--line);padding-top:22px}
.az-index h2{font-size:1.1rem;margin:0 0 12px}
.az-list{list-style:none;margin:0;padding:0;columns:200px;column-gap:26px}
.az-list li{break-inside:avoid;margin:0 0 5px}
.az-list a{color:var(--ink);text-decoration:none;font-size:.95rem;line-height:1.35}
.az-list a:hover{color:var(--ok);text-decoration:underline}
/* Related-Arten-Grid etwas kompakter als die Hauptliste (optional) */
.art-grid-rel{margin-top:4px}
.note-form{display:flex;gap:6px;margin-top:6px}
.note-form input[type=text]{margin-top:0}
.scan-del{position:absolute;top:8px;right:8px;margin:0}
.icon-btn{appearance:none;border:1px solid var(--line);background:#fff;color:var(--muted);
  width:30px;height:30px;border-radius:8px;cursor:pointer;line-height:1}
.icon-btn:hover{color:var(--danger);border-color:#fecdca}

.fav-list{display:grid;gap:12px}
.fav-card{position:relative;display:grid;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:12px;padding-right:46px}
.fav-main{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
.fav-main img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none}

.profile-form label input[disabled]{background:#f6f7f3;color:var(--muted)}
.danger-zone{margin-top:18px;border-color:#fecdca}
.danger-zone h3{margin:.1em 0 .4em;color:var(--danger)}

/* Favoriten-Herz auf Steckbriefen */
.fav-btn{display:inline-flex;align-items:center;gap:8px;appearance:none;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font:inherit;
  font-weight:600;color:var(--muted)}
.fav-btn.is-fav{background:#fff1f3;border-color:#fecdd6;color:#c01048}
.fav-btn .heart{font-size:1.1rem;line-height:1}

/* --- Lexikon: Filter, Suche, Sortierung, Paginierung ---------------------- */
.filterbar{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.filterbar .chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  text-decoration:none;font-size:.9rem;font-weight:600;color:var(--ink);
  background:#fff;border:1px solid var(--line)}
.filterbar .chip span{font-weight:600;color:var(--muted);font-size:.82rem}
.filterbar .chip.active{background:var(--green);color:#fff;border-color:var(--green)}
.filterbar .chip.active span{color:#dff0e3}
.filterbar .chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--line)}
.filterbar .chip.ed-essbar::before{background:#12b76a}
.filterbar .chip.ed-bedingt_essbar::before{background:#84cc16}
.filterbar .chip.ed-ungeniessbar::before{background:#98a2b3}
.filterbar .chip.ed-giftig::before{background:#f97316}
.filterbar .chip.ed-toedlich::before{background:#b42318}
.filterbar .chip:not(.ed-essbar):not(.ed-bedingt_essbar):not(.ed-ungeniessbar):not(.ed-giftig):not(.ed-toedlich)::before{display:none}

.lex-toolbar{display:flex;gap:10px;margin:14px 0 6px;flex-wrap:wrap}
.lex-search-wrap{position:relative;flex:1;min-width:160px}
.lex-toolbar #lexSearch{width:100%;min-width:0;padding:11px 14px;border:1px solid var(--line);
  border-radius:10px;font:inherit;background:#fff}
.lex-toolbar #lexSort{padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
.lex-toolbar .lex-search-btn{white-space:nowrap;padding-left:22px;padding-right:22px}
.lex-count{color:var(--muted);font-size:.95rem;font-weight:600;margin:6px 2px}
/* Autocomplete-Vorschlaege im Lexikon (Google-Stil) */
.lex-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;margin:0;padding:6px;list-style:none;
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);max-height:360px;overflow-y:auto}
.lex-suggest li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer}
.lex-suggest li.active{background:var(--accent-soft)}
@media(hover:hover){.lex-suggest li:hover{background:var(--accent-soft)}}
.lex-suggest .ls-thumb{width:40px;height:40px;border-radius:9px;object-fit:cover;flex:none;background:var(--green-soft)}
.lex-suggest .ls-body{min-width:0;flex:1}
.lex-suggest .ls-name{display:block;font-weight:600;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lex-suggest .ls-name mark{background:transparent;color:var(--accent);font-weight:800;padding:0}
.lex-suggest .ls-lat{display:block;font-size:.8rem;color:var(--muted);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lex-suggest .badge{flex:none}
.lex-suggest .ls-empty{padding:12px 10px;color:var(--muted);cursor:default}

.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin:22px 0 4px}
.pager .pg{min-width:38px;text-align:center;padding:8px 10px;border:1px solid var(--line);
  border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;background:#fff}
.pager .pg.active{background:var(--green);color:#fff;border-color:var(--green)}
.pager .pg-gap{color:var(--muted);padding:0 2px}

/* --- PRO-Upsell bei erreichtem Limit -------------------------------------- */
.upsell{text-align:center;border-color:#cfe6d6;background:linear-gradient(180deg,#f6fbf7,#fff)}
.upsell h3{margin:.1em 0 .3em;font-size:1.2rem;color:var(--green-dark)}
.upsell-lead{margin:.8em 0 .5em}
.upsell-list{list-style:none;padding:0;margin:0 auto .6em;text-align:left;display:inline-block}
.upsell-list li{padding:5px 0 5px 26px;position:relative}
.upsell-list li::before{content:"✓";position:absolute;left:0;top:5px;color:var(--green);font-weight:700}
.upsell-price{font-size:1.5rem;font-weight:700;color:var(--green);margin:.3em 0 .5em}

/* --- Scan-Ergebnis: Links zu Steckbriefen --------------------------------- */
.result a.cand-name{color:var(--green-dark);text-decoration:none;border-bottom:1px solid #cfe6d6}
.result a.cand-name:hover{border-bottom-color:var(--green)}
.confusions a{color:var(--green)}

/* Memberbereich: Unterzeile links buendig (nicht zentriert wie globale .sub) */
.member-head .sub{margin:.2em 0 0;max-width:none;text-align:left}

/* Cookie-Consent (orestbida) an die Marke anpassen */
#cc-main{
  --cc-font-family:var(--font-body);
  --cc-btn-primary-bg:var(--green);
  --cc-btn-primary-color:#fff;
  --cc-btn-primary-hover-bg:var(--green-dark);
  --cc-btn-primary-hover-color:#fff;
  --cc-btn-border-radius:12px;
  --cc-modal-border-radius:16px;
  --cc-link-color:var(--green-dark);
  --cc-toggle-on-bg:var(--green);
}
#cc-main .cm__title,#cc-main .pm__title{font-family:var(--font-head)}

/* PRO-Status-/Upgrade-Banner im Mein-Bereich */
.pro-banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--accent-soft);border:1px solid #efd6ad;border-radius:var(--radius);
  padding:16px 20px;margin:4px 0 18px}
.pro-banner.is-pro{background:var(--green-soft);border-color:#cfe6d6}
.pro-banner-emblem{width:46px;height:46px;flex:none}
.pro-banner-emblem img{width:100%;height:100%;display:block;border-radius:12px}
.pro-banner-body{flex:1;min-width:220px}
.pro-banner-title{display:block;font-family:var(--font-head);font-size:1.12rem}
.pro-banner-body p{margin:.25em 0 0;font-size:.93rem;color:#6b5526}
.pro-banner.is-pro .pro-banner-body p{color:#2c4733}
.pro-banner-cta{margin:0;flex:none}
@media(max-width:560px){.pro-banner-cta,.pro-banner-cta .btn{width:100%}}

/* --- Startseite: breiteres, gestaltetes Layout ---------------------------- */
.home{max-width:1040px;
  background:radial-gradient(72% 240px at 50% -30px,rgba(46,125,79,.09),transparent 70%)}
.home .hero{padding:36px 0 6px}
.home .hero h1{max-width:20ch;margin-left:auto;margin-right:auto}
.eyebrow{display:inline-flex;align-items:center;gap:7px;background:var(--green-soft);color:var(--green-dark);
  font-weight:600;font-size:.85rem;padding:6px 14px;border-radius:999px;margin-bottom:14px}
.home-col{max-width:620px;margin:0 auto}
.dz-sub{color:var(--muted);font-size:.9rem}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:40px 0 6px}
.feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 18px;text-align:center;box-shadow:var(--shadow-sm)}
.feature .fic{display:inline-flex;width:48px;height:48px;border-radius:14px;background:var(--green-soft);
  color:var(--green-dark);align-items:center;justify-content:center;margin-bottom:12px}
.feature strong{display:block;font-family:var(--font-head);font-size:1.12rem;margin-bottom:2px}
.feature>span{color:var(--muted);font-size:.92rem}
.home-lex{margin:44px 0 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px}
.sec-head h2{font-size:1.6rem;margin:0}
.sec-head a{color:var(--green-dark);font-weight:600;text-decoration:none;white-space:nowrap}
.home .pro{max-width:680px;margin-left:auto;margin-right:auto}
@media(max-width:640px){.features{grid-template-columns:1fr;gap:12px}.home .hero{padding:24px 0 4px}}

/* Ratgeber/Magazin */
.rg-meta{color:var(--muted);font-size:.9rem;margin:14px 0 6px}
.rg-cat{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green-dark);background:var(--accent-soft);border-radius:999px;padding:3px 10px}
.rg-article{max-width:720px}
.rg-article h1{margin:.15em 0 .3em}
.prose{color:var(--ink);font-size:1.05rem;line-height:1.7}
.prose h2{font-family:var(--font-head);font-size:1.35rem;margin:1.5em 0 .4em}
.prose h3{font-family:var(--font-head);font-size:1.1rem;margin:1.2em 0 .3em}
.prose p{margin:.7em 0}
.prose ul,.prose ol{margin:.7em 0;padding-left:1.4em}
.prose li{margin:.4em 0}
.prose a{color:var(--green-dark);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--green)}
.prose em{font-style:italic}
.ratgeber-note{margin-top:1.8em;padding:12px 14px;background:var(--green-soft);border-radius:12px;font-size:.92rem;color:var(--ink)}
.rg-grid{display:grid;gap:14px;margin:18px 0;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.rg-card{display:flex;flex-direction:column;gap:8px;padding:16px 18px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s}
.rg-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.rg-card .rg-cat{align-self:flex-start}
.rg-title{font-family:var(--font-head);font-weight:700;font-size:1.08rem;color:var(--ink);line-height:1.28}
.rg-lead{color:var(--muted);font-size:.92rem;line-height:1.45}
.rg-read{color:var(--green-dark);font-weight:600;font-size:.85rem;margin-top:auto}
.rg-more{margin-top:36px}
.rg-more h2{font-size:1.25rem;margin:0 0 12px}

/* App-/PRO-Funnel-Banner (Phase Browser=Pro-only) */
.app-banner{display:flex;align-items:center;gap:14px;margin:18px 0;padding:14px 16px;cursor:pointer;
  background:linear-gradient(135deg,#f1faf3,#e6f4ea);border:1px solid #cfe6d6;border-radius:16px;
  box-shadow:0 2px 10px rgba(46,125,79,.07);transition:transform .15s,box-shadow .15s,border-color .15s;text-align:left}
.app-banner:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(46,125,79,.14);border-color:#b6dbc2}
.app-banner:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.app-banner-ic{flex:none;width:44px;height:44px;border-radius:12px;object-fit:cover;
  box-shadow:0 1px 5px rgba(46,125,79,.20)}
.app-banner-tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.app-banner-tx strong{color:var(--green-dark);font-family:var(--font-head);font-size:1.02rem;line-height:1.25}
.app-banner-tx span{color:#5c7a64;font-size:.9rem;line-height:1.3}
.app-banner-cta{flex:none;display:inline-flex;align-items:center;gap:5px;padding:8px 15px;border-radius:999px;
  background:var(--green);color:#fff;font-weight:700;font-size:.9rem;white-space:nowrap}
.app-banner-cta::after{content:"\203a";font-size:1.05em;line-height:0}
.app-banner:hover .app-banner-cta{background:var(--green-dark)}
@media(max-width:480px){
  .app-banner-cta{padding:8px 12px}
  .app-banner-cta span{display:none}   /* nur Pfeil auf sehr schmalen Screens */
}

/* App-/PRO-Dialog: Feinschliff (Buttons + Preis-Caption + Trenner) */
.adgate-modal .btn+.btn{margin-top:10px}
.btn-cap{display:block;text-align:center;color:var(--muted);font-size:.82rem;margin:7px 0 2px;line-height:1.35}
.appgate-or{display:flex;align-items:center;gap:12px;margin:18px 0 12px;color:var(--muted);
  font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.appgate-or::before,.appgate-or::after{content:"";flex:1;height:1px;background:var(--line)}
/* Offizielle Store-Badges im App-Funnel (Google Play + App Store), untereinander mittig.
   196px Apple = gleiche sichtbare Hoehe wie 220px Play (dessen PNG hat oben/unten Rand). */
.gp-badge{display:inline-block;margin:4px auto 0;line-height:0}
.gp-badge img{width:220px;height:auto;max-width:100%}
.store-badges{display:flex;flex-direction:column;align-items:center;gap:4px;margin:4px 0 2px}
.as-badge{display:inline-block;line-height:0}
.as-badge img{width:196px;height:auto;max-width:100%}
.appgate-ios{margin:12px 0 2px;color:var(--muted);font-size:.85rem;line-height:1.4}
/* Akzent-Button (PRO-CTA, hebt sich vom Gruen ab) */
.btn.accent{background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(224,136,60,.28)}
.btn.accent:hover{background:#c9762e;color:#fff;transform:translateY(-1px)}
/* Prominente PRO-Karte im Bestimmen-Gate */
.adgate-pro{position:relative;border:1px solid #cfe6d6;border-radius:14px;
  padding:20px 16px 16px;margin:2px 0 10px}
.adgate-pro h3{margin:.1em 0 .5em;font-size:1.15rem;color:var(--green-dark)}
.adgate-pro .upsell-list{display:inline-block;margin-bottom:.55em}
.adgate-pro .upsell-price{margin:.2em 0 .1em}
.pro-per{font-size:.95rem;font-weight:600;color:var(--muted)}
.pro-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.03em;
  padding:3px 12px;border-radius:999px;text-transform:uppercase;white-space:nowrap}

/* Gratis-Tageszähler + Werbe-Hinweis im Uploader (nur App) */
.scan-quota{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
  width:fit-content;max-width:100%;margin:4px auto 14px;padding:8px 16px;
  background:var(--green-soft);border:1px solid #d4e6d4;border-radius:14px}
.scan-quota .sq-count{font-size:.92rem;color:#284a31}
.scan-quota .sq-count b{color:var(--green-dark);font-weight:800}
.scan-quota .sq-hint{font-size:.8rem;color:#5c7a64}
.scan-quota .sq-hint a{color:var(--green-dark);font-weight:700}
.scan-quota.empty{background:var(--accent-soft);border-color:#efd6ad}
.scan-quota.empty .sq-count{color:#7a4a12}

/* --- Schliessbare Hinweis-Layer (X oben rechts; Merker 3 Tage per Cookie, siehe lib/seo.php) ---
   Bewusst am Dateiende: .app-banner weiter oben setzt padding und wuerde eine frueher
   deklarierte padding-Regel sonst ueberschreiben. */
.dismissable{position:relative;padding-right:44px}
.app-banner.dismissable{padding-right:44px}
.lay-x{position:absolute;top:8px;right:8px;width:26px;height:26px;padding:0;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.72);color:#5c7a64;transition:background .15s,color .15s}
.lay-x:hover{background:#fff;color:#284a31}
.lay-x:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* --- iOS Safe-Area (Notch/Dynamic Island) -------------------------------------
   index.php/404.php setzen `viewport-fit=cover`; damit reicht der Viewport unter die
   Statusleiste. Ohne Polster lag die Kopfleiste (und damit der Burger-Button) auf dem
   iPhone 13 UNTER der Statusleiste - Taps kamen dort nie an, das Menue liess sich nicht
   oeffnen. `env(...)` ist im Browser/Android 0 -> dort aendert sich nichts.
   Als Variable, damit der Wert testbar ueberschrieben werden kann. */
:root{--sat:env(safe-area-inset-top,0px)}
.topbar{padding-top:calc(14px + var(--sat))}
html{scroll-padding-top:calc(74px + var(--sat))}
/* Unten/seitlich: seit ALLE Seiten `viewport-fit=cover` setzen, reicht der Inhalt auch in die
   untere Safe-Area (Home-Indikator) und in Landschaft neben die Notch. Ohne Polster liefe der
   Footer darunter. Web/Android: env() = 0 -> unveraendert. Die AdMob-Banner-Variante (unten
   64px Platz) muss das Polster mitnehmen, sonst ueberlappt der Banner den Inhalt. */
:root{--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
body{padding-bottom:var(--sab);padding-left:var(--sal);padding-right:var(--sar)}
body.has-native-banner{padding-bottom:calc(64px + var(--sab))}
/* Store-Badges im Footer (nur Browser, siehe pilz_store_badges) - nebeneinander, umbrechend.
   160px Play = sichtbare Hoehe 47,6px; Apple bei 142px (Ratio 2,99) = 47,5px -> gleich hoch. */
.foot-apps{margin:0 0 16px;text-align:center}
.foot-apps-t{display:block;color:var(--muted);font-size:.88rem;margin-bottom:6px}
.store-badges.row{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
.store-badges.row .gp-badge{margin:0}
.store-badges.row .gp-badge img{width:160px}
.store-badges.row .as-badge img{width:142px}
/* Blockierende Overlays muessen die Safe-Area respektieren, seit alle Seiten `viewport-fit=cover`
   setzen: 100vh/inset:0 reichen nun bis an die physischen Raender. Ohne Polster lag im Querformat
   der einzige Bestaetigungs-Button der Altersabfrage unter dem Home-Indikator. */
.agegate{padding:calc(18px + var(--sat)) calc(18px + var(--sar)) calc(18px + var(--sab)) calc(18px + var(--sal))}
.agegate__box{max-height:calc(92vh - var(--sat) - var(--sab))}
.adgate-overlay{padding-top:calc(16px + var(--sat));
  padding-left:calc(16px + var(--sal));padding-right:calc(16px + var(--sar))}
/* Textlink-artiger Button ("Kaeufe wiederherstellen" im PRO-Banner, Apple-Richtlinie 3.1.1) */
.pro-restore{margin:8px 0 0;font-size:.9rem;color:var(--muted);text-align:center}
/* Deutlich sichtbarer Ausweg fuer "habe bezahlt, sehe aber Free". Bewusst warnfarbig statt gruen:
   Es ist ein Problemhinweis, kein Werbeblock - als blasser Link wurde er uebersehen. */
.pro-restore-box{margin:12px 0 0;padding:14px 16px;border:1px solid #e6c78a;border-radius:14px;
  background:linear-gradient(180deg,#fffaf0,#fff5e3)}
.pro-restore-title{display:block;font-size:1rem;color:#7a4e00;margin-bottom:4px}
.pro-restore-box p{margin:0 0 10px;font-size:.9rem;color:#6b5525;line-height:1.45}
.pro-restore-btn{width:100%;background:#8a5a00;border-color:#8a5a00;color:#fff;font-weight:700}
.pro-restore-btn:hover,.pro-restore-btn:focus{background:#6f4800;border-color:#6f4800;color:#fff}
/* Bestaetigungsseite: Der Mail-Link oeffnet den Browser, nicht die App (echte Universal Links
   brauchen ein neues App-Build). Darum hier ausdruecklich sagen, dass alles erledigt ist. */
.verify-app{margin:14px 0;padding:14px 16px;border:1px solid #cfe3cf;border-radius:14px;
  background:#f1f8f1;text-align:left}
.verify-app strong{display:block;color:var(--green-dark);margin-bottom:4px}
.verify-app p{margin:0;font-size:.9rem;line-height:1.45;color:var(--muted)}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--green-dark);
  text-decoration:underline;cursor:pointer}
.linklike:hover{color:var(--green)}
/* Honigtopf-Feld der Registrierung: fuer Menschen unsichtbar, fuer Bots sichtbar.
   Bewusst NICHT display:none - manche Bots ueberspringen versteckte Felder. */
.hp-field{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important}
/* Direktsuche auf den Steckbrief-Seiten (kompakte Variante der Lexikon-Suche) */
.lex-mini{display:flex;gap:8px;align-items:stretch;margin:10px 0 18px}
.lex-mini .lex-search-wrap{flex:1;min-width:0}
.lex-mini input[type=search]{width:100%;padding:11px 14px;border:1px solid var(--line);
  border-radius:12px;font:inherit;background:var(--card)}
.lex-mini input[type=search]:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.lex-mini .lex-search-btn{flex:none;padding:11px 18px;border-radius:12px}
.lex-suggest li.is-active{background:var(--green-soft)}
@media (max-width:480px){ .lex-mini .lex-search-btn{padding:11px 14px} }
/* Scan-Karte: Klick auf Bild/Name klappt das gespeicherte Ergebnis auf (statt ins Lexikon zu springen) */
.scan-open{background:none;border:0;padding:0;font:inherit;color:var(--green-dark);
  text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.scan-open:hover{color:var(--green)}
.scan-open::after{content:" ›";text-decoration:none;display:inline-block}
.scan-open[aria-expanded="true"]::after{content:" ⌄"}
button.scan-thumb-link{background:none;border:0;padding:0;cursor:pointer;display:block}
/* .scan-card ist ein Flex-Container: das Panel muss auf eine eigene, volle Zeile umbrechen. */
.scan-card{flex-wrap:wrap}
.scan-result{flex:0 0 100%;width:100%;margin:10px 0 2px;padding-top:10px;border-top:1px solid var(--line)}
.scan-result .card{margin-bottom:8px}
.scan-result .card:last-child{margin-bottom:0}
/* Beim automatischen Scrollen nach "Bestimmen" darf die sticky Kopfleiste das Foto nicht verdecken. */
#previewWrap,#dropzone{scroll-margin-top:calc(84px + var(--sat))}
/* Zurueck-Button in der App-Kopfleiste (native.js fuegt ihn nur im Capacitor-WebView ein).
   44px Tippflaeche = Apple/Google-Mindestmass; -8px Margin holt den optischen Rand zurueck. */
.appback{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-8px 2px -8px -10px;padding:0;border:0;border-radius:50%;
  background:none;color:var(--green-dark);cursor:pointer}
.appback:hover{background:var(--green-soft)}
.appback:active{background:#dfeade}
.appback:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* Mit Zurueck-Button wird es links enger - Navigation darf umbrechen statt zu ueberlaufen. */
.topbar.has-back{gap:4px}
.topbar.has-back .topnav{gap:12px}
/* Hinweis fuer PRO-Nutzer ohne Konto (Gast-Kauf in der App): Abo haengt nur am Geraet/Store-Konto. */
.guest-pro-note{position:relative;background:var(--accent-soft);border:1px solid #efd6ad;
  border-radius:var(--radius);padding:14px 16px;margin:12px 0}
.guest-pro-note strong{display:block;color:#7a4a12;margin-bottom:4px}
.guest-pro-note p{margin:0 0 10px;font-size:.94rem;color:#5c4a2e}
.guest-pro-note .btn{padding:9px 16px;font-size:.95rem}