/* Crew — app.css
   Farbschema "Hou Juice": helles Türkis, Creme-Karten, Gold-Aktionen, Pflaume-Akzente.
   Überschriften als Gold-Balken (Aubergine-Schrift), bunte Reiter & Eingabefelder. */

:root{
  --surface:#ffffff;
  --surface-2:#F7F1E1;
  --cream:#FBF5E6;

  --ink:#143A33;
  --ink-2:#3D5B55;
  --muted:#6E8C86;
  --line:rgba(20,58,51,.10);
  --line-2:rgba(20,58,51,.07);

  --plum:#6E2A5C;
  --plum-2:#9A3F84;
  --aubergine:#5A2350;
  --gold:#F4BE2C;
  --gold-deep:#B5841A;
  --orange:#E98A3C;
  --blue:#5E97A6;

  --on-teal:#ffffff;
  --on-teal-soft:rgba(255,255,255,.88);
  --teal-shadow:0 1px 3px rgba(7,45,40,.28);

  --grad-warm:linear-gradient(135deg,#F6C636 0%,#EF9038 100%);
  --grad-gold:linear-gradient(135deg,#F8CB45 0%,#EE9B38 100%);
  --grad-plum:linear-gradient(135deg,#6E2A5C 0%,#9A3F84 100%);

  --radius:22px;
  --radius-sm:14px;
  --shadow:0 16px 36px rgba(7,54,48,.20);
  --shadow-sm:0 8px 22px rgba(7,54,48,.14);

  --tabbar-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);

  --font-d:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-b:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-b);
  color:var(--ink);
  background:#2BBBA8;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
button{font-family:inherit}
input,textarea,select{font-family:inherit}
a{color:var(--plum);text-decoration:none}
h1,h2,h3{font-family:var(--font-d);margin:0;letter-spacing:-.02em;font-weight:700}
img{max-width:100%;display:block}

/* ---------- Hintergrund: helles Türkis + Punkte + organische Formen ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:radial-gradient(150% 125% at 50% -10%, #62D8C6 0%, #33C2AF 48%, #18A492 100%);}
.bg::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 1.7px);
  background-size:24px 24px;opacity:.5}
.blob{position:absolute;border-radius:50%;filter:blur(48px);will-change:transform}
.blob.b1{width:320px;height:320px;left:-90px;top:-50px;background:radial-gradient(circle at 30% 30%,#FBD874,#F4BE2C);opacity:.36;animation:float1 20s ease-in-out infinite}
.blob.b2{width:300px;height:300px;right:-110px;bottom:60px;background:radial-gradient(circle at 30% 30%,#B0578F,#6E2A5C);opacity:.30;animation:float2 24s ease-in-out infinite}
.deco{position:absolute;opacity:.16}
.deco.leaf1{width:185px;top:-26px;right:-44px;transform:rotate(18deg)}
.deco.leaf2{width:210px;bottom:34px;left:-66px;transform:rotate(-24deg)}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,22px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,-18px)}}
@media (prefers-reduced-motion:reduce){.blob{animation:none}}

/* ---------- App-Layout (obere Leiste entfernt) ---------- */
#app{min-height:100%}
.boot{min-height:100vh;display:grid;place-items:center;color:var(--on-teal-soft);font-family:var(--font-d);font-weight:600;text-shadow:var(--teal-shadow)}
.app-shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:none}

.view{flex:1;padding:calc(var(--safe-t) + 16px) 16px calc(var(--tabbar-h) + var(--safe-b) + 92px);max-width:680px;width:100%;margin:0 auto}

/* ---------- Überschrift als Gold-Balken ---------- */
.view-head{display:block;background:var(--grad-gold);border-radius:16px;padding:13px 18px;margin:0 0 18px;
  box-shadow:0 10px 24px rgba(214,140,40,.34)}
.view-head h1{font-size:23px;color:var(--aubergine);letter-spacing:-.02em}
.view-head .sub{color:rgba(90,35,80,.78);font-size:13px;margin-top:2px;font-weight:600}
.view-enter{animation:viewIn .32s cubic-bezier(.2,.7,.2,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Avatare ---------- */
.avatar{--s:40px;--ring:color-mix(in srgb, var(--avatar-color, #FFFFFF) 70%, #fff);width:var(--s);height:var(--s);border-radius:50%;position:relative;display:grid;place-items:center;
  font-family:var(--font-d);font-weight:700;color:#fff;flex:0 0 auto;
  font-size:calc(var(--s) * .42);box-shadow:inset 0 0 0 2px var(--ring);overflow:hidden;line-height:1}
.avatar.lg{--s:84px}
.avatar.sm{--s:28px}
.avatar.xs{--s:22px}

/* ---------- Karten / Listen ---------- */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px;border:0}
.stack{display:flex;flex-direction:column;gap:12px}
.list-item{display:flex;gap:13px;align-items:flex-start}
.list-item .body{flex:1;min-width:0}
.title-row{display:flex;align-items:center;gap:8px}
.item-title{font-family:var(--font-d);font-weight:700;font-size:16.5px;color:var(--ink);word-break:break-word}
.item-note{color:var(--ink-2);font-size:14px;margin-top:4px;white-space:pre-wrap;word-break:break-word}
.meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px;margin-top:10px}
.meta .by{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:500}
.dot-sep{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.6}

.trash{appearance:none;border:0;background:transparent;color:var(--muted);width:34px;height:34px;border-radius:10px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.trash:active{transform:scale(.92);background:rgba(214,69,69,.12);color:#d64545}

/* Werkzeugleiste (Bearbeiten + Löschen) auf Sammlungs-Karten */
.item-tools{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.edit-btn{appearance:none;border:0;background:transparent;color:var(--muted);width:34px;height:34px;border-radius:10px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.edit-btn:active{transform:scale(.92);background:rgba(110,42,92,.12);color:var(--plum)}

.linkrow{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-weight:600;font-size:13.5px;color:var(--plum);background:rgba(110,42,92,.10);padding:6px 11px;border-radius:999px}

/* ---------- Buttons ---------- */
.btn{appearance:none;border:0;cursor:pointer;font-family:var(--font-d);font-weight:700;font-size:15.5px;
  padding:13px 18px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .08s ease,box-shadow .2s ease}
.btn:active{transform:scale(.97)}
.btn-primary{color:var(--ink);background:var(--grad-warm);box-shadow:0 10px 22px rgba(239,144,56,.36)}
.btn-accent{color:var(--ink);background:var(--grad-warm);box-shadow:0 10px 22px rgba(239,144,56,.36)}
.btn-soft{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-danger{background:rgba(214,69,69,.14);color:#c23636}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ---------- Formulare (einheitlich Umschalter-Beige) ---------- */
.field{margin-bottom:12px}
.field > label{display:block;font-weight:600;font-size:13px;color:var(--ink-2);margin:0 2px 5px}
.field-row{display:flex;gap:10px}
.field-row .field{flex:1;min-width:0;margin-bottom:12px}
.input,.textarea{-webkit-appearance:none;appearance:none;width:100%;border:1.5px solid #E6DBC2;background:var(--surface-2);border-radius:12px;
  padding:11px 13px;font-size:16px;line-height:1.3;color:var(--ink);outline:none;transition:border-color .15s,background .15s,box-shadow .15s}
.textarea{resize:vertical;min-height:68px;line-height:1.45}
.input:focus,.textarea:focus{border-color:#D8C8A4;background:#FFFDF6;box-shadow:0 0 0 3px rgba(181,132,26,.14)}
/* native Datums-/Zeit-Felder auf gleiche Größe wie Textfelder normalisieren */
.input[type="date"],.input[type="time"]{-webkit-appearance:none;appearance:none;text-align:left;min-height:0}
.input[type="date"]::-webkit-date-and-time-value{text-align:left}
.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="time"]::-webkit-calendar-picker-indicator{margin:0}

.pin{letter-spacing:.5em;text-align:center;font-family:var(--font-d);font-weight:700;font-size:22px;padding:12px}

.choices{display:flex;flex-wrap:wrap;gap:9px}
.chip-choice{appearance:none;border:1.5px solid var(--line);background:var(--surface-2);border-radius:13px;
  min-width:46px;height:46px;padding:0 6px;font-size:22px;cursor:pointer;display:grid;place-items:center}
.chip-choice.sel{border-color:var(--plum);background:rgba(110,42,92,.10);transform:scale(1.04)}
.swatch{width:38px;height:38px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer}
.swatch.sel{box-shadow:0 0 0 3px var(--ink)}

/* Art-Umschalter (Treffen / Eintrag) */
.seg-art button.on{background:var(--grad-plum);color:#fff}
.form-hint{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.4}

/* Sammlung-Umschalter (Serien / Bücher / Rezepte) */
.seg-sub{margin-bottom:16px}
.seg-sub button.on{background:var(--grad-plum);color:#fff}

/* Kategorie-Chips */
.cat-choices{gap:8px}
.cat-chip{appearance:none;border:1.5px solid var(--line);background:transparent;border-radius:999px;
  padding:8px 14px 8px 10px;font-family:var(--font-d);font-weight:600;font-size:14px;color:var(--ink-2);
  cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.cat-chip .cat-dot{width:14px;height:14px;border-radius:50%;background:var(--cc)}
.cat-chip.sel{border-color:var(--cc);background:#f3ecf1;background:color-mix(in srgb, var(--cc) 13%, #fff);color:var(--ink)}

/* ---------- Reaktionen (Emotes auf Sammlungs-Beiträgen) ---------- */
.collection-card{cursor:pointer}
.reactions{display:flex;flex-wrap:wrap;gap:6px}
.collection-box .reactions{margin-top:10px}
.reaction{display:inline-flex;align-items:center;justify-content:center;background:var(--surface);border:2px solid var(--reaction-color,var(--line));border-radius:999px;box-sizing:border-box}
.reaction.chip{width:30px;height:30px;font-size:15px;line-height:1}
.reaction.full{gap:6px;padding:5px 12px 5px 9px;font-size:13px;font-weight:600;color:var(--ink-2)}
.reaction.full .rx-emote{font-size:17px;line-height:1}
.reaction.full .rx-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.reaction.full.mine{cursor:pointer;background:color-mix(in srgb, var(--reaction-color,#999) 14%, #fff)}
.reaction.full.mine:active{transform:scale(.96)}

/* Reagieren-Bereich in der Großansicht */
.react-area{margin-top:16px}
.react-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:8px}
.react-area .reactions{margin-bottom:12px}
.react-bar{display:flex}
.react-toggle{appearance:none;border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink-2);border-radius:999px;padding:9px 15px;font-family:var(--font-d);font-weight:700;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.react-toggle .rt-ico{display:inline-flex;color:var(--accent,var(--plum))}
.react-toggle .rt-ico svg{width:19px;height:19px}
.react-toggle:active{transform:scale(.97)}
.react-palette{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.react-opt{appearance:none;border:2px solid var(--line);background:var(--surface-2);border-radius:14px;width:48px;height:48px;font-size:25px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .1s ease}
.react-opt:active{transform:scale(.9)}
.react-opt.on{border-color:var(--accent,var(--plum));background:color-mix(in srgb, var(--accent,var(--plum)) 12%, #fff)}

/* ---------- Maracuja-Bewertung (ersetzt Sterne bei Serien/Büchern + „Hab ich auch") ---------- */
.mrc{display:block;flex:0 0 auto}
.mrc.off{filter:grayscale(1) opacity(.32)}
.mrc > svg{display:block;width:100%;height:100%;pointer-events:none}
.mrc-rating{display:inline-flex;align-items:center;gap:3px}
.mrc-rating .mrc{width:18px;height:18px}
.detail-stars .mrc-rating .mrc{width:22px;height:22px}
/* Anwählbare Maracuja = echter Button (feuert auf iOS zuverlässig). Reiner Reset; die Größe
   kommt von der inneren .mrc über die Kontext-Selektoren darunter. */
.mrc-pick{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;line-height:0;-webkit-tap-highlight-color:transparent}
.mrc-pick:active{transform:scale(.88)}
.mrc-rating.pick{gap:7px}
.mrc-rating.pick .mrc{width:32px;height:32px}
.seen-picker .mrc-pick .mrc,.mrc-rating.pick .mrc-pick .mrc{padding:1px}

/* ---------- „Hab ich auch"-Bereich (nur Detailansicht) ---------- */
.seen-area{margin-top:16px}
.seen-list{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.seen-row{display:flex;align-items:center;gap:10px}
.seen-row .seen-mid{flex:1 1 auto;min-width:0}
.seen-who{font-size:13px;color:var(--ink-2);font-weight:600;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seen-row.mine .seen-who{color:var(--plum)}
.seen-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.seen-toggle{appearance:none;border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink-2);border-radius:999px;padding:9px 15px;font-family:var(--font-d);font-weight:700;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.seen-toggle:active{transform:scale(.97)}
.seen-toggle .seen-ico{display:inline-flex}
.seen-toggle .seen-ico .mrc{width:19px;height:19px}
.seen-remove{appearance:none;border:0;background:transparent;color:var(--muted);font-family:var(--font-d);font-weight:700;font-size:13px;cursor:pointer;padding:9px 6px}
.seen-remove:active{opacity:.55}
.seen-picker{display:none;align-items:center;gap:8px;margin-top:12px}
.seen-picker .mrc{width:34px;height:34px}

/* „Hab ich auch" v2: Zeilen (Avatar + Name + Sterne), Sheet-Picker, Avatar-Reihe auf Karten */
.seen-row .avatar{--s:28px}
.seen-name{flex:1 1 auto;min-width:0;font-weight:600;font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seen-row .stars{flex:0 0 auto}
.seen-pick-wrap{display:flex;justify-content:center;padding:8px 0 4px}
.seen-avatars{display:flex;align-items:center;margin-top:10px}
.seen-avatars .avatar.seen-mini{--s:24px;margin-left:-7px;box-shadow:inset 0 0 0 2px var(--ring),0 0 0 2px var(--surface)}
.seen-avatars .avatar.seen-mini:first-child{margin-left:0}
.seen-more{margin-left:7px;font-size:12px;font-weight:700;color:var(--muted)}

/* ---------- Tea: Reaktionen (Kommentar-Thread, Chat-Optik) ---------- */
.tc-sep{height:1px;background:var(--line);margin:16px 0 14px}
.tc-list{display:flex;flex-direction:column;gap:12px}
.tc-empty{color:var(--muted);font-size:13.5px;padding:2px 0 4px}
.tc-row{display:flex;gap:9px;align-items:flex-start}
.tc-bubble{position:relative;flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line);border-radius:5px 14px 14px 14px;padding:8px 12px 9px}
.tc-row.mine .tc-bubble{background:#F6EAF2;border-color:transparent}
.tc-head{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.tc-name{font-family:var(--font-d);font-weight:700;font-size:13px;color:var(--plum);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tc-time{font-size:11px;color:var(--muted);flex:0 0 auto;margin-left:auto}
.tc-text{color:var(--ink);font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.tc-acts{display:flex;gap:16px;margin-top:6px}
.tc-act{appearance:none;border:0;background:transparent;padding:0;font-family:var(--font-d);font-weight:700;font-size:12px;color:var(--muted);cursor:pointer}
.tc-act:active{opacity:.55}
.tc-act.tc-del{color:#c23636}
.tc-children{margin-top:12px;margin-left:18px;padding-left:13px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:12px}
.tc-reply-host{margin-top:10px}
.tc-reply-host:empty{display:none}
.tc-compose{display:flex;gap:8px;align-items:flex-end}
.tc-compose-top{margin-top:14px}
.tc-input{min-height:0;height:46px;padding:12px 13px;resize:none;flex:1 1 auto}
.tc-send{flex:0 0 auto;height:46px;padding:0 17px;border-radius:13px;box-shadow:none}

/* Avatare der Reagierenden — generell nebeneinander (nie überlappend) */
.tea-card-foot{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.tea-card-foot .tea-readmore{margin-top:0}
.tea-commenters{display:flex;align-items:center;margin-left:auto;padding-left:6px;gap:6px;flex-wrap:wrap}
.tea-commenters .tea-commenter{box-shadow:inset 0 0 0 2px var(--ring)}
.tea-commenters-label{margin-left:2px;font-size:12px;font-weight:700;color:var(--muted)}

/* News-Karte: Avatare der Reagierenden unter der Zeit-Zeile (linksbündig) */
.collection-box .tea-commenters{margin-top:10px;margin-left:0;padding-left:0}

/* News-Bild: frei zoom-/verschiebbar im 16:10-Rahmen (nur News, Rezepte unberührt) */
.news-post .recipe-news-frame.news-frame-zoom{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2);margin-bottom:8px}
.news-post .recipe-news-frame.news-frame-zoom > .news-img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}

/* News-Zuschnitt im Bearbeiten-Dialog (ziehen zum Verschieben, Regler zum Zoomen) */
.news-crop{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2);touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;margin-bottom:12px}
.news-crop:active{cursor:grabbing}
.news-crop-img{position:absolute;left:0;top:0;max-width:none;pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.news-zoom{width:100%;display:block;accent-color:var(--plum)}

/* ---------- "Neues"-Punkte (gelbe Kreise an Kategorien) ---------- */
.seg-dot{display:none;width:8px;height:8px;border-radius:50%;background:#FFC400;flex:0 0 auto;box-shadow:0 0 0 1.5px rgba(181,132,26,.30)}
.seg-dot.on{display:block}
.seg-sub button.on .seg-dot{box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.tabbar .tab{position:relative}
.tab-badge{position:absolute;top:6px;left:calc(50% + 6px);width:9px;height:9px;border-radius:50%;background:#FFC400;box-shadow:0 0 0 2px rgba(251,245,230,.95);display:none;z-index:2;pointer-events:none}
.tab-badge.on{display:block}

/* "Neues"-Punkt am EINZELNEN Beitrag (Sammlung/Tea/News/Ideen) — obere RECHTE Ecke, ragt
   bewusst über den Kartenrand hinaus (Notification-Badge-Optik). */
.collection-card,.tea-card{position:relative;overflow:visible}
.post-dot{position:absolute;top:-7px;right:-7px;z-index:6;width:16px;height:16px;border-radius:50%;background:#FFC400;box-shadow:0 0 0 3px var(--surface),0 2px 5px rgba(20,58,51,.30);display:none;pointer-events:none}
.post-dot.on{display:block}

/* ---------- Pull-to-Refresh (installierte App) ---------- */
.ptr{position:fixed;top:calc(var(--safe-t, 0px) + 6px);left:50%;transform:translateX(-50%) translateY(-64px);z-index:90;width:40px;height:40px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-sm);display:grid;place-items:center;opacity:0;pointer-events:none}
.ptr.reset{transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease}
.ptr-spin{width:20px;height:20px;border:2.5px solid rgba(20,58,51,.22);border-top-color:var(--plum);border-radius:50%}
.ptr.ready .ptr-spin{border-top-color:var(--gold-deep)}
.ptr.spin .ptr-spin{animation:spin .7s linear infinite}

/* ---------- Profil: „Mit wem teilen?" als deutlicher gefüllter Button ---------- */
.profile-card .share-cta{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--grad-plum);color:#fff;text-align:center;font-size:16px;border-radius:14px;padding:13px 18px;margin:0 0 14px;box-shadow:0 10px 22px rgba(110,42,92,.30)}
.profile-card .share-cta:active{transform:scale(.97)}
.profile-card .share-cta svg{width:19px;height:19px}

/* ---------- Detail-Vollansicht (Tea / News): zwei wischbare Seiten ---------- */
.detail-overlay{position:fixed;inset:0;z-index:48;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--safe-t) + 16px) 12px calc(var(--safe-b) + 16px);background:radial-gradient(150% 125% at 50% -10%, #62D8C6 0%, #33C2AF 48%, #18A492 100%);opacity:0;transition:opacity .28s ease;-webkit-tap-highlight-color:transparent}
.detail-overlay.open{opacity:1}
.detail-x{position:absolute;top:calc(var(--safe-t) + 10px);right:14px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;background:rgba(20,58,51,.5);color:#fff;font-size:24px;line-height:1;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.detail-x:active{transform:scale(.92)}
.detail-card{position:relative;width:100%;max-width:480px;height:100%;max-height:780px;background:var(--cream);display:flex;flex-direction:column;transform:scale(.96);transition:transform .3s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 18px 36px rgba(7,40,36,.4))}
.detail-overlay.open .detail-card{transform:scale(1)}
.detail-card::before,.detail-card::after{content:"";position:absolute;left:0;right:0;height:12px;background-repeat:repeat-x;background-size:24px 12px;pointer-events:none}
.detail-card::before{top:-11px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='12'%3E%3Cpolygon%20points='0,12%2012,0%2024,12'%20fill='%23FBF5E6'/%3E%3C/svg%3E")}
.detail-card::after{bottom:-11px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='12'%3E%3Cpolygon%20points='0,0%2012,12%2024,0'%20fill='%23FBF5E6'/%3E%3C/svg%3E")}
.detail-perfo{flex:0 0 auto;height:30px;background-image:radial-gradient(circle at center, var(--plum) 3px, transparent 3.6px);background-size:34px 100%;background-repeat:repeat-x;background-position:center}
.detail-viewport{flex:1 1 auto;min-height:0;overflow:hidden;position:relative}
.detail-track{display:flex;width:200%;height:100%;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.detail-track.dragging{transition:none}
.detail-page{flex:0 0 50%;width:50%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
.detail-page-inner{padding:2px 18px 14px;min-height:100%;display:flex;flex-direction:column}
.detail-news-frame{position:relative;width:100%;flex:1 1 auto;min-height:280px;max-height:56vh;overflow:hidden;background:var(--surface-2);border-radius:var(--radius-sm)}
.detail-news-frame > .news-img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.detail-caption{flex:0 0 auto;margin-top:12px;color:var(--plum);font-size:15.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.detail-tea-title{margin-top:6px;font-family:var(--font-d);font-weight:700;font-size:22px;color:var(--plum);line-height:1.3;word-break:break-word}
.detail-tea-text{margin-top:10px;color:var(--ink);font-size:15.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.detail-meta{flex:0 0 auto;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px;margin-top:14px}
.detail-meta .by{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:500}
.detail-actions{flex:0 0 auto;display:flex;gap:10px;margin-top:auto;padding-top:16px}
.detail-actions .btn{flex:1}
.detail-comments-title{flex:0 0 auto;font-family:var(--font-d);font-weight:700;font-size:18px;color:var(--plum);margin:4px 0 12px}
.detail-comments-area{flex:1 0 auto;background:color-mix(in srgb, #33C2AF 15%, #fff);border:1px solid color-mix(in srgb, #33C2AF 30%, #fff);border-radius:var(--radius-sm);padding:10px 12px}
.detail-composer{flex:0 0 auto;background:var(--cream);padding-top:12px;padding-bottom:2px}
.detail-composer .tc-compose-top{margin-top:0}
.detail-dots{flex:0 0 auto;display:flex;justify-content:center;align-items:center;gap:11px;padding:9px 0 13px}
.detail-dot{appearance:none;padding:0;cursor:pointer;width:13px;height:13px;border-radius:50%;background:transparent;border:2px solid var(--plum);transition:width .2s ease,height .2s ease,background .2s ease}
.detail-dot.on{width:15px;height:15px;background:var(--plum)}

/* Detail-Vollansicht (Sammlung): eine Seite, sonst gleiche Karte wie Tea/News */
.detail-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.detail-stars{margin-top:12px}

/* Rezept-Karten & -Detail: Titelbild mit frei wählbarem Ausschnitt (zoom/fx/fy) */
.recipe-news-frame.news-frame-zoom{position:relative;aspect-ratio:16/10;overflow:hidden}
.recipe-news-frame.news-frame-zoom > .news-img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}