/* ============================================================================
   assets/seiten/start.css – Seitenstile aus index.php
   (Bauauftrag A-2, docs/konzept-meldeweg-foto-zuerst-2026-11-08.md, 08.11.2026).
   Bis dahin standen diese Regeln als <style>-Block in der Seite; verschoben ohne
   Änderung, Reihenfolge wie im Dokument. Tokens (--gold, --fs-md …) kommen aus dem
   einen :root in style.css (Seiten ohne style.css: includes/tokens.php).
   ============================================================================ */

/* ── aus index.php, bis 08.11.2026 ab Zeile 631 ── */
.nav-help-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.15rem;border-radius:99px;font-size:.9rem;font-weight:700;letter-spacing:.04em;font-family:inherit;cursor:pointer;border:none;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.nav-help-pill:hover{transform:translateY(-1px)}
.nav-help-pill.gold{background:linear-gradient(135deg,var(--gold),var(--gold-lt));color:#10261a;box-shadow:0 2px 14px rgba(201,168,76,.3)}
.nav-help-pill.gold:hover{box-shadow:0 5px 22px rgba(201,168,76,.45)}
.nav-help-pill.outline{background:transparent;color:var(--gold);border:1.5px solid rgba(201,168,76,.7)}
.nav-help-pill.outline:hover{background:rgba(201,168,76,.12)}
.nav-help-pill.dark{background:#0F2D1E;color:var(--gold-lt);border:1.5px solid rgba(201,168,76,.45);box-shadow:0 2px 12px rgba(0,0,0,.25)}
.nav-help-pill.dark:hover{background:#16402C}
/* Schwebende Hilfe-Blase unten rechts (Desktop) – Heimat von KI-Chat + Feedback */
#fygc-fab{position:fixed;bottom:1.2rem;right:1.2rem;z-index:1001;display:flex;flex-direction:column;align-items:flex-end;gap:.55rem}
#fygc-fab .fab-a{display:none}
#fygc-fab.open .fab-a{display:inline-flex;animation:fabIn .18s ease both}
@keyframes fabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#fygc-fab .fab-main{width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,var(--gold),var(--gold-lt));color:#10261a;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.3);transition:transform .2s,box-shadow .2s}
#fygc-fab .fab-main:hover{transform:scale(1.06);box-shadow:0 6px 24px rgba(201,168,76,.5)}
/* Match-Chat als Fenster über der Seite (08.08.2026).
   ⚠ ZWILLING zu #hlpw-chatw* in includes/help_widget.php – die Startseite hat ihr
   eigenes Hilfe-Widget und hatte den Chat-Knopf vom 07.08. darum als EINZIGE Seite
   nicht. Maße und Verhalten bewusst identisch; bei Änderung beide anpassen. */
#fygc-fab .fab-chat{display:inline-flex}
#sm-chatw{display:none;position:fixed;inset:0;z-index:10002;background:rgba(8,21,16,.45)}
#sm-chatw-box{position:absolute;right:1rem;bottom:1rem;width:min(440px,calc(100vw - 2rem));height:min(700px,calc(100vh - 2rem));background:#F8F4EC;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.4);display:flex;flex-direction:column;overflow:hidden}
#sm-chatw-head{display:flex;align-items:center;gap:.8rem;background:#0F2D1E;color:#fff;padding:.65rem 1rem;font-family:-apple-system,Segoe UI,Roboto,sans-serif;font-size:.88rem}
#sm-chatw-head a{color:rgba(255,255,255,.55);font-size:.72rem;text-decoration:underline;white-space:nowrap}
#sm-chatw-close{background:none;border:none;color:#fff;font-size:1.15rem;cursor:pointer;line-height:1;padding:.15rem .3rem}
#sm-chatw-frame{flex:1;border:none;width:100%;background:#F8F4EC}
@media (max-width:768px){#sm-chatw-box{inset:0;width:100%;height:100%;border-radius:0}}
/* Nach-oben-Button ÜBER dem Chat-Button stapeln (18.07.26).
   Beide sind fix unten rechts: #scrollTop lag mit bottom/right 2rem praktisch deckungsgleich
   HINTER dem goldenen FAB (z-index 500 vs. 1001) und lugte als zweiter, dunkelgrüner Kreis
   hervor. Er erscheint erst beim Scrollen (.show), deshalb fiel es nur zeitweise auf.
   Rechnung: FAB-Unterkante 1.2rem + 54px Höhe + .6rem Abstand. Waagerecht mittig zum FAB:
   dessen Mitte liegt bei right 1.2rem+27px, der 42px breite Button also bei +6px.
   ⚠ Ändert sich die FAB-Größe, hier mitziehen. */
#scrollTop{bottom:calc(1.2rem + 54px + .6rem);right:calc(1.2rem + 6px)}
/* Mobil (A-3, 08.11.2026, Marc): Chat-Blase und „Dein Chat"-Pille entfallen – die feste Leiste
   unten (includes/leiste.php: Verlust melden / Fund melden / Chat / Sprache) öffnet KI-Chat bzw.
   Match-Chat. Feedback bleibt über das Menü ☰ erreichbar. Am Rechner bleibt die Blase wie bisher. */
@media(max-width:768px){
  .nav-help-pill{display:none}
  #fygc-fab{display:none}
  /* Nach-oben-Knopf über der Leiste (52px Knopf + 2×10px Rand + Gerätekante) */
  #scrollTop{bottom:calc(72px + .6rem + env(safe-area-inset-bottom));right:.7rem}
  /* Golfsymbol am Seitenende lag hinter dem Nach-oben-Knopf (13.10.26): Platz in dessen Höhe. */
  .footer-bottom{padding-bottom:calc(42px + 1rem)}
}

/* ── aus index.php, bis 08.11.2026 ab Zeile 933 ── */
      /* .hero-club-strip (Club-Kasten im Hero): seit Paket 1 (08.11.2026) ist die Club-Frage die Überschrift des Club-Teasers. */
      

/* ── aus index.php, bis 08.11.2026 ab Zeile 984 ── */
      .hero-links{display:flex;flex-wrap:wrap;align-items:center;column-gap:1.4rem}
      .hero-unten .hero-map-link{margin-top:0}
      .hero-bag-sub{flex-basis:100%;margin:.35rem 0 0;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.82);max-width:34rem}
      .hero-map-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;font-size:.95rem;font-weight:600;color:var(--gold-lt);text-decoration:none;border-bottom:1px solid rgba(228,200,122,.45);padding-bottom:.15rem}
      .hero-map-link:hover{color:#fff;border-bottom-color:#fff}
      

/* ── aus index.php, bis 08.11.2026 ab Zeile 1010 ── */
  /* Board im Stil des Club-Portals (10.10.2026, Entscheid: „Startseite genauso sauber"). Bewusst hier
     und nicht in style.css (die bleibt in Ruhe): Rand statt Schatten, Titel in der Grundschrift,
     eine Schriftgröße je Spalte. Auf dem Handy wird jede Zeile eine Karte: Art fett, darüber die
     Kennzeichen und rechts das Datum, darunter Platz und Partner-Pille. Reihenfolge per Grid,
     das Markup bleibt eine Tabelle (Screenreader, Klickziel je Zeile). */
  #reports .listings-table{border-radius:14px}
  #reports .listings-table thead th{padding:.7rem 1.1rem}
  #reports .listings-table td{padding:.75rem 1.1rem;font-size:.95rem}
  #reports .lt-title{font-family:inherit;font-size:1rem;font-weight:700;line-height:1.3}
  #reports .lt-badge{font-size:.8rem;padding:.25rem .7rem}
  #reports .lt-club{font-size:.85rem;padding:.25rem .7rem}
  @media (max-width:768px){
    #reports .listings-table{background:transparent;border-radius:0;overflow:visible}
    #reports .listings-table tbody{display:flex;flex-direction:column;gap:.6rem}
    #reports .listings-table tbody tr{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.2rem .8rem;
      padding:.85rem 1rem;background:#fff;border:1.5px solid #eae4d8;border-radius:12px;border-bottom:1.5px solid #eae4d8}
    #reports .listings-table td{padding:0;font-size:.9rem}
    #reports .listings-table td:nth-child(1){grid-column:1;grid-row:1}
    #reports .listings-table td:nth-child(4){grid-column:2;grid-row:1;font-size:.85rem;text-align:right}
    #reports .listings-table td:nth-child(2){grid-column:1/-1;grid-row:2;padding-top:.25rem}
    #reports .listings-table td:nth-child(3){grid-column:1/-1;grid-row:3}
    #reports .listings-table td:nth-child(5){grid-column:1/-1;grid-row:4}
    #reports .listings-table td:nth-child(5):not(:empty){padding-top:.35rem}
    #reports .lt-title{font-size:1.05rem}
  }
  /* 25.10.2026 (Entscheid: „stylisch, wertig, nobel", wie Partner-Kacheln und Weltkarte): Goldränder statt Beige,
     Tabellenkopf dunkelgrün mit Goldschrift, Schlägerart in Cormorant, Kennzeichen mit feinem Rand,
     Partner-Pille weiß mit Goldrand, Suche und Filter in Grün/Gold. Ziffern (Datum, Zähler) bleiben Inter. */
  #reports .lh-map{background:linear-gradient(180deg,#FFFEFB,#FAF5EA);border:1px solid rgba(201,168,76,.6);box-shadow:0 10px 22px -16px rgba(15,31,22,.5);transition:border-color .2s ease,box-shadow .2s ease}
  #reports .lh-map:hover{border-color:var(--gold);box-shadow:0 12px 26px -14px rgba(15,31,22,.55),0 0 18px -8px rgba(201,168,76,.6)}
  #reports .board-search{border:1px solid rgba(201,168,76,.6);background:linear-gradient(180deg,#FFFEFB,#FCF9F2);box-shadow:0 14px 30px -22px rgba(15,31,22,.55),inset 0 1px 0 #fff}
  #reports .board-search:focus-within{border-color:var(--gold);box-shadow:0 14px 30px -20px rgba(15,31,22,.6),0 0 0 3px rgba(201,168,76,.18)}
  #reports .board-search-ico{color:var(--gold-ink)}
  #reports .board-search-btn{background:linear-gradient(180deg,#1f4a35,#163828);color:var(--gold-lt);box-shadow:inset 0 0 0 1px rgba(201,168,76,.55),0 6px 14px -8px rgba(15,31,22,.6)}
  #reports .board-search-btn:hover{color:#fff;background:linear-gradient(180deg,#24563E,#163828)}
  #reports .board-chip{background:#fff;border:1px solid rgba(201,168,76,.45);color:#0F2D1E;box-shadow:0 1px 2px rgba(15,31,22,.06)}
  #reports .board-chip:hover{background:#163828;border-color:var(--gold);color:var(--gold-lt)}
  #reports .board-chip span{color:var(--gold-ink)}
  #reports .board-chip:hover span{color:var(--gold-lt)}
  #reports .filter-btn{border:1px solid rgba(201,168,76,.5);background:#fff;color:#3d564d}
  #reports .filter-btn:hover{border-color:var(--gold);background:#FCF8EE;color:#0F2D1E}
  #reports .filter-btn.active{background:linear-gradient(180deg,#1f4a35,#163828);border-color:var(--gold);color:var(--gold-lt);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
  #reports .listings-table{border-radius:16px;background:linear-gradient(180deg,#FFFEFB,#FCF9F2);}
  #reports .listings-table thead tr{background:linear-gradient(180deg,#1f4a35,#163828);color:var(--gold-lt);box-shadow:inset 0 -1px 0 rgba(201,168,76,.6)}
  #reports .listings-table thead th{letter-spacing:.16em;font-weight:700;padding:.85rem 1.1rem;color:var(--gold-lt);opacity:1}
  #reports .listings-table tbody tr{border-bottom:1px solid rgba(201,168,76,.2);transition:background .2s ease,box-shadow .2s ease}
  #reports .listings-table tbody tr:hover{background:linear-gradient(90deg,rgba(201,168,76,.1),rgba(201,168,76,.02));box-shadow:inset 3px 0 0 var(--gold)}
  [dir=rtl] #reports .listings-table tbody tr:hover{box-shadow:inset -3px 0 0 var(--gold)}
  #reports .listings-table td{padding:.85rem 1.1rem}
  #reports .lt-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.28rem;font-weight:600;color:#0F2D1E;line-height:1.15}
  #reports .lt-badge{font-weight:700;letter-spacing:.02em;border:1px solid transparent}
  #reports .lt-lost{background:#FBEDE6;color:#9A3A1E;border-color:rgba(181,84,46,.35)}
  #reports .lt-found{background:#EAF4EE;color:#1F5E3E;border-color:rgba(47,122,82,.35)}
  #reports .listings-table td:nth-child(3) .material-icons{color:var(--gold)!important}
  #reports .listings-table td:nth-child(4){font-variant-numeric:tabular-nums;color:#52706A}
  #reports .lt-club{background:#fff;color:#0F2D1E;border:1px solid rgba(201,168,76,.6);box-shadow:0 1px 2px rgba(15,31,22,.06)}
  #reports .lt-club:hover{background:#163828;color:var(--gold-lt);border-color:var(--gold)}
  #reports .board-more-btn{border:1px solid var(--gold);background:linear-gradient(180deg,#FFFEFB,#FAF5EA);color:#0F2D1E}
  #reports .board-more-btn:hover{background:linear-gradient(180deg,#1f4a35,#163828);color:var(--gold-lt)}
  @media (max-width:768px){
    #reports .listings-table{background:transparent;}
    #reports .listings-table tbody tr{background:linear-gradient(180deg,#FFFEFB,#FAF5EA);border:1px solid var(--kante);border-radius:14px;
      box-shadow:0 12px 26px -22px rgba(15,31,22,.5)}
    #reports .listings-table tbody tr:hover{box-shadow:0 12px 26px -20px rgba(15,31,22,.55);border-color:var(--gold)}
    #reports .listings-table td{padding:0}
    #reports .listings-table td:nth-child(2){padding-top:.25rem}
    #reports .listings-table td:nth-child(5):not(:empty){padding-top:.35rem}
    #reports .lt-title{font-size:1.3rem}
  }
  @media(prefers-reduced-motion:reduce){#reports .listings-table tbody tr,#reports .lh-map{transition:none}}
  

/* ── aus index.php, bis 08.11.2026 ab Zeile 1101 ── */
.lh-map{display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem;font-weight:600;color:var(--forest,#0F2D1E);text-decoration:none;padding:.5rem .9rem;border:1.5px solid #eae4d8;border-radius:999px;background:#fff}.lh-map:hover{border-color:var(--gold);color:var(--gold)}

/* ── aus index.php, bis 08.11.2026 ab Zeile 1319 ── */
    /* Erfolgsgeschichten im Stil des Portals (10.10.2026, Entscheid): feste Ordnung je Karte –
       Kennzeichen und Datum, Schlägerart als Titel, Marke darunter, Platz, Zitat, Vertrauen.
       Dunkler Grund bleibt (abgestimmt), nur Rand statt Schimmer und eine Schriftstufe je Zeile. */
    /* 25.10.2026 (Entscheid: „wie zwei Auszeichnungen"): Urkunde statt Infokarte – Goldsiegel mit
       Bändern, doppelter Goldrahmen, Schlägerart in der Hausserife, Datum als Fußzeile. */
    .eg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),300px));justify-content:center;gap:1.5rem}
    .eg-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.6rem 1.4rem 1.1rem;border-radius:16px;
      background:radial-gradient(120% 70% at 50% 0%,rgba(201,168,76,.16),transparent 60%),linear-gradient(180deg,#1f4a35 0%,#163828 100%);
      transition:transform .25s ease,box-shadow .25s ease}
    .eg-card:hover{transform:translateY(-3px);}
    @media (prefers-reduced-motion:reduce){.eg-card{transition:none}.eg-card:hover{transform:none}}
    .eg-siegel{position:relative;width:76px;height:88px;margin:-.2rem 0 .55rem;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
    .eg-siegel svg{display:block;width:100%;height:100%}
    .eg-siegel .material-icons{position:absolute;left:50%;top:38px;transform:translate(-50%,-50%);font-size:1.55rem;color:#E9CF86}
    .eg-band{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#E9CF86;line-height:1.3}
    .eg-band--treffer{color:#8ee6bb}
    .eg-art{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:1.9rem;line-height:1.1;color:#fff;margin-top:.35rem}
    .eg-marke{font-size:.9rem;color:rgba(255,255,255,.82);margin-top:.3rem;line-height:1.4}
    .eg-ort{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;font-size:.85rem;color:rgba(255,255,255,.6);margin-top:.35rem}
    .eg-ort .material-icons{font-size:1rem;color:var(--gold)}
    /* Zitat wie eine Widmung: blasses Gold-Anfuehrungszeichen, Cormorant kursiv, Name eigene Zeile */
    .eg-zitat{position:relative;margin:1.3rem .2rem 0;padding-top:1.5rem}
    .eg-zitat::before{content:"“";position:absolute;left:50%;top:-1.1rem;transform:translateX(-50%);font-family:'Cormorant Garamond',Georgia,serif;font-size:5rem;font-weight:700;line-height:1;color:var(--gold);opacity:.75}
    .eg-zitat p{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:1.15rem;line-height:1.4;color:rgba(255,255,255,.92)}
    .eg-zitat .eg-zitat-name{display:block;margin-top:.45rem;font-size:.8rem;font-weight:600;letter-spacing:.06em;color:#E9CF86}
    .eg-fuss{display:flex;align-items:center;justify-content:center;gap:.45rem;margin-top:auto;padding-top:.9rem;font-size:.85rem;font-weight:600;color:#e6dcc2;line-height:1.35}
    .eg-fuss .material-icons{flex:none;font-size:1rem;color:var(--gold)}
    .eg-meta{display:flex;align-items:center;gap:.6rem;width:100%;margin-top:.9rem;font-size:.8rem;color:rgba(255,255,255,.55);white-space:nowrap}
    .eg-meta::before,.eg-meta::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.5))}
    .eg-meta::after{background:linear-gradient(90deg,rgba(201,168,76,.5),transparent)}
    /* 12.10.2026: Windows (Chrome/Edge) kennt keine Flaggen-Emojis und zeigte „PT" statt der Flagge.
       Lokale Flaggen-Schrift (Twemoji, CC-BY 4.0, Subset aus country-flag-emoji-polyfill 0.1.8),
       nur fuer die Regional-Indicator-Zeichen – sie laedt erst, wenn eine Flagge auf der Seite steht. */
    @font-face{font-family:"Twemoji Country Flags";src:url(/assets/fonts/twemoji-flaggen.woff2) format("woff2");unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E0063,U+E0065,U+E0067,U+E006C,U+E006E,U+E0073-E0074,U+E0077,U+E007F;font-display:swap}
    .eg-flag{font-size:1.15rem;line-height:1;font-family:"Twemoji Country Flags","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
    

/* ── aus index.php, bis 08.11.2026 ab Zeile 1778 ── */
.fc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;max-width:900px;margin:2.2rem auto 0}
.fc-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:1.5rem 1.6rem}
.fc-card.gold{background:rgba(201,168,76,.10);border-color:rgba(201,168,76,.55)}
.fc-card h3{color:#fff;font-size:1.05rem;margin:0 0 .9rem;letter-spacing:.02em}
.fc-card.gold h3{color:var(--gold-lt)}
.fc-card ul{list-style:none;margin:0;padding:0}
.fc-card li{display:flex;gap:.6rem;align-items:flex-start;color:rgba(255,255,255,.82);font-size:.94rem;line-height:1.55;padding:.32rem 0}
.fc-x{color:rgba(255,255,255,.42);font-weight:700;flex-shrink:0}
.fc-c{color:var(--gold);font-weight:700;flex-shrink:0}
.fc-demo{max-width:520px;margin:2.2rem auto 0;text-align:center}
.fc-demo-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.7rem}
.fc-demo-head h3{color:#fff;font-size:1.02rem;margin:0;text-align:left}
.fc-demo-step{color:var(--gold-lt);font-size:.85rem;font-weight:700;white-space:nowrap}
.fc-demo-card{position:relative;background:#F8F4EC;border-radius:14px;min-height:130px;box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden}
.fc-pane{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;padding:1rem;opacity:0;transition:opacity .35s;pointer-events:none}
.fc-pane.on{opacity:1}
.fc-plabel{color:#0F2D1E;font-weight:600;font-size:.95rem}
.fc-chips{display:flex;gap:.5rem}
.fc-chips span{border:1.5px solid #cbd5e1;border-radius:99px;padding:.35rem .9rem;font-size:.88rem;color:#334155;background:#fff}
.fc-chips .sel{border-color:var(--gold);background:rgba(201,168,76,.15);font-weight:700}
.fc-foto{width:74px;height:54px;border:2px dashed #cbd5e1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:#fff}
.fc-send{background:linear-gradient(135deg,var(--gold),var(--gold-lt));color:#10261a;font-weight:700;border-radius:99px;padding:.5rem 1.4rem;font-size:.92rem}
.fc-done{width:46px;height:46px;border-radius:50%;background:#15803d;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700}
.fc-demo-cap{margin-top:.6rem;color:rgba(255,255,255,.55);font-size:.78rem}
.fc-ticks{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 2rem;margin-top:1.8rem}
.fc-ticks > span{display:inline-flex;align-items:center;gap:.45rem;color:#fff;font-size:.92rem;font-weight:600}
.fc-ticks .material-icons{color:var(--gold);font-size:1.1rem}
.fc-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:1.9rem}
@media(max-width:860px){
  .fc-grid{grid-template-columns:1fr;gap:1rem}
  .fc-ctas .btn-gold,.fc-ctas .btn-outline-w{width:100%;max-width:420px;text-align:center}
}

/* ── aus index.php, bis 08.11.2026 ab Zeile 1850 ── */
.fb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1.25rem;margin-top:2rem}
.fb-card{background:#fff;border-radius:16px;padding:1.5rem;margin:0;}
.fb-card-stars{color:var(--gold);font-size:1.05rem;letter-spacing:.1em;margin-bottom:.6rem}
.fb-card-stars span{color:#E4DECF}
.fb-card blockquote{margin:0 0 .9rem;font-style:italic;color:var(--forest,#0F2D1E);line-height:1.65;font-size:.95rem}
.fb-card figcaption{font-size:.82rem;color:var(--muted,#52706A)}

/* ── aus index.php, bis 08.11.2026 ab Zeile 1872 ── */
.trust-strip{background:var(--midnight);padding:2.5rem 1.5rem;text-align:center}
.trust-strip .eyebrow{display:block;margin-bottom:1.1rem}
.trust-strip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.2rem}
.trust-strip-row > span{display:inline-flex;align-items:center;gap:.5rem;color:#fff;font-size:1rem;font-weight:600}
.trust-strip-row .material-icons{color:var(--gold);font-size:1.2rem}
/* Die Übergabe als Moment (Paket 7, 08.11.2026): eine Rückgabe-Geschichte unter dem Live-Board – Foto links, zwei Sätze
   in Cormorant kursiv rechts, Vorname und Club als Bildunterschrift. Kante, Schatten und Papierton kommen aus der
   Karten-Regel in style.css (.story-karte, .papier). Das Bild hat feste Maße (4:3), damit nichts springt. */
.story-abschnitt{padding:var(--section-y) 1.5rem}
.story-abschnitt .section-inner{max-width:860px}
.story-abschnitt .s-h2{text-align:center;margin-bottom:1.4rem}
.story-karte{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0;margin:0;background:#fff;border-radius:18px;overflow:hidden}
.story-karte.ohne-foto{grid-template-columns:1fr}
.story-foto img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.story-text{display:flex;flex-direction:column;justify-content:center;padding:1.8rem 2rem}
.story-text blockquote{margin:0 0 1rem;font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.35rem;line-height:1.45;color:var(--forest)}
.story-text blockquote p{margin:0}
.story-text figcaption{font-size:.95rem;color:var(--muted);letter-spacing:.02em}
@media(max-width:768px){.story-karte{grid-template-columns:1fr}.story-text{padding:1.3rem 1.2rem}.story-text blockquote{font-size:1.2rem}}

/* Kennzahlen als ruhige Zeile (Paket 1, 08.11.2026; vorher .hero-proof im Hero). Ziffern in Cormorant – die
   einzige Stelle der Startseite, an der die Serife Zahlen setzt. */
.trust-strip-zahlen{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.3rem .9rem;margin:1.5rem 0 0;font-size:.95rem;letter-spacing:.02em;color:rgba(255,255,255,.82)}
.trust-strip-zahlen strong{font-family:var(--serif);font-size:1.65rem;font-weight:600;line-height:1;color:var(--gold-lt);margin-right:.15rem}
.trust-strip-zahlen .tsz-sep{color:rgba(201,168,76,.55)}
.trust-strip-langs{margin:1.1rem 0 0;font-size:.92rem;letter-spacing:.02em;color:rgba(255,255,255,.6)}
@media (max-width:860px){
  .trust-strip{padding:2rem 1.25rem}
  .trust-strip-row{gap:.85rem 1.5rem}
  .trust-strip-row > span{font-size:.95rem}
}

/* ── aus index.php, bis 08.11.2026 ab Zeile 1914 ── */
.fold > summary{list-style:none;cursor:default}
.fold > summary::-webkit-details-marker{display:none}
@media (max-width:860px){
  .fold > summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:44px}
  .fold > summary > *{margin-bottom:0}
  .fold > summary::after{content:'⌄';font-size:1.3rem;line-height:1;flex-shrink:0;transition:transform .2s}
  .fold[open] > summary::after{transform:rotate(180deg)}
  .fold[open] > summary{margin-bottom:.75rem}
}
/* 25.10.2026 (Entscheid: „gediegen, edel, wertig", passend zu Partner- und Erfolgskacheln): Elfenbein-Rahmen mit
   doppelter Goldlinie, Spalten durch Goldhaarlinien getrennt, Chips mit Goldrand, Ratgeber als Karten mit Pfeil. */
.il-rahmen{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:0;background:linear-gradient(180deg,#FFFEFB 0%,#FAF5EA 100%);
 border:1px solid rgba(201,168,76,.5);border-radius:18px;padding:2rem .5rem;box-shadow:0 1px 2px rgba(15,31,22,.05),0 18px 40px -26px rgba(15,31,22,.45)}
.il-rahmen::before{content:"";position:absolute;inset:7px;border:1px solid rgba(201,168,76,.22);border-radius:12px;pointer-events:none}
.il-rahmen > .fold{position:relative;padding:0 1.75rem}
.il-rahmen > .fold + .fold::before{content:"";position:absolute;left:0;top:.2rem;bottom:.2rem;width:1px;background:linear-gradient(180deg,rgba(201,168,76,0),rgba(201,168,76,.55) 20%,rgba(201,168,76,.55) 80%,rgba(201,168,76,0))}
[dir=rtl] .il-rahmen > .fold + .fold::before{left:auto;right:0}
.il-kopf{display:flex;align-items:center;gap:.6rem;font-size:.86rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:#7A5C1C;margin:0 0 1rem}
.il-kopf::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--gold);flex:none}
.il-kopf::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(201,168,76,.6),rgba(201,168,76,0))}
[dir=rtl] .il-kopf::after{background:linear-gradient(270deg,rgba(201,168,76,.6),rgba(201,168,76,0))}
.il-kopf2{margin-top:1.5rem;font-size:.8rem;color:#7A6640}
.il-kopf2::before{background:transparent;box-shadow:inset 0 0 0 1px var(--gold)}
.il-chip{display:inline-block;background:#fff;color:#0F2D1E;border:1px solid rgba(201,168,76,.45);border-radius:99px;padding:.4rem .95rem;font-size:.9rem;font-weight:600;text-decoration:none;
 box-shadow:0 1px 2px rgba(15,31,22,.06);transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.il-chip:hover,.il-chip:focus-visible{background:#163828;color:var(--gold-lt);border-color:var(--gold);box-shadow:0 6px 14px -8px rgba(15,31,22,.6)}
.il-chip2{background:transparent;color:#52706A;border-color:rgba(201,168,76,.3);box-shadow:none}
.il-rat{position:relative;display:flex;align-items:center;gap:.8rem;margin-top:.6rem;padding:.8rem 2.6rem .8rem .85rem;border-radius:12px;background:#fff;border:1px solid rgba(201,168,76,.4);
 color:#0F2D1E;text-decoration:none;font-size:.95rem;font-weight:600;line-height:1.35;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.il-rat .material-icons{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--gold);background:#163828;box-shadow:inset 0 0 0 1px rgba(201,168,76,.6)}
.il-rat::after{content:"\2192";position:absolute;inset-inline-end:1rem;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1.1rem;transition:inset-inline-end .2s ease}
[dir=rtl] .il-rat::after{content:"\2190"}
.il-rat:hover,.il-rat:focus-visible{border-color:var(--gold);box-shadow:0 10px 22px -14px rgba(15,31,22,.5);transform:translateY(-1px)}
.il-rat:hover::after{inset-inline-end:.75rem}
.il-rat1{margin-top:0;background:radial-gradient(120% 90% at 0% 0%,rgba(201,168,76,.18),transparent 60%),linear-gradient(180deg,#1f4a35,#163828);border-color:rgba(201,168,76,.7);color:#fff;font-weight:700;
 box-shadow:0 14px 28px -18px rgba(15,31,22,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.il-rat1 .material-icons{background:linear-gradient(135deg,var(--gold-lt),var(--gold) 55%,var(--gold-ink));color:#163828;box-shadow:none}
@media (max-width:860px){
 .il-rahmen{padding:1.1rem .25rem;gap:.25rem}
 .il-rahmen > .fold{padding:.25rem 1.1rem}
 .il-rahmen > .fold + .fold{padding-top:.6rem}
 .il-rahmen > .fold + .fold::before{left:1.1rem;right:1.1rem;top:0;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,rgba(201,168,76,0),rgba(201,168,76,.55),rgba(201,168,76,0))}
 .il-kopf{margin:0;flex:1}
 .fold > summary::after{color:var(--gold)}
}
@media(prefers-reduced-motion:reduce){.il-chip,.il-rat,.il-rat::after{transition:none}.il-rat:hover{transform:none}}

/* ── aus index.php, bis 08.11.2026 ab Zeile 2063 ── */
  /* min-height:0 – ein fixes Mindestmaß riss unter der Begruessung ein grosses
     Leerfeld auf; der Verlauf waechst jetzt einfach mit seinem Inhalt. */
  #sm-chatlog{overflow-y:auto;min-height:0;max-height:44vh;padding:.4rem .1rem;margin:.2rem 0 .6rem;display:flex;flex-direction:column;gap:.55rem}
  .sm-bub{max-width:85%;padding:.6rem .8rem;border-radius:14px;font-size:.92rem;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
  .sm-bub.bot{background:#f0f4f2;color:#123524;border-bottom-left-radius:4px;align-self:flex-start}
  .sm-bub.me{background:#065f46;color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
  #sm-typing{align-self:flex-start;color:#9ca3af;font-size:.9rem;padding:.3rem .2rem}
  #sm-typing span{display:inline-block;animation:smBlink 1.2s infinite both}
  #sm-typing span:nth-child(2){animation-delay:.2s}
  #sm-typing span:nth-child(3){animation-delay:.4s}
  @keyframes smBlink{0%,80%,100%{opacity:.2}40%{opacity:1}}
  /* Fusszeile unter dem Eingabefeld – ZWILLING zu .hlpw-chat-foot.
     Vorher: Link links, Hinweis rechts, umbrechend – bei langen Uebersetzungen
     sah das zerrissen aus und rutschte am Handy sogar aus der weissen Karte.
     Jetzt: feine Trennlinie, ein ruhiger Knopf, darunter der Hinweis mittig. */
  .sm-foot{margin-top:.85rem;padding-top:.75rem;border-top:1px solid #edf1ef;display:flex;flex-direction:column;align-items:center;gap:.45rem}
  .sm-link{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:#f2f5f3;border:none;border-radius:999px;color:#065f46;font-weight:600;font-size:.85rem;line-height:1.3;cursor:pointer;font-family:inherit;padding:.55rem 1.1rem;transition:background .15s}
  .sm-link:hover{background:#e4efe9;text-decoration:none}
  .sm-note{font-size:.72rem;color:#a3adb8;line-height:1.3;text-align:center}
  /* Fokus in Hausfarbe statt blauem Browser-Rahmen */
  #sm-input:focus{outline:none;border-color:#0F2D1E;box-shadow:0 0 0 3px rgba(15,45,30,.12)}
  .sm-link.pulse{animation:smPulse 1.1s ease-in-out 3}
  @keyframes smPulse{50%{transform:scale(1.08);background:var(--gold-pale)}}
  /* Am Handy bequem antippbar (~44px) */
  @media (max-width:768px){ .sm-link{padding:.7rem 1.2rem;font-size:.9rem;min-height:44px} }
  /* Der Chat-Bereich ist ein eigenes Spaltenlayout: Verlauf und Schnellfragen
     duerfen schrumpfen, damit Eingabefeld und Fusszeile IMMER in der weissen
     Karte bleiben – vorher fielen sie unten heraus und lagen ueber der Seite. */
  #sm-chat-pane{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  #sm-quick{flex:0 1 auto;overflow-y:auto}
  /* Schnellfragen – ZWILLING zu .hlpw-quick* in includes/help_widget.php.
     text-align:start statt left wegen Arabisch (RTL). */
  .sm-quick{margin:0 0 .65rem}
  .sm-quick-lbl{font-size:.75rem;color:#6b7280;font-weight:500;margin-bottom:.35rem}
  /* Untereinander statt umbrechend: gleich breite Zeilen mit buendigen Kanten
     wirken ruhiger als verschieden lange, gerahmte Chips – und gilt fuer alle
     Sprachen, egal wie lang der Text wird. */
  .sm-quick-row{display:flex;flex-direction:column;gap:.35rem}
  .sm-quick-row button{background:#f2f5f3;border:none;color:#123524;border-radius:10px;padding:.55rem .85rem;font-size:.82rem;font-weight:600;line-height:1.3;cursor:pointer;font-family:inherit;text-align:start;transition:background .15s}
  .sm-quick-row button:hover{background:#e4efe9}
  /* Am Handy bequem antippbar (~42px) – gilt nur fuer diese Chips, nicht global */
  @media (max-width:768px){ .sm-quick-row button{padding:.68rem 1rem;font-size:.92rem} }

/* ── C-1 (08.11.2026): Club-Teaser – ein Satz, ein Knopf (Texte aus $CX) ── */
.club-teaser{background-color:var(--cream);padding:3rem 1.5rem;text-align:center}
.club-teaser .section-inner{max-width:720px}
.club-teaser .eyebrow{display:block;margin-bottom:.6rem}
.club-teaser .club-teaser-h{margin-bottom:.7rem}
.club-teaser p{font-size:1.05rem;line-height:1.65;color:var(--text);margin:0 0 1.4rem}
.club-teaser .btn-gold{display:inline-block;text-decoration:none}
/* ── C-1: Erfolge als Zeile im Live-Board (erscheint erst mit einer bestätigten Rückgabe) ── */
.board-erfolge{margin-top:2rem;padding:1.1rem 1.25rem;background:#fff;border-radius:14px}
.board-erfolge h3{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:700;color:var(--green);margin:0 0 .7rem}
.board-erfolge h3 .material-icons{color:var(--gold);font-size:1.25rem}
.board-erfolge ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.board-erfolge li{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;font-size:.95rem;color:var(--text)}
.be-badge{background:#15803d;color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.15rem .55rem;border-radius:99px}
.be-badge--club{background:var(--gold-ink);color:#fff} /* Paket 3: --gold-ink = Lese-Gold, 6,09:1 auf Weiß; davor #9C7A2C mit ~3,5:1 (Lighthouse color-contrast) */
.be-ort{display:inline-flex;align-items:center;gap:.25rem;color:var(--muted);font-size:.9rem}
.be-ort .material-icons{font-size:1rem}

/* 08.11.2026 „Foto zuerst", Abschluss (Konzept §3 Paket C): am Handy steht die Meldekarte direkt unter
   Headline und Satz, Haekchen, Club-Kasten, Kennzahlen und Links folgen danach. .hero-left verliert unter
   768 px seine Box (display:contents), die Kinder werden Grid-Kinder von .hero-content und bekommen eine
   Reihenfolge; am Rechner (ab 769 px) aendert sich nichts. */
@media (max-width:768px){
  .hero-content > .hero-left{display:contents}
  .hero-content > .hero-left > .hero-h1{order:1}
  .hero-content > .hero-left > .hero-sub{order:2}
  .hero-content > .form-card{order:3}
  .hero-content > .hero-unten{order:4}
  .trust-strip-zahlen{gap:.5rem 1.2rem;font-size:.9rem}
  .trust-strip-zahlen .tsz-sep{display:none}
  .trust-strip-zahlen strong{font-size:1.45rem}
}