:root{
  --paper:#FFF1F0;
  --ink:#004AAD;
  --pink:#FF1466;
  --pink-deep:#9E0046;
  --berry:#5C0027;
  --blush:#FFD6DF;
  --blush-2:#FFE9EE;
  --sand:#F3E4D7;
  --white:#ffffff;
  --maxw:1180px;
  --gut:clamp(20px,5vw,64px);
  --r:18px;
  --shadow:0 22px 60px -28px rgba(92,0,39,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* ---------- type ---------- */
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:900;line-height:1.02;letter-spacing:-.01em;margin:0}
.eyebrow{font-family:"Space Mono",monospace;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700}

/* ---------- top bar ---------- */
.topbar{position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px var(--gut);
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(92,0,39,.10);
}
.brand{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0}
/* 07.09.2026, Alex' Vorgabe: Logo/Wortmarke wurde nicht sofort als "zurück zur Startseite"
   erkannt — dezenter Pfeil zusätzlich zum bestehenden Logo, keine neue/größere Schaltfläche.
   Startet gedimmt, wird bei Hover/Tastaturfokus klarer sichtbar (gleiches Signal wie der bereits
   vorhandene Cursor:pointer der Buttons seitenweit). */
.brand-back{font-size:15px;line-height:1;color:var(--pink);opacity:.4;transition:opacity .2s;flex:none}
.brand:hover .brand-back,.brand:focus-visible .brand-back{opacity:.9}
.brand .mark{width:34px;height:37px;color:var(--pink);flex:none}
.fbrand .name{display:flex;align-items:center;gap:10px}
.fbrand .mark{width:38px;height:42px;color:var(--pink);flex:none}
.brand .name{font-family:"Fraunces",serif;font-weight:900;font-size:21px;letter-spacing:-.02em;color:var(--ink);font-optical-sizing:none;font-variation-settings:"opsz" 144}
.brand .name b{color:var(--pink);font-style:italic;font-weight:500}
.nav{display:flex;align-items:center;gap:4px}
.nav button{
  border:0;background:none;color:var(--ink);
  font-size:14.5px;font-weight:600;padding:9px 13px;border-radius:999px;
  opacity:.82;transition:.18s;
}
.nav button:hover{opacity:1;background:rgba(255,20,102,.10)}
.nav button.on{opacity:1;color:var(--pink-deep);background:rgba(255,20,102,.14)}
.cta-top{margin-left:6px;background:var(--pink)!important;color:#fff!important;opacity:1!important;
  padding:10px 18px!important;font-weight:700!important;box-shadow:0 10px 24px -10px rgba(255,20,102,.8)}
.cta-top:hover{background:var(--pink-deep)!important;transform:translateY(-1px)}
.burger{display:none;border:0;background:none;width:42px;height:42px;border-radius:12px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px auto;transition:.2s}

/* ---------- eingeloggter Zustand: "Mein Dashboard" statt "Member Login" (21.08.2026) ---------- */
/* 26.08.2026: das Aufklapp-Menü (Dashboard/Memberkarte/Eventraum/Matching/Gastgeberinnen-Karte
   einzeln) entfällt — das Dashboard selbst ist jetzt die zentrale Schaltzentrale für all das,
   "Mein Dashboard" führt direkt dorthin. "Ausloggen" bleibt als eigener, immer sichtbarer Button
   direkt daneben stehen statt in einem Menü versteckt (Alex' Vorgabe: gut erreichbar). */
#nav-account{position:relative;display:inline-flex;align-items:center;gap:6px}
#nav-account-btn{display:inline-flex;align-items:center;gap:7px}
#nav-account-ic{width:15px;height:15px;flex:none;opacity:.8}
#nav-logout-btn{margin-top:5px;padding-top:14px;border-top:1px solid rgba(92,0,39,.10);
  color:var(--pink-deep);opacity:.72}
#nav-logout-btn:hover{opacity:1;background:rgba(255,20,102,.08)}

/* ---------- views ---------- */
.view{display:none;animation:fade .5s ease both}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
section{position:relative}
.pad{padding-block:clamp(64px,9vw,120px)}

/* ---------- hero ---------- */
.hero{min-height:90svh;background:var(--pink);color:#fff;display:flex;align-items:flex-end;
  position:relative;overflow:hidden;padding-top:74px}
#net{position:absolute;inset:0;width:100%;height:100%;opacity:.35;pointer-events:none}
.hero .wrap{position:relative;z-index:2;padding-bottom:clamp(46px,7vw,86px);width:100%}
.hero .eyebrow{color:rgba(255,255,255,.85);margin-bottom:22px}
.hero .word{font-family:"Fraunces",serif;font-weight:900;
  font-size:clamp(58px,15vw,196px);line-height:.86;letter-spacing:-.03em;margin:0 0 6px}
.hero .word .x{font-style:italic;font-weight:500}
.hero .claim{font-family:"Fraunces",serif;font-weight:600;
  font-size:clamp(23px,3.3vw,40px);line-height:1.1;max-width:78%;margin:30px 0 0}
.hero .sub{max-width:54ch;font-size:clamp(16px,1.4vw,18.5px);color:rgba(255,255,255,.92);margin:20px 0 0}
.hero .row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn{border:0;border-radius:999px;font-weight:700;font-size:16px;padding:15px 26px;transition:.2s;display:inline-flex;align-items:center;gap:9px}
.btn-light{background:#fff;color:var(--pink-deep)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(0,0,0,.4)}
/* Hero-Buttons in der Marken-Serif (Fraunces) statt Standard-Grotesk */
.hero .row .btn{font-family:"Fraunces",serif;font-weight:640;font-size:17.5px;letter-spacing:.005em}
.hero .meta{position:absolute;right:var(--gut);bottom:clamp(46px,7vw,86px);z-index:2;text-align:right;
  font-family:"Space Mono",monospace;font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.97);line-height:1.7}
.hero .meta b{display:block;font-size:34px;font-family:"Fraunces",serif;letter-spacing:-.02em;color:#fff;line-height:1}
.scrollcue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.95);font-size:11px;font-family:"Space Mono",monospace;letter-spacing:.2em}
.scrollcue::after{content:"";display:block;width:1px;height:26px;background:rgba(255,255,255,.5);margin:8px auto 0;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* marquee strip */
.strip{background:var(--ink);color:var(--blush);overflow:hidden;white-space:nowrap;padding:13px 0;font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.strip span{display:inline-block;animation:slide 28s linear infinite}
.strip b{color:var(--pink);margin:0 4px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- intro / konzept ---------- */
.lead .eyebrow{color:var(--pink-deep)}
.lead h2{font-size:clamp(32px,5vw,62px);max-width:16ch;margin:16px 0 0}
.lead p{font-size:clamp(17px,1.6vw,20px);max-width:60ch;margin:24px 0 0;color:rgba(26,6,15,.82)}

/* levels */
.levels{margin-top:54px;display:flex;flex-direction:column;gap:16px}
.level{border-radius:var(--r);overflow:hidden;transition:.25s;border:1px solid rgba(92,0,39,.10)}
.level .head{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,40px);align-items:center;
  padding:clamp(22px,3vw,34px) clamp(22px,3vw,40px);width:100%;text-align:left;border:0;background:none;color:inherit}
.level .num{font-family:"Space Mono",monospace;font-weight:700;font-size:clamp(26px,4vw,46px);opacity:.65;line-height:1}
.level .ttl{display:flex;flex-direction:column;gap:5px}
.level .ttl .k{font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.level .ttl h3{font-family:"Inter",sans-serif;font-weight:900;letter-spacing:-.02em;font-size:clamp(22px,2.8vw,33px)}
.level .goal{font-size:14.5px;opacity:.85;max-width:30ch}
.level .plus{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1.5px solid currentColor;font-size:22px;transition:.25s;background:rgba(255,255,255,.35)}
.level.open .plus{transform:rotate(45deg)}
.level .body{max-height:0;overflow:hidden;transition:max-height .4s ease}
.level.open .body{max-height:900px}
.level .body-in{padding:0 clamp(22px,3vw,40px) clamp(28px,3vw,38px);
  display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(22px,4vw,48px)}
.level .quote{font-family:"Fraunces",serif;font-style:italic;font-weight:500;font-size:clamp(17px,1.7vw,21px);line-height:1.35;margin:0 0 18px}
.level ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.level ul li{padding-left:22px;position:relative;font-size:15.5px}
.level ul li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--pink);opacity:1}
.lvl3 ul li::before{background:#fff}
.lvl4 ul li::before{background:var(--pink)}
.level .aside .pricetag{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.level .aside .price{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(26px,3vw,38px);margin:4px 0 2px;line-height:1}
.level .aside .pnote{font-size:13.5px;opacity:.75}
/* Alternative zum Preisschild: dezentes Badge statt konkreter Zahl (aktuell nur Karte 03) */
.level .aside .pricebadge{display:inline-flex;align-items:center;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:10px 18px;
  font-family:"Space Mono",monospace;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.level .lbtn{margin-top:18px;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;
  padding:12px 20px;font-weight:700;font-size:14.5px;transition:.2s}
/* level color encoding: progression deepens */
.lvl1{background:var(--blush-2);color:var(--ink)}
.lvl1 .lbtn{background:var(--ink);color:#fff}
.lvl2{background:var(--blush);color:var(--ink)}
.lvl2 .lbtn{background:var(--pink);color:#fff}
.lvl3{background:var(--pink);color:#fff}
.lvl3 .plus,.lvl4 .plus{background:rgba(255,255,255,.12)}
.lvl3 .lbtn{background:#fff;color:var(--pink-deep)}
.lvl4{background:var(--berry);color:#fff}
.lvl4 .lbtn{background:var(--pink);color:#fff}
.lbtn:hover{transform:translateY(-2px)}
/* Kontrast-Korrektur (12.08.2026): Die Basiswerte oben (.level .num/.ttl .k/.goal) wurden
   bereits angehoben, damit Karte 1/2 (Blush/Blush-2) WCAG-AA erreichen. Auf dem hellen Pink von
   Karte 3 reicht selbst volle Deckkraft für weißen Text nicht für AA (Kontrast-Obergrenze liegt
   bei ca. 3,8:1) — hier daher zusätzlich auf das technisch mögliche Maximum angehoben statt
   fälschlich als „behoben" auszugeben; siehe Rückmeldung an Alex für Details. */
.lvl3 .num{opacity:.9}
.lvl3 .ttl .k{opacity:.98}
.lvl3 .goal{opacity:.98}

/* ---------- generic section header ---------- */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.shead .eyebrow{color:var(--pink-deep)}
.shead h2{font-size:clamp(30px,4.4vw,54px);margin-top:14px;max-width:18ch}
.shead p{max-width:40ch;color:rgba(26,6,15,.78);margin:0}
.shead-text{max-width:40ch}
.shead-text p{max-width:none}
.shead-sub{font-size:14.5px;margin-top:10px!important}

/* ---------- städtekarte ---------- */
/* Stilisierte Netzwerk-Karte statt Geo-Kartendienst: Städte-Punkte sind proportional aus echten
   Koordinaten berechnet (Web-Mercator-nahe, längengradkorrigiert), die Verbindungslinien sind ein
   Gestaltungsmotiv (wie im Logo), keine echten Wege. Kein externes Kartentool nötig. */
.staedtekarte{background:var(--ink);color:var(--paper)}
.staedtekarte .eyebrow,.staedtekarte .shead .eyebrow{color:var(--pink)}
.staedtekarte .shead p{color:rgba(255,241,240,.72)}
.karte-wrap{margin-top:44px;display:grid;place-items:center}
.karte-svg{width:100%;max-width:640px;height:auto}
.karte-blob{fill:rgba(255,20,102,.09)}
.karte-link line{stroke:rgba(255,20,102,.5);stroke-width:1.5}
.karte-pin{cursor:pointer}
.karte-pin circle{fill:var(--pink);stroke:var(--ink);stroke-width:2.5;transition:.2s}
.karte-pin text{font-family:"Fraunces",serif;font-weight:900;font-size:17px;fill:#fff;transition:.2s}
.karte-pin:hover circle{fill:#fff;r:11}
.karte-pin:hover text{fill:var(--pink)}
.karte-online{margin-top:30px;display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:10px 20px;font-size:14px}
.karte-online .dot{width:8px;height:8px;border-radius:50%;background:var(--pink);flex:none}
.karte-cta{margin-top:26px;text-align:center}

/* ---------- termine ---------- */
.termine{background:var(--ink);color:var(--paper)}
.termine .eyebrow,.termine .shead .eyebrow{color:var(--pink)}
.termine .shead p{color:rgba(255,241,240,.72)}
/* grid-template-columns:minmax(0,1fr) statt implizitem auto (21.08.2026-Fix, Alex live
   entdeckt) — ohne das sizt eine CSS-Grid-Spur standardmäßig nach dem max-content ihrer Kinder,
   und .evt ist selbst ein Grid mit recht breiten Spuren (Datum + "Anmelden"-Button, beide
   white-space:nowrap) — dadurch wurde die ganze Kachel breiter als die umgebende weiße Karte
   und ragte rechts heraus, besonders in der schmalen Dashboard-Sidebar. minmax(0,1fr) zwingt die
   Spur auf die tatsächlich verfügbare Breite, egal wie breit der Inhalt "gerne" wäre. */
.evtgrid{margin-top:46px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.evt{display:grid;grid-template-columns:120px 1fr auto auto;gap:clamp(14px,3vw,34px);align-items:center;
  background:var(--pink);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:20px clamp(18px,2.5vw,30px);transition:.2s;color:#fff;min-width:0}
.evt:hover{background:var(--pink-deep);border-color:var(--pink-deep);transform:translateX(4px)}
.evt .date{font-family:"Space Mono",monospace;line-height:1.2}
.evt .date b{display:block;font-family:"Fraunces",serif;font-size:30px;color:var(--ink);letter-spacing:-.02em}
.evt .date i{font-style:normal;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.97;color:#fff}
.evt .city{font-family:"Fraunces",serif;font-weight:900;font-size:22px;color:#fff;hyphens:auto;overflow-wrap:break-word;word-break:normal;min-width:0}
.evt .det{font-size:13.5px;opacity:.9;margin-top:3px;color:#fff;min-width:0}
.evt .pr{font-family:"Space Mono",monospace;font-weight:700;font-size:16px;color:var(--ink);text-align:right;white-space:nowrap}
.evt .pr i{display:block;font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.97;font-weight:400;color:#fff}
.evt .go{border:0;background:var(--ink);color:#fff;font-weight:700;border-radius:999px;padding:12px 20px;font-size:14px;white-space:nowrap;transition:.2s;display:inline-block;text-decoration:none;text-align:center}
.evt .go:hover{background:#fff;color:var(--pink-deep)}
.evt .go.soldout{background:rgba(255,255,255,.3);color:#fff;opacity:.9}
.evt .go.soldout:hover{background:rgba(255,255,255,.42);color:#fff}
.evt.online .date b{font-size:14px;font-family:"Hanken Grotesk";font-weight:700;letter-spacing:0;color:var(--ink)}
/* Member-Termine: helle, invertierte Karte statt der dunklen Standardkarte — hebt eigene
   Veranstaltungen von Member klar von den offiziellen Frauenabenden ab (Variante B). */
.evt.member{background:var(--paper);border-color:var(--paper);color:var(--ink);display:block;padding-bottom:16px}
.evt.member:hover{background:var(--paper);border-color:var(--paper);transform:none}
.member-label{display:inline-flex;align-items:center;gap:8px;background:var(--blush);color:var(--pink-deep);
  font-family:"Space Mono",monospace;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:7px 13px 7px 11px;border-radius:999px;margin-bottom:14px}
.member-label .dot{width:6px;height:6px;border-radius:50%;background:var(--pink-deep)}
.member-row{display:grid;grid-template-columns:120px 1fr auto auto;gap:clamp(14px,3vw,34px);align-items:center}
.evt.member .city{color:var(--ink)}
.evt.member .date b{color:var(--pink-deep)}
.evt.member .date i{color:var(--ink);opacity:.55}
.evt.member .det{color:var(--ink);opacity:.82}
.evt.member .pr{color:var(--pink-deep)}
.evt.member .pr i{color:var(--ink);opacity:.6}
.evt.member .go{background:var(--ink);color:#fff}
.evt.member .go:hover{background:var(--pink-deep);color:#fff}
.evt-photo{width:100%;height:150px;object-fit:cover;border-radius:12px;margin-bottom:14px}
.evt-reel{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--pink-deep);text-decoration:none}
.evt-reel:hover{text-decoration:underline}
.termine .foot{margin-top:34px;font-size:14px;opacity:.7;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- mitmachen ---------- */
.mitmachen{background:var(--sand)}
/* 28.08.2026, Alex' Vorgabe: die Punkteliste links soll unten bündig mit dem Formular-Kasten
   rechts abschließen. Der Kasten ist durch seinen Inhalt (Titel, 3 Felder, Button) der höhere der
   beiden — er bestimmt also ohnehin die Zeilenhöhe, es gibt nichts an ihm zu verschieben. Statt die
   Liste stattdessen mit festem Abstand oben ausgerichtet zu lassen (dabei bliebe unten immer eine
   Lücke, deren Größe zufällig vom jeweiligen Textinhalt abhängt), zieht sich .pts jetzt über die
   volle Zeilenhöhe (align-items:stretch statt :start) und verteilt seine 6 Punkte per
   justify-content:space-between gleichmäßig darüber — dadurch bleibt sowohl oben als auch unten
   automatisch bündig, unabhängig davon, wie lang Kasten oder Texte künftig werden. gap:18px bleibt
   als Mindestabstand erhalten, falls beide Spalten sich in der Höhe mal annähern. */
.mm-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,72px);align-items:stretch;margin-top:44px}
.mm-grid .pts{display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.mm-grid .pt{display:flex;gap:16px;align-items:flex-start}
.mm-grid .pt .n{font-family:"Space Mono",monospace;color:var(--pink-deep);font-weight:700;font-size:14px;padding-top:3px}
.mm-grid .pt h4{margin:0 0 3px;font-family:"Fraunces",serif;font-size:20px;font-weight:900}
.mm-grid .pt p{margin:0;font-size:15px;color:rgba(26,6,15,.78)}
.card{background:#fff;border-radius:var(--r);padding:clamp(26px,3.5vw,40px);box-shadow:var(--shadow)}
.card h3{font-size:26px;margin-bottom:6px}
.card .priceline{font-family:"Space Mono",monospace;font-size:14px;color:var(--pink-deep);margin-bottom:22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;letter-spacing:.01em}
.field input,.field select{width:100%;border:1.5px solid rgba(92,0,39,.18);border-radius:12px;padding:13px 15px;font-family:inherit;font-size:15px;background:var(--paper);color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,20,102,.15)}
/* "Spitzname" der gewählten Hauptbranchen-Suchwelt (25.08.2026) — bewusst kleiner/zurückhaltender
   als die Kategorie selbst und in Inter statt Hanken Grotesk, damit sie sich als charmantes
   Detail liest statt als gleichwertige zweite Überschrift. */
.branche-spitzname{font-family:"Inter",sans-serif;font-size:12.5px;font-style:italic;color:var(--pink-deep);opacity:.7;margin:6px 2px 0;min-height:1em}
.formbtn{width:100%;border:0;background:var(--pink);color:#fff;font-weight:700;font-size:16px;padding:15px;border-radius:12px;margin-top:6px;transition:.2s}
.formbtn:hover{background:var(--pink-deep)}
.ok{display:none;background:var(--blush-2);border:1px solid var(--pink);border-radius:12px;padding:16px;font-size:14.5px;margin-top:10px}
.ok.show{display:block}
/* Kräftige Erfolgs-Variante (25.08.2026, Alex live entdeckt: unklar ob die Karte gespeichert
   wurde) — bewusst eine eigene .saved-Modifier-Klasse statt .ok selbst umzufärben, weil dieselbe
   .ok-Box an mehreren Stellen auch für Fehlermeldungen wiederverwendet wird (z. B. "Der Server
   ist gerade nicht erreichbar") — die dürfen weiterhin nicht wie eine Erfolgsmeldung aussehen. */
.ok.saved{background:var(--pink);border-color:var(--pink);color:#fff}

/* ---------- voice input ---------- */
.voice-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.voicebtn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(92,0,39,.18);
  background:var(--blush-2);color:var(--ink);border-radius:999px;padding:11px 18px;font-weight:700;font-size:14px;transition:.2s}
.voicebtn:hover{border-color:var(--pink);background:var(--blush)}
.voicebtn.rec{background:var(--pink);color:#fff;border-color:var(--pink)}
.voicebtn .dot-ic{width:9px;height:9px;border-radius:50%;background:rgba(92,0,39,.35);flex:none;transition:.2s}
.voicebtn.rec .dot-ic{background:#fff;animation:recpulse 1s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.voice-block textarea{min-height:110px}

/* ---------- mitgliederverzeichnis ---------- */
.directory{background:var(--blush-2)}
.directory .shead .eyebrow{color:var(--pink-deep)}
.directory .shead p{color:rgba(26,6,15,.78)}
.dir-card{background:#fff;border-radius:var(--r);padding:clamp(26px,4vw,42px);box-shadow:var(--shadow)}
.dir-card h3{font-size:23px;margin:0 0 6px}
.dir-card .sub-note{font-size:14.5px;color:rgba(26,6,15,.68);margin:0 0 28px;max-width:46ch}
.fgroup{margin-bottom:22px}
.fgroup:last-of-type{margin-bottom:0}
.flabel{display:block;font-size:13px;font-weight:700;margin-bottom:9px;letter-spacing:.01em}
.hint{font-size:13.5px;opacity:.82;margin:8px 0 0}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.field textarea{width:100%;border:1.5px solid rgba(92,0,39,.18);border-radius:12px;padding:13px 15px;font-family:inherit;font-size:15px;background:var(--paper);color:var(--ink);resize:vertical;min-height:82px;line-height:1.5}
.field textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,20,102,.15)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:1.5px solid rgba(92,0,39,.18);background:var(--paper);color:var(--ink);font-size:13.5px;font-weight:600;padding:9px 16px;min-height:40px;border-radius:999px;cursor:pointer;transition:.15s;-webkit-tap-highlight-color:transparent}
.chip:hover{border-color:var(--pink)}
.chip.sel{background:var(--pink);border-color:var(--pink);color:#fff}
.toggle2{display:flex;gap:9px}
.toggle2 .chip{flex:1;text-align:center}
.opt-head{font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;margin:30px 0 20px;padding-top:22px;border-top:1px solid rgba(92,0,39,.1)}
/* "Member werden" vs. "Community" (07.09.2026, Alex' Vorgabe): dieselbe Seite (view-membership),
   aber je nach Einstiegspunkt eine andere Reihenfolge derselben vier Abschnitte — daher per
   flex-order umsortiert statt dupliziert (keine zweite Kopie von #community-member-preview/
   #mship-benefits nötig, die sonst per ID kollidieren würde). Default = bisherige Reihenfolge
   (Community-Einstieg unverändert); #view-membership.benefits-first stellt nur den
   Vorteile-Abschnitt (.mw-benefits) nach vorn, den Rest in gleicher Reihenfolge dahinter. Bewusst
   auf ".wrap" INNERHALB von #view-membership beschränkt, .wrap wird seitenweit als einfacher
   Block-Container genutzt und darf sich sonst nirgends ändern. */
#view-membership .wrap{display:flex;flex-direction:column}
#view-membership .mw-preview{order:1}
#view-membership .mw-cta1{order:2}
#view-membership .mw-benefits{order:3}
#view-membership .mw-cta2{order:4}
#view-membership.benefits-first .mw-benefits{order:0}
/* ---------- paywall ---------- */
.dir-form-wrap{position:relative}
.paywall{display:none}
.dir-form-wrap.locked .paywall{display:flex}
/* 03.09.2026, Alex' Vorgabe ("die Member anschauen darf jeder"): vorher position:absolute;inset:0
   — deckte die ganze Karten-Liste dahinter komplett ab, auch wenn diese (siehe .lockable weiter
   oben, jetzt nicht mehr auf .dir-browse gesetzt) gar nicht mehr blockiert ist. Jetzt ein
   normaler Block im Textfluss, direkt über der (immer sichtbaren) Kartenliste — wirkt als
   Mitglied-werden-Hinweis, verdeckt aber nichts mehr. */
.paywall{align-items:flex-start;justify-content:center;padding:20px 20px 0}
.paywall-in{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(26px,4vw,40px);max-width:420px;text-align:center;border:1px solid rgba(92,0,39,.08)}
.lock-ic{font-size:30px;display:block;margin-bottom:10px}
.paywall-in h3{font-size:22px;margin-bottom:10px}
.paywall-in p{font-size:14.5px;color:rgba(26,6,15,.75);margin:0 0 22px}
.paywall-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.planbtn{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  border:1.5px solid rgba(92,0,39,.18);background:var(--blush-2);border-radius:14px;padding:16px 10px;transition:.2s}
.planbtn:hover{border-color:var(--pink);background:var(--blush)}
.planbtn.sel{border-color:var(--pink);background:var(--blush);box-shadow:0 0 0 2px var(--pink) inset}
.formbtn[disabled]{opacity:.5;cursor:not-allowed}
.planbtn .pb-t{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
/* Preiszeile bewusst als EIN zusammenhängendes Element ohne Zeilenumbruch (25.08.2026, Alex live
   entdeckt: "25 € / Monat inkl." brach mitten im Satz um) — "inkl. MwSt." steht jetzt als eigenes,
   deutlich kleineres/zurückhaltenderes Element darunter statt im selben Fließtext eingebettet. */
.planbtn .pb-p{font-family:"Fraunces",serif;font-weight:900;font-size:22px;color:var(--pink-deep);white-space:nowrap}
.planbtn .pb-p small{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:13px;opacity:.75}
.planbtn .pb-vat{font-family:"Hanken Grotesk",sans-serif;font-size:10.5px;font-weight:600;color:var(--pink-deep);opacity:.55;letter-spacing:.01em}
.planbtn .pb-save{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:calc(100% - 10px);
  background:var(--pink);color:#fff;font-size:10px;line-height:1.3;font-weight:700;letter-spacing:-.01em;
  padding:5px 8px;border-radius:10px;font-family:"Space Mono",monospace;text-align:center}
/* ---------- gastgeberinnen ---------- */
.host-grid{margin-top:46px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.host-photo{width:112px;height:112px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;display:grid;place-items:center;font-family:"Fraunces",serif;font-weight:900;font-size:38px;flex:none;overflow:hidden}
.host-photo .avatar-photo{width:100%;height:100%;background-size:cover;background-position:center;display:block}
.host-badge{display:inline-block;background:var(--blush);color:var(--pink-deep);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 11px;margin-bottom:12px}
.host-card .pc-top{flex-direction:column;text-align:center;gap:12px}
.host-card .pc-top .host-photo{width:200px;height:auto;max-width:80%;aspect-ratio:1/1;font-size:70px}

/* ---------- Memberkarte/Gastgeberinnenkarte: View/Edit-Umbau (27.08.2026) ---------- */
/* Standardmäßig nur die fertige Karte + "Bearbeiten"-Button (Alex' Vorgabe); das lange Formular
   klappt erst bei Klick unter der Karte auf statt dauerhaft daneben zu stehen. Bei Gastgeberinnen
   stehen beide Kartenblöcke nebeneinander (Flexbox statt Grid, damit der Memberkarten-Block bei
   versteckter Gastgeberinnenkarte automatisch die volle Breite einnimmt, ohne JS/Media-Query-
   Sonderfall für "nur 1 von 2 Karten sichtbar"). */
.mycards-row{display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start}
.mycard-block{flex:1 1 420px;min-width:0}
.mycard-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.mycard-head h3{font-size:22px;margin:0}
.mycard-edit-btn{display:inline-flex;align-items:center;gap:6px;flex:none;border:1.5px solid rgba(92,0,39,.16);background:#fff;color:var(--ink);font-weight:700;font-size:13.5px;padding:8px 16px;border-radius:999px;cursor:pointer;transition:.18s}
.mycard-edit-btn:hover{background:var(--blush-2);border-color:var(--pink)}
.mycard-edit-btn .pencil-ic{width:14px;height:14px;flex:none}
.mycard-editpanel{margin-top:24px}
/* Farbunterscheidung Memberkarte/Gastgeberinnenkarte (27.08.2026, verstärkt nach Alex' Vorgabe:
   der ursprüngliche 4px-Akzentrand allein wirkte zu schwach, weil Foto-Kreis und Tags bei beiden
   Karten in Pink-Tönen blieben). Jetzt: farbiges Kopfband + hauchdünn getönter Hintergrund + Foto-
   Kreis/Tags konsequent in der jeweiligen Farbe — Pink für die Memberkarte, Blau (--ink) für die
   Gastgeberinnenkarte. Die Stadt-Badge auf der Gastgeberinnenkarte bleibt bewusst in Pink
   (Alex' Vorgabe) statt auf Blau umzuspringen — ein gezielter Farbakzent auf sonst blauer Karte.
   Alles nur per ID auf die ohnehin eindeutigen #dir-preview-card/#host-preview-card-Instanzen
   beschränkt, damit andere .profile-card-Vorkommen (öffentliches Gastgeberinnen-Verzeichnis,
   Matching) unangetastet bleiben. Das Kopfband ist reines CSS-generated-content (::before mit
   content:"…") statt eines echten DOM-Knotens — bleibt so beim innerHTML-Neuschreiben durch
   renderProfileCard()/renderHostPreview() automatisch erhalten, ganz ohne JS-Änderung. */
#dir-preview-card,#host-preview-card{position:relative;overflow:hidden;padding-top:calc(44px + clamp(24px,3.5vw,32px))}
#dir-preview-card::before,#host-preview-card::before{
  position:absolute;top:0;left:0;right:0;height:44px;display:flex;align-items:center;padding:0 clamp(24px,3.5vw,32px);
  font-family:"Space Mono",monospace;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
#dir-preview-card::before{content:"Memberkarte";background:var(--pink)}
#host-preview-card::before{content:"Gastgeberinnenkarte";background:var(--ink)}
#dir-preview-card{background:linear-gradient(180deg,var(--blush-2) 0%,#fff 160px)}
#host-preview-card{background:linear-gradient(180deg,rgba(0,74,173,.08) 0%,#fff 160px)}
#dir-preview-card .pc-avatar{background:linear-gradient(135deg,var(--pink),var(--pink-deep))}
#host-preview-card .host-photo{background:var(--ink)}
#host-preview-card .pc-tag{background:rgba(0,74,173,.14);color:var(--ink)}
/* Dashboard farbiger nach Startseiten-Vorbild (28.08.2026, Alex' Vorgabe: "ich mag die Farben
   der Startseite sehr"): pinker Hero-Kopf statt schlichter Eyebrow, Ink-Wortband wie die
   Marken-Ticker-Leiste, dunkles Ink-Panel für "Nächste Termine" mit den ohnehin schon pinken
   .evt-Karten darauf — dieselbe Farbkombination wie auf der echten Termine-Seite. Bewusst als
   eigene .dash-*-Klassen statt die Startseiten-Klassen (.hero/.strip als Vollbreite,
   .termine-Sektion) direkt umzunutzen, weil das Dashboard innerhalb der .wrap-Spaltenbreite
   bleibt statt randlos über die volle Seitenbreite zu gehen. */
.dash-hero{background:var(--pink);color:#fff;border-radius:24px;padding:clamp(28px,4vw,44px) clamp(24px,4vw,40px);position:relative;overflow:hidden}
.dash-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);pointer-events:none}
.dash-hero .eyebrow{color:rgba(255,255,255,.85);position:relative}
.dash-hero h2{color:#fff;position:relative}
.dash-hero p{color:rgba(255,255,255,.92);position:relative}
.dash-strip{border-radius:999px;margin-top:22px}
.dash-termine-panel{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:clamp(20px,2.6vw,26px);box-shadow:var(--shadow)}
.dash-termine-panel h3{color:#fff}
.pc-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:13px}
.pc-links span{color:var(--pink-deep);font-weight:700}
#h-foto{width:100%;border:1.5px dashed rgba(92,0,39,.28);border-radius:12px;padding:12px 15px;font-size:14px;background:var(--paper);color:var(--ink)}
/* 02.09.2026, Alex live entdeckt: Name/Meta/Hauptbranche-Text auf den Memberkarten-Vorschauen der
   öffentlichen Community-Seite kaum lesbar (helles --paper auf weißer Karte) — seit die Karten-
   Vorschau heute in die dunkle .membership-Sektion gezogen ist, erben .pc-name/.pc-meta/.pc-row
   ihre Textfarbe vom umgebenden Abschnitt (color:var(--paper), für Text auf dunklem Grund gedacht)
   statt von der eigentlich immer weißen Kartenfläche. Die Karte bekommt jetzt explizit ihre eigene
   Textfarbe, unabhängig vom umgebenden Abschnitt (dashboard, Community, Matching, Eventraum, …). */
.profile-card{background:#fff;color:var(--ink);border-radius:var(--r);padding:clamp(24px,3.5vw,32px);box-shadow:var(--shadow)}
/* Logo-Kopfzeile auf jeder Memberkarte (09.09.2026, Alex' Vorgabe, Variante "Kopfzeile" aus den
   Design-Vorschlägen) — ein einziges ::before statt das Markup in jeder der drei Karten-Vorlagen
   (memberCardHTML(), Gastgeberinnen-Karte, Vorschau-Karten) zu wiederholen: gilt automatisch für
   jede aktuelle UND künftige .profile-card, auch für das per html2canvas exportierte Bild (das
   rendert ::before mit). Logo als eingebettetes SVG (echtes #logomark, nur mit fest codierter
   Pink-Farbe statt currentColor, weil ein Hintergrundbild keine CSS-Farbvariablen erbt), keine
   Kopie der Icon-Datei/des Fonts nötig. */
.profile-card::before{
  content:"Frauenabend Community";
  display:block;font-family:"Space Mono",monospace;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pink-deep);opacity:.65;
  padding:0 0 14px 22px;margin-bottom:18px;border-bottom:1px solid rgba(92,0,39,.1);
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20230%20252%22%3E%3Cg%20stroke%3D%22%23FF1466%22%20stroke-width%3D%223%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M110%20130%20L86%2045%20M110%20130%20L56%20132%20M110%20130%20L142%20192%20M110%20130%20L144%2072%20M110%20130%20L133%2016%20M110%20130%20L18%2074%20M110%20130%20L51%20192%20M110%20130%20L117%20236%20M110%20130%20L205%20218%20M110%20130%20L190%20132%22/%3E%3Cpath%20d%3D%22M133%2016%20L86%2045%20L18%2074%20L56%20132%20L51%20192%20L117%20236%20L205%20218%20L142%20192%20L190%20132%20L212%2066%20L144%2072%20L133%2016%22/%3E%3Cpath%20d%3D%22M86%2045%20L144%2072%20M56%20132%20L51%20192%20M142%20192%20L117%20236%20M190%20132%20L142%20192%20M212%2066%20L190%20132%22/%3E%3C/g%3E%3Cg%20fill%3D%22%23FF1466%22%3E%3Cpath%20d%3D%22M110%20168%20C110%20168%2068%20140%2068%20114%20C68%2098%2080.5%2089%2093%2089%20C100.5%2089%20107%2093%20110%20100%20C113%2093%20119.5%2089%20127%2089%20C139.5%2089%20152%2098%20152%20114%20C152%20140%20110%20168%20110%20168%20Z%22/%3E%3Ccircle%20cx%3D%22133%22%20cy%3D%2216%22%20r%3D%2212%22/%3E%3Ccircle%20cx%3D%2286%22%20cy%3D%2245%22%20r%3D%228%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2274%22%20r%3D%2217%22/%3E%3Ccircle%20cx%3D%2256%22%20cy%3D%22132%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%2251%22%20cy%3D%22192%22%20r%3D%2214%22/%3E%3Ccircle%20cx%3D%22117%22%20cy%3D%22236%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%22205%22%20cy%3D%22218%22%20r%3D%2213%22/%3E%3Ccircle%20cx%3D%22142%22%20cy%3D%22192%22%20r%3D%228%22/%3E%3Ccircle%20cx%3D%22190%22%20cy%3D%22132%22%20r%3D%2210%22/%3E%3Ccircle%20cx%3D%22212%22%20cy%3D%2266%22%20r%3D%2214%22/%3E%3Ccircle%20cx%3D%22144%22%20cy%3D%2272%22%20r%3D%227%22/%3E%3C/g%3E%3C/svg%3E") no-repeat left center/15px auto;
}
.pc-mini::before{font-size:9.5px;padding-bottom:11px;margin-bottom:14px;background-size:12px auto}
.profile-card .pc-top{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.pc-avatar{width:52px;height:52px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;font-family:"Fraunces",serif;font-weight:900;font-size:19px;flex:none;overflow:hidden}
.pc-avatar .avatar-photo{width:100%;height:100%;background-size:cover;background-position:center;display:block}
.pc-name{font-family:"Fraunces",serif;font-weight:900;font-size:20px;line-height:1.1}
.pc-meta{font-size:13px;opacity:.8;margin-top:2px}
.pc-row{margin-bottom:14px}
.pc-row:last-child{margin-bottom:0}
.pc-row .k{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.82;margin-bottom:6px}
.pc-row .v{font-size:14.5px}
/* align-items:flex-start (03.09.2026, Alex: Tag-Text "klebt unten am Boden der Pille") — ohne das
   streckt Flexbox per Default (align-items:stretch) jeden Tag einer Zeile auf die Höhe des
   größten Tags dort; sobald einer zweizeilig umbrach, rutschten alle kürzeren, einzeiligen Tags
   in derselben Zeile dadurch sichtbar nach unten. Mit flex-start behält jeder Tag seine eigene,
   natürliche Höhe (symmetrisches padding oben/unten aus .pc-tag reicht dann für echte
   Zentrierung) — robuster als display:flex direkt auf .pc-tag zu setzen, das brach den
   Zeilenumbruch langer Tags (erst so probiert, per Test verworfen). */
.pc-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
/* text-align:center (03.09.2026, Alex: Tag-Text nicht mittig) — die eigentliche Ursache war die
   Höhen-Streckung durch .pc-tags (siehe align-items:flex-start dort); display:flex direkt hier
   auf .pc-tag versucht, brach aber den Zeilenumbruch langer Tags und wurde verworfen. */
.pc-tag{text-align:center;background:var(--blush);color:var(--pink-deep);font-size:12px;font-weight:700;padding:5px 12px;border-radius:16px;max-width:100%;min-width:0;overflow-wrap:anywhere}
.pc-quote{font-family:"Fraunces",serif;font-style:italic;font-weight:500;font-size:15px;line-height:1.4;margin:16px 0 0;padding-top:16px;border-top:1px solid rgba(92,0,39,.1)}
/* Größeres, besser erkennbares Foto auf der Memberkarte (21.08.2026, Alex' Vorgabe) — bewusst
   per ID auf die eigentliche Memberkarten-Ansichten beschränkt (Verzeichnis-Vorschau, öffentliches
   Verzeichnis, Startseiten-Teaser), NICHT auf die gleich aussehenden .pc-mini-Karten im
   Komplizinnen-Matching (match-suggest-grid/ob-preview-card) — die bleiben
   unverändert, dort ging es nie um Wiedererkennbarkeit eines Fotos. */
#dir-preview-card .pc-top,#dir-browse-grid .pc-top,#community-member-preview .pc-top{flex-direction:column;text-align:center;gap:10px}
#dir-preview-card .pc-avatar{width:180px;height:auto;max-width:60%;aspect-ratio:1/1;font-size:64px}
#dir-browse-grid .pc-avatar,#community-member-preview .pc-avatar{width:150px;height:auto;max-width:75%;aspect-ratio:1/1;font-size:54px}
@media(max-width:880px){
  .frow2,.frow3{grid-template-columns:1fr}
}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--blush);padding-block:clamp(54px,7vw,86px) 30px}
.fnews{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:40px;scroll-margin-top:90px}
.fnews h2{color:#fff;font-size:clamp(28px,4vw,46px);max-width:14ch}
.fnews-embed{background:#fff;border-radius:18px;overflow:hidden;min-width:280px;box-shadow:0 22px 60px -28px rgba(0,0,0,.4)}
/* native Brevo-Formulare (Newsletter + Stadt vorschlagen) im Seiten-Design */
.brevo-form .bf-hidden{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.brevo-form .bf-submit{background:var(--pink);color:#fff;border:0;border-radius:999px;font-weight:700;font-size:15px;padding:14px 26px;width:100%;transition:.2s;cursor:pointer}
.brevo-form .bf-submit:hover{background:var(--pink-deep)}
.brevo-form .bf-submit[disabled]{opacity:.6}
.brevo-form .bf-msg{display:none;font-size:14px;font-weight:600;margin:12px 0 0;border-radius:12px;padding:12px 14px}
.brevo-form .bf-msg.ok{display:block;background:var(--blush-2);color:var(--pink-deep)}
.brevo-form .bf-msg.err{display:block;background:var(--blush-2);color:var(--pink-deep);border:1.5px solid var(--pink)}
.form-err{display:none;font-size:14px;font-weight:600;margin:14px 0 0;border-radius:12px;padding:12px 14px;background:var(--blush-2);color:var(--pink-deep);border:1.5px solid var(--pink)}
.mm-embed .brevo-form{margin-top:18px}
.fnews-form{padding:26px 26px 28px;width:360px;max-width:100%;color:var(--ink)}
.fnews-form h4{font-family:"Fraunces",serif;font-weight:900;font-size:24px;margin:0 0 6px}
.fnews-form p{font-size:14px;opacity:.75;margin:0 0 16px}
.fcols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;padding-top:38px}
.fcols .c h5{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);margin:0 0 14px}
.fcols .c a,.fcols .c span{display:block;color:var(--blush);text-decoration:none;font-size:14.5px;margin-bottom:9px;opacity:.85}
.fcols .c a:hover{opacity:1;color:var(--pink)}
.fbrand .name{font-family:"Fraunces",serif;font-weight:900;font-size:26px;color:#fff;font-optical-sizing:none;font-variation-settings:"opsz" 144}
.fbrand .name b{color:var(--pink);font-style:italic;font-weight:500}
/* schützt den Schriftzug vor der generischen .fcols .c span-Regel (14.5px, block, blush) */
.fbrand .name span{display:inline;font-size:inherit;color:inherit;margin:0;opacity:1}
.fbrand p{font-size:14px;opacity:.85;max-width:30ch;margin:10px 0 0}
.fbrand .claim{font-family:"Fraunces",serif;font-style:italic;font-weight:500;font-size:15.5px;color:#fff;max-width:26ch;margin:12px 0 0;line-height:1.35}
.copyr{margin-top:44px;font-size:12.5px;opacity:.85;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:"Space Mono",monospace}

/* ---------- fotogalerie ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:36px}
.gal-item{aspect-ratio:1;border-radius:12px;overflow:hidden;border:0;padding:0;cursor:pointer;background:var(--blush)}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.gal-item:hover img{transform:scale(1.06)}
.gal-credits{margin-top:34px;font-size:13.5px;color:rgba(26,6,15,.75)}
.gal-credits span{margin-right:6px}
.gal-credits a{color:var(--pink-deep);font-weight:700;text-decoration:none}
.gal-credits a:hover{text-decoration:underline}
.gal-lightbox-bg{position:fixed;inset:0;background:rgba(26,6,15,.85);z-index:95;display:none}
.gal-lightbox-bg.show{display:block}
.gal-lightbox{position:fixed;inset:0;z-index:96;display:none;flex-direction:column;align-items:center;justify-content:center;padding:min(6vh,60px) min(6vw,60px);text-align:center}
.gal-lightbox.show{display:flex}
.gal-lightbox img{max-width:100%;max-height:78vh;border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.gal-lightbox-credit{color:#fff;font-size:14px;margin-top:16px}
.gal-lightbox-credit a{color:var(--pink);font-weight:700;text-decoration:none}
.gal-lightbox-credit a:hover{text-decoration:underline}
.gal-lightbox .x{position:fixed;top:18px;right:18px;border:0;background:rgba(255,255,255,.12);color:#fff;width:42px;height:42px;border-radius:50%;font-size:20px}
.gal-nav{position:fixed;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.12);color:#fff;width:48px;height:48px;border-radius:50%;font-size:26px;line-height:1}
.gal-prev{left:18px}
.gal-next{right:18px}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;padding:14px var(--gut) 22px;border-bottom:1px solid rgba(92,0,39,.12);
    transform:translateY(-120%);transition:.3s;box-shadow:var(--shadow)}
  .nav.open{transform:none}
  .nav button{text-align:left;padding:13px;font-size:16px}
  .cta-top{margin:8px 0 0!important}
  .burger{display:block}
  /* Im mobilen Burger-Menü stapeln sich "Mein Dashboard" und "Ausloggen" einfach untereinander,
     genau wie die übrigen Nav-Punkte (26.08.2026). */
  #nav-account{flex-direction:column;align-items:stretch;gap:2px}
  #nav-account-btn,#nav-logout-btn{width:100%}
  .hero .meta{display:none}
  .hero .claim{max-width:100%}
  .level .head{grid-template-columns:auto 1fr;grid-template-areas:"num plus" "ttl ttl" "goal goal";gap:10px 16px}
  .level .num{grid-area:num}.level .plus{grid-area:plus;justify-self:end}
  .level .ttl{grid-area:ttl}.level .goal{grid-area:goal;max-width:none}
  .level .body-in{grid-template-columns:1fr}
  .evt{grid-template-columns:88px 1fr;grid-template-areas:"date city" "date det" "pr go";gap:6px 16px}
  .evt .date{grid-area:date}.evt .city{grid-area:city}.evt .det{grid-area:det}
  .evt .pr{grid-area:pr;text-align:left;align-self:center}.evt .go{grid-area:go;justify-self:end}
  .member-row{grid-template-columns:88px 1fr;grid-template-areas:"date city" "date det" "pr go";gap:6px 16px}
  .member-row .date{grid-area:date}.member-row .city{grid-area:city}.member-row .det{grid-area:det}
  .member-row .pr{grid-area:pr;text-align:left;align-self:center}.member-row .go{grid-area:go;justify-self:end}
  .mm-grid,.fnews{grid-template-columns:1fr}
  .fnews{align-items:start}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  #net{display:none}
}

/* ============ COMMUNITY-PLATTFORM: NEU (Runde 1) ============ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bullets{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.bullets li{padding-left:22px;position:relative;font-size:15.5px}
.bullets li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--pink)}
/* Kompakte Membership-Vorteile auf der Checkout-Seite (20.08.2026) — bewusst luftiger als eine
   klassische Bullet-Liste: kurze fette Überschrift + max. eine erklärende Zeile, zweispaltig auf
   Desktop, einspaltig auf Mobile (siehe @media(max-width:880px) unten). Gleiche Schrift/Farben
   wie überall sonst, keine neue Designsprache. */
.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin-bottom:26px}
.benefit-grid .b h4{font-family:"Fraunces",serif;font-weight:900;font-size:16.5px;margin:0 0 4px;color:var(--ink)}
.benefit-grid .b p{margin:0;font-size:14px;line-height:1.45;color:rgba(26,6,15,.72)}
.btn-outline{border:1.5px solid rgba(92,0,39,.25);background:none;color:var(--ink);font-weight:700;font-size:14.5px;padding:12px 22px;border-radius:999px;transition:.2s;text-decoration:none}
.btn-outline:hover{border-color:var(--pink);color:var(--pink-deep)}
.btn-outline.on-dark{border-color:rgba(255,255,255,.5);color:#fff}
.btn-outline.on-dark:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.social-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-width:1.5px;border-style:solid}
.social-btn svg{flex:none}
.social-btn.ig{border-color:#E1306C;background:#E1306C;color:#fff}
.social-btn.ig:hover{border-color:#C21A56;background:#C21A56;color:#fff}
.social-btn.li{border-color:#0A66C2;background:#0A66C2;color:#fff}
.social-btn.li:hover{border-color:#084d94;background:#084d94;color:#fff}

/* ---------- membership landingpage ---------- */
.membership{background:var(--ink);color:var(--paper)}
.membership .shead .eyebrow{color:var(--pink)}
.membership .shead p{color:rgba(255,241,240,.75)}
.mship-claim{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(30px,4.6vw,52px);max-width:18ch;margin:16px 0 0}
.mship-grid{margin-top:48px}
.mship-grid .pts{display:grid;gap:18px}
.mship-grid .pt{display:flex;gap:16px;align-items:flex-start}
.mship-grid .pt .n{font-family:"Space Mono",monospace;color:var(--pink);font-weight:700;font-size:14px;padding-top:3px}
.mship-grid .pt h4{margin:0 0 3px;font-family:"Fraunces",serif;font-size:20px;font-weight:900;color:#fff}
.mship-grid .pt p{margin:0;font-size:15px;color:rgba(255,241,240,.75)}
.mship-check{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:clamp(22px,3vw,30px);margin-top:26px}
.mship-check .field input{background:#fff}
/* 02.09.2026: vorher nur auf Mobile ein Duplikat der Buchen-Karte vor dem Text, jetzt auf allen
   Breiten die erste von zwei Instanzen (Alex' Vorgabe: Karten → Kasten → Text → Kasten). */
.mship-cta-top{margin-top:32px}
/* Ja/Noch-nicht-Umschaltung im Membership-Einstieg: gleiches Panel-Muster wie .wiz-panel
   (inkl. bestehender fade-Animation), nur innerhalb derselben Box statt eigener Seite. */
.mc-panel{display:none}
.mc-panel.on{display:block;animation:fade .4s ease both}

/* ---------- teilnahmeprüfung ---------- */
.tc-state{display:none;text-align:center;padding:10px 0}
.tc-state.show{display:block}
.tc-icon{font-size:34px;display:block;margin-bottom:12px}
.tc-state h3{font-size:22px;margin-bottom:8px}
.tc-state p{font-size:14.5px;color:rgba(26,6,15,.75);max-width:44ch;margin:0 auto}
.tc-state .btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}

/* ---------- schmale einspaltige formulare (teilnahmeprüfung/registrierung/onboarding) ---------- */
.narrow{max-width:640px;margin:0 auto}

/* ---------- onboarding-wizard ---------- */
.wiz-progress{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.wiz-step{font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.04em;padding:8px 14px;border-radius:999px;background:var(--blush-2);color:var(--ink);opacity:.55;transition:.2s}
.wiz-step.on{opacity:1;background:var(--pink);color:#fff}
.wiz-step.done{opacity:1;background:var(--blush);color:var(--pink-deep)}
.wiz-current-label{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(20px,2.6vw,28px);margin:18px 0 26px}
.wiz-panel{display:none}
.wiz-panel.on{display:block;animation:fade .4s ease both}
.wiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px}
@media(max-width:880px){
  .wiz-step .lbl{display:none}
  .wiz-step{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center}
}

/* ---------- kompakte profilkarte (dashboard/browse/eventraum/match) ---------- */
.pc-mini{padding:22px}
.pc-mini .pc-top{margin-bottom:14px}
.pc-mini .pc-avatar{width:42px;height:42px;font-size:15px}
.pc-mini .pc-name{font-size:16px}
.pc-mini .pc-quote{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Karten-Detailansicht (03.09.2026, Alex' Vorgabe: "Karten müssen anklickbar sein, wenn Texte
   länger sind, dass man sie komplett lesen kann") — der Merksatz auf der Minikarte ist bewusst
   auf 2 Zeilen begrenzt (.pc-mini .pc-quote oben), damit die Karten in der Kontakte-Übersicht
   nicht unterschiedlich hoch werden. Ein Klick auf die Karte zeigt denselben Kartenausschnitt
   noch einmal groß, dort ohne die Begrenzung — kein erneutes Laden/Rendern nötig, siehe
   openCardLightbox() weiter unten. */
#er-contacts .profile-card,#dir-browse-grid .profile-card{cursor:pointer}
.card-lightbox-bg{position:fixed;inset:0;background:rgba(26,6,15,.85);z-index:95;display:none;align-items:center;justify-content:center;padding:min(6vh,40px) min(6vw,40px);overflow-y:auto}
.card-lightbox-bg.show{display:flex}
.card-lightbox-body{max-width:380px;width:100%}
.card-lightbox-body .profile-card{cursor:default}
.card-lightbox-body .pc-quote{display:block;overflow:visible;-webkit-line-clamp:unset}
.card-lightbox-close{position:fixed;top:18px;right:18px;border:0;background:rgba(255,255,255,.12);color:#fff;width:42px;height:42px;border-radius:50%;font-size:20px;cursor:pointer;z-index:96}
.pc-mini .pc-row{margin-bottom:10px}
.pc-bookmark{margin-top:14px;width:100%;border:1.5px solid rgba(92,0,39,.18);background:var(--paper);color:var(--ink);border-radius:999px;padding:10px;font-weight:700;font-size:13px;transition:.2s}
.pc-bookmark:hover{border-color:var(--pink)}
.pc-bookmark.on{background:var(--blush);border-color:var(--pink);color:var(--pink-deep)}
/* margin-top von 14px auf 22px (03.09.2026, Alex per Screenshot: "Siehst du die Abstände?") — der
   Raum oberhalb von "Merken" wirkt durch pc-quote's eigenen padding-top+margin-top (32px, siehe
   .pc-quote) deutlich großzügiger als die bisherigen 14px zwischen "Merken" und den
   Download-Buttons darunter — beide Stände jetzt näher beieinander, wirkt als durchgängiger
   Rhythmus statt zusammengedrängt direkt unter "Merken". */
.pc-downloads{display:flex;gap:8px;margin-top:22px}
/* Download-Bestätigung (09.09.2026, Alex' Vorgabe) — kurze, sich selbst schließende Meldung nach
   Klick auf "Als Bild"/"Als Kontakt", siehe showDownloadToast() in app.js. Unten mittig statt wie
   die bestehenden "banner" oben, damit sie sich klar von deren mehrschrittigen, bleibenden
   Hinweisen (z. B. nach Zahlungs-Rückkehr) unterscheidet. */
.dl-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);z-index:999;
  background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:12px 22px;border-radius:999px;
  box-shadow:0 22px 60px -28px rgba(0,0,0,.5);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.dl-toast.show{opacity:1;transform:translate(-50%,0)}
/* display:flex + align-items:center (03.09.2026, Alex live entdeckt: "die Buchstaben kleben so
   unten im Button") — .pc-downloads (der umgebende Flex-Container) streckt beide Buttons per
   Default (align-items:stretch) auf dieselbe Höhe, sobald einer der beiden Button-Texte (z. B.
   "Als Kontakt ↓" bei schmalen Karten) auf zwei Zeilen umbricht; ohne eigene Zentrierung landete
   der Text des kürzeren, einzeiligen Buttons dadurch sichtbar außermittig statt vertikal
   zentriert. */
.pc-download-btn{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.3;border:1.5px solid rgba(92,0,39,.18);background:var(--paper);color:var(--ink);border-radius:999px;padding:9px 6px;font-weight:700;font-size:12px;transition:.2s;cursor:pointer}
.pc-download-btn:hover{border-color:var(--pink)}
.profile-card.pc-self{border:2px solid var(--pink)}
.pc-self-badge{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:var(--pink-deep);background:var(--blush);border-radius:999px;padding:2px 8px;vertical-align:middle}
.pc-hidden-note{margin:10px 0 0;font-size:12.5px;font-weight:600;color:rgba(26,6,15,.6)}
.banner-close{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--pink-deep);font-size:20px;line-height:1;cursor:pointer;padding:6px;opacity:.6}
.banner-close:hover{opacity:1}

/* ---------- dashboard ---------- */
.dash-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(26px,4vw,50px);align-items:start;margin-top:36px}
.dash-col{display:grid;gap:20px;min-width:0}
.dash-col .card{min-width:0}
/* Terminkarten in der schmalen Dashboard-Spalte immer im kompakten (Mobile-)Layout zeigen,
   unabhängig von der Viewport-Breite — die Spalte selbst ist immer schmal. */
/* 26.08.2026, Alex' Vorgabe (nach A/B-Vergleich dreier Layout-Ideen, "Variante 2" gewählt): näher
   am Original der großen Termine-Seite als der erste Versuch (gestapeltes Datum) — Datum, Ort/
   Beschreibung und Preis/Button bleiben nebeneinander in einer Zeile, nur schmaler proportioniert
   als auf der breiten Termine-Seite. Preis + Button stehen jetzt übereinander in einer eigenen,
   schmalen rechten Spalte statt nebeneinander, das gibt der mittleren Ort-Spalte den Platz, der
   vorher fehlte. Die mittlere Div ohne eigene Klasse (Wrapper um .city + .det, siehe evtHTML())
   wird über :nth-child(2) adressiert, weil sie sonst nicht gezielt ansprechbar ist. */
/* 26.08.2026: von 3 auf 2 Spalten umgebaut — in der schmalen Dashboard-Spalte blieben für
   Stadt/Ort bei 3 Spalten (Datum/Text/Preis+Button nebeneinander) nur rund 55px übrig, echte
   Städtenamen ("München", "Online / ortsunabhängig" usw.) brachen dadurch mitten im Wort in
   Einzelbuchstaben um (live mit Testdaten geprüft). Preis + Button rutschen jetzt in eine eigene
   Zeile UNTER Stadt/Details, dafür bekommt die Textspalte fast die volle Kartenbreite. */
#dash-evtgrid .evt{grid-template-columns:44px 1fr;gap:4px 10px;align-items:start}
#dash-evtgrid .evt .date{grid-column:1;grid-row:1/4;display:flex;flex-direction:column;justify-content:flex-start}
#dash-evtgrid .evt .date b{font-size:20px}
#dash-evtgrid .evt .date i{font-size:9.5px;white-space:nowrap}
#dash-evtgrid .evt>div:nth-child(2){grid-column:2;grid-row:1;min-width:0}
#dash-evtgrid .evt .city{font-size:16.5px}
#dash-evtgrid .evt .det{font-size:11.5px;margin-top:2px}
/* .pr (Preis + Membervorteil-Hinweis) und .go (Anmelden-Button) NEBENEINANDER in einer Zeile
   passten bei einem echten Preis wie "45 €" + "10 € Membervorteil" nicht in die schmale Spalte —
   das Label lief unter den Button (live mit Testdaten geprüft, ca. 35px Überlappung). Jetzt
   untereinander, jeweils volle Spaltenbreite, kein Überlappungsrisiko mehr unabhängig von der
   Textlänge. */
#dash-evtgrid .evt .pr{grid-column:2;grid-row:2;font-size:12.5px;text-align:left;margin-top:8px}
#dash-evtgrid .evt .pr i{font-size:8.5px}
#dash-evtgrid .evt .go{grid-column:2;grid-row:3;justify-self:start;padding:7px 14px;font-size:11.5px;margin-top:6px}
.dir-browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}

/* ---------- eventraum ---------- */
.erow{display:flex;align-items:center;gap:16px;background:var(--blush-2);border-radius:14px;padding:16px 20px;margin-bottom:12px}
.erow .eleft{flex:1}
.erow .ed{font-family:"Space Mono",monospace;font-size:12px;color:var(--pink-deep)}
.erow .et{font-family:"Fraunces",serif;font-weight:900;font-size:18px;margin-top:2px}

/* ---------- verzeichnis: browsing & filter ---------- */
.dir-filter-bar{display:grid;gap:18px;margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid rgba(92,0,39,.1)}
.dir-filter-group .flabel{margin-bottom:9px}
.dir-empty{font-size:14.5px;opacity:.7;grid-column:1/-1}
/* 02.09.2026, Alex' Vorgabe: Memberkarten stehen jetzt vor den Filtern statt danach, dazu
   Seitenweise blättern (6 Karten pro Seite) statt alle auf einmal untereinander. */
.dir-pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px}
.dir-pagination span{font-family:"Space Mono",monospace;font-size:13px;color:rgba(26,6,15,.65)}
.dir-pagination button:disabled{opacity:.4;cursor:default;pointer-events:none}

/* ---------- matching ---------- */
.match-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:start;margin-top:40px}
.match-vs .x{font-family:"Fraunces",serif;font-style:italic;font-size:22px;opacity:.35;text-align:center;padding-top:60px}
.match-score{display:inline-flex;align-items:center;gap:6px;background:var(--blush);color:var(--pink-deep);font-family:"Space Mono",monospace;font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:999px;margin:16px 0}
.match-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.match-why{margin-top:20px;font-size:14px}
.match-why summary{cursor:pointer;font-weight:700;color:var(--pink-deep)}
.match-why ul{margin-top:12px}
.matchraum-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}

@media(max-width:880px){
  .dash-grid,.match-vs,.matchraum-intro-grid,.benefit-grid{grid-template-columns:1fr}
  .mycards-row{flex-direction:column}
  .match-vs .x{padding-top:0}
}