/* ============ Design Tokens ============ */
:root{
  /* Warmes, neutrales Dark-Theme (charcoal) */
  --bg: #0d0e10;
  --bg-elev: #141517;
  --card: #17181b;
  --card-2: #111214;

  /* Text in leicht warmem Weiß */
  --text: #f4efe7;
  --text-2:#d6cfc5;
  --text-dark:#444444;

  /* Brand in Amber/Gold mit dezentem Orange-Übergang */
  --brand:#FFB348;     /* helles Amber */
  --brand-2:#FF8C2A;   /* warmes Orange */

  --error:#ff6b6b;

  /* warme, dunkle Border-Farbe */
  --border:#2a231c;

  /* weichere, tiefere Schatten */
  --shadow: 0 10px 30px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.25);

  --radius-xl: 16px;
  --radius-lg: 14px;
  --radius-md: 12px;
  --sp-1: 8px;  --sp-2: 12px; --sp-3: 16px; --sp-4: 20px; --sp-5: 28px;
}

/* Reset / Base */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font:16px system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Color Emoji", "Apple Color Emoji";
  background:
    radial-gradient(1200px 500px at -10% -10%, rgba(255,179,72,.06), transparent 40%),
    radial-gradient(900px 380px at 120% -5%, rgba(255,140,42,.05), transparent 45%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--brand); text-decoration:none }
.hidden{ display:none }

/* Safe areas */
.view{ padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }

/* Layout container */
.container{ max-width: 520px; margin: auto; padding: 0 var(--sp-3); }

/* Card */
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) ,
    var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow);
}

/* Typography */
.title-lg{ margin:0 0 var(--sp-4); font-size:22px; font-weight:700; letter-spacing:.2px }
.muted{ color:var(--text-2); }

/* Forms */
.form{ display:grid; gap: var(--sp-3); }
.label{ display:grid; gap:6px; font-size:14px; color:var(--text-2); }
.input{
  width:100%;
  background:var(--card-2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  outline:none;
}
.input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(255,179,72,.18), 0 0 0 1px rgba(255,140,42,.18) inset;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border:1px solid transparent;
  font-weight:600;
  cursor:pointer;
}
.btn-primary{
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#1a1007;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  box-shadow: 0 8px 22px rgba(255,140,42,.30), 0 1px 0 rgba(255,255,255,.08) inset;
}
.btn-primary-light{
  background:linear-gradient(0deg, var(--brand), var(--brand-2));
  color:#1a1007;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  box-shadow: 0 8px 22px rgba(255,140,42,.30);
}
.btn-primary-dark{
  color:#f9f4ee;
  background:
    linear-gradient(180deg, rgba(255,179,72,.16), rgba(255,140,42,.26)),
    linear-gradient(180deg, var(--card-2), var(--card));
  border:1px solid rgba(255,165,60,.38);
  border-radius: var(--radius-md);
  box-shadow:
    0 10px 26px rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: filter .15s ease, transform .1s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active{ transform: translateY(1px); }

/* Errors */
.error{ margin-top:8px; color:var(--error); min-height:20px }

/* Chatlist */
.list{ list-style:none; padding:0; margin: 12px 0; display:grid; gap:12px }
.list li{
  background:var(--card);
  border:1px solid var(--border);
  padding:14px;
  border-radius: var(--radius-lg);
  display:flex; align-items:center; gap:10px;
}
.list li:active{ transform:translateY(1px) }

/* Chat screen */
.topbar{ display:flex; align-items:center; gap:12px; margin-bottom:10px }
.topbar h2{ flex:1; margin:0; font-size:18px }

/* Nachrichten-Stream */
.messages{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding:10px;
  overflow:auto;
  height: calc(100dvh - 220px);
  background:
    radial-gradient(600px 200px at 15% -10%, rgba(255,179,72,.06), transparent 40%),
    radial-gradient(600px 200px at 90% 0%, rgba(255,140,42,.05), transparent 45%),
    var(--bg-elev);
  border:1px solid var(--border);
  border-radius: var(--radius-xl);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.messages::-webkit-scrollbar{ width: 0; height: 0; display: none; }

/* Bubble */
.msg{
  max-width: min(82%, 640px);
  padding:12px 14px;
  border-radius:16px;
  line-height:1.35;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  display:inline-block;
  position: relative;
  word-wrap: break-word;
}
.msg.user{
  margin-left:auto;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#1a1007;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  border-bottom-right-radius:6px;
  box-shadow: 0 10px 24px rgba(255,140,42,.25);
}
.msg.assistant{
  margin-right:auto;
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  border-bottom-left-radius:6px;
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,179,72,.06);
}

/* Inhalt + Zeit */
.msg-content{ display:block; }
.msg-time,.msg-options{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:var(--text-2);
  opacity:.8;
  text-align:right;
}


/* Cursor NUR beim Stream */
.msg.assistant.streaming::after{
  content:"";
  display:inline-block;
  width:8px; height:16px;
  margin-left:4px;
  background: currentColor;
  opacity:.35;
  vertical-align:-2px;
  animation: blink 1s steps(1,end) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.msg.assistant.streaming .cursor {
  display:inline-block;
  width:0.6ch;
  border-left:2px solid currentColor;
  animation: blink 1s step-end infinite;
  margin-left: 2px;
  vertical-align: -2px;
}

/* „denkt nach…“ dezent */
.msg.assistant .thinking {
  opacity: .7;
  font-style: italic;
  margin-left: 6px;
  font-size: .95em;
}

/* Composer */
.composer{
  position: sticky; bottom:0; margin-top:10px;
  display:flex; gap:8px;
  background: var(--bg);
  padding-top:8px;
}
.composer input{
  flex:1;
  padding:12px 14px;
  border-radius: var(--radius-lg);
  border:1px solid var(--border);
  background:var(--card-2); color:var(--text);
}
.composer button{
  padding:12px 14px;
  border-radius: var(--radius-lg);
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#1a1007; border:0; font-weight:700;
  box-shadow: 0 8px 22px rgba(255,140,42,.30);
}

/* Textarea im Composer */
.composer textarea {
  flex: 1;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  line-height: 1.4;
  resize: none;
  min-height: 48px;
  max-height: 160px;
  overflow-y: auto;
}
.composer textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255,179,72,.18);
}

/* ===== Chat Cards ===== */
#chat-list { list-style:none; margin: 12px 0; padding: 0; display:grid; gap: var(--sp-3); }

.chat-card{
  display:flex; align-items:center; gap: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-3);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.chat-card:hover{ background: #1a1c20; border-color: rgba(255,165,60,.26); }
.chat-card:active{ transform: translateY(1px); }
.chat-card:focus{ outline: 2px solid rgba(255,179,72,.35); outline-offset: 2px; }

.chat-card[data-unread="1"]{
  border-color: rgba(255,165,60,.35);
  box-shadow: 0 0 0 1px rgba(255,165,60,.22) inset, var(--shadow);
}

/* Avatar */
.avatar-wrap { flex: 0 0 auto; }
.avatar{
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; display:block;
  background: var(--card-2);
  border: 1px solid var(--border);
}

/* Body */
.card-body{ flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; }

/* Kopfzeile: Titel + Datum */
.head{
  display:flex; align-items: baseline; gap: var(--sp-2);
  min-width: 0;
}
.title{
  font-weight: 700; letter-spacing: .2px;
  font-size: 16px;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.date{
  margin-left:auto; flex: 0 0 auto;
  font-size: 12px; color: var(--text-2);
  opacity: .9;
}

/* Snippet */
.snippet{
  color: var(--text-2);
  font-size: 14px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  margin-top: 10px;
}

/* Kleine Screens */
@media (max-width: 420px){
  .avatar{ width: 44px; height: 44px; }
  .title{ font-size: 15px; }
}
/* Große Screens */
@media (min-width: 720px){
  .avatar{ width: 56px; height: 56px; }
  .title{ font-size: 17px; }
}

/* Skeleton */
.chat-skeleton{
  display:flex; align-items:center; gap: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-3);
}
.chat-skel-avatar{ width: 52px; height: 52px; border-radius:50%; background: var(--card-2); }
.chat-skel-line{ height: 12px; border-radius: 8px; background: var(--card-2); }
.chat-skel-line.w1{ width: 60%; } .chat-skel-line.w2{ width: 30%; } .chat-skel-line.w3{ width: 90%; }
@keyframes shimmer{ 0%{opacity:.6} 50%{opacity:1} 100%{opacity:.6} }
.chat-skeleton .chat-skel-avatar, .chat-skeleton .chat-skel-line{ animation: shimmer 1.2s ease-in-out infinite; }

.msg-content { display:block; }
.msg-time { display:block; font-size:12px; color:#7A7A7A; margin-top:4px; opacity:0.7; }

/* Kontext-Menü */
.lp-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.35); display: none; z-index: 50; }
.lp-menu{
  position: absolute; min-width: 160px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 6px;
}
.lp-item{ padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.lp-item:hover{ background: #1a1c20; }
.lp-danger{ color: var(--error); font-weight: 600; }

/* Bottom Tabbar */
.tabbar{
  position: fixed;
  left:0; right:0; bottom:0;
  z-index: 20;
  display:flex; justify-content:space-around; align-items:stretch;
  height: 64px;
  padding: 0 max(8px, env(safe-area-inset-right)) calc(max(8px, env(safe-area-inset-bottom))/2) max(8px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(13,16,24,.75), rgba(13,16,24,.95));
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.06);
}
.tab-item{
  appearance:none; background:transparent; border:0; outline:0;
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:8px 6px;
  color: var(--text-2);
  position: relative;
  border-radius: 12px;
}
.tab-item:active{ transform: translateY(1px); }
.tab-ic{ width: 22px; height: 22px; fill: currentColor; opacity:.9; }
.tab-label{ font-size: 12px; line-height:1; letter-spacing:.2px; }
.tab-item.active{ color: var(--brand); }
.tab-item .tab-indicator{
  position: absolute; bottom: 4px;
  width: 24px; height: 3px; border-radius: 999px;
  background: currentColor;
  opacity: 0; transform: scaleX(.5);
  transition: opacity .15s ease, transform .2s ease;
}
.tab-item.active .tab-indicator{ opacity: .9; transform: scaleX(1); }

/* Platz unten lassen */
body{ padding-bottom: calc(64px + max(8px, env(safe-area-inset-bottom))); }

/* Menü */
.menu-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); }
.menu-btn{
  width:100%;
  display:flex; align-items:center; gap:12px;
  padding: var(--sp-3);
  background: var(--card);
  color: var(--text);
  border:1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  cursor:pointer; text-align:left;
  transition: background .15s ease, transform .1s ease, border-color .15s ease;
}
.menu-btn:hover{ background:#1a1c20; border-color: rgba(255,165,60,.26); }
.menu-btn:active{ transform:translateY(1px); }
.menu-btn.active{ outline: 2px solid rgba(255,179,72,.35); }
.menu-btn .ic{ width:22px; height:22px; fill: currentColor; opacity:.9; flex:0 0 auto; }
.menu-title{ font-weight:700; letter-spacing:.2px; }
.menu-sub{ font-size:13px; color:var(--text-2); }

/* ===========================
   Bottom-Sheet (einheitlich)
   =========================== */
.sheet.hidden{ display:none }
.sheet{ position:fixed; inset:0; z-index:30; }
.sheet-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.sheet-panel{
  position:absolute; left:0; right:0; bottom:0;
  background: var(--card);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: var(--sp-4);
  max-height: 80dvh;
  overflow: auto;
  max-width: 560px;
  margin: 0 auto;
}
.sheet-header{ display:flex; align-items:center; }
.sheet-header h3{ margin:0; font-size:18px; font-weight:700; }
.sheet-close{
  margin-left:auto; background:transparent; border:0;
  color:var(--text-2);
  font-size:22px; line-height:1; cursor:pointer;
}

/* Standard: Desktop (sichtbar) */
.sheet-panel.centered {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-xl);
  max-width: 480px;
  width: calc(100% - 32px);
  max-height: 80dvh;
  background: var(--card);
  padding: 15px 10px 15px 10px;
}

/* Handy / Touch */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .sheet-panel.centered { overflow: hidden; }
}

/* zweite vereinfachte Variante (aufgeräumt) – Farben beibehalten */
.sheet.hidden{ display:none }
.sheet{ position:fixed; inset:0; z-index:30; }
.sheet-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); z-index:0; }
.sheet-panel{
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: min(520px, calc(100% - 32px));
  height: 90dvh; max-height: 90dvh;
  background: var(--card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: calc(var(--sp-4) + env(safe-area-inset-top)) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; overflow: hidden; z-index:1;
}
.sheet-inner{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; width:100%; }
#attrSheetContent{
  flex:1 1 auto; min-height:0; width:100%; overflow-y:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none;
}
#attrSheetContent::-webkit-scrollbar{ display:none; }

@media (max-width: 768px), (hover:none) and (pointer:coarse){
  .sheet-panel{
    top:0; left:0; transform:none; width:100%; height:100dvh; max-width:none; max-height:100dvh;
    border-radius:0; border-left:0; border-right:0;
  }
}

/* Story/Media & Scroller – Farben beibehalten */
.story-media{ width:100%; aspect-ratio: 9 / 16; position: relative; }
.story-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

#attrSheetContent.scroll-y-ghost{ overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
#attrSheetContent.scroll-y-ghost::-webkit-scrollbar{ width:0; height:0; display:none; }

/* ==================================
   Character Slider
   ================================== */
:root{ --char-w: clamp(96px, 28vw, 140px); --char-h: calc(var(--char-w) * 0.75); }
.char-slider-wrap{ position:relative; display:flex; align-items:center; gap:8px; }
.char-slider{
  display:grid; grid-auto-flow:column; gap:12px; width:100%;
  overflow-x:auto; overscroll-behavior-x: contain; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 10px; border:1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--card-2);
}
.char-card{
  scroll-snap-align:center; min-width: var(--char-w); max-width: var(--char-w);
  border:1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); box-shadow: var(--shadow); cursor:pointer;
  padding:8px; display:grid; gap:8px; text-align:center;
}
.char-card img{
  width:100%; height: var(--char-h); object-fit:cover;
  border-radius: var(--radius-md); background: var(--bg-elev); border:1px solid var(--border);
}
.char-card .char-name{ font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.char-card.active{ outline: 2px solid rgba(255,179,72,.45); }
.char-nav{ flex:0 0 auto; width:36px; height:36px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--text); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.char-nav:active{ transform: translateY(1px); }
@media (max-width: 420px){ .char-nav{ width:32px; height:32px; } }

/* ==================================
   Segmented Radios (Pill Buttons)
   ================================== */
.seg{
  display:flex; gap:8px; flex-wrap:wrap;
  background:var(--card-2);
  border:1px solid var(--border);
  border-radius: var(--radius-xl);
  padding:6px;
}
.seg-item{ position:relative; }
.seg-item input{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.seg-item span{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding: 0 12px; border-radius: 999px;
  border:1px solid transparent; color:var(--text-2); background: transparent;
  font-weight:600; font-size:14px;
}
.seg-item input:checked + span{
  color:#1a1007;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 22px rgba(255,140,42,.25);
}
.seg-item span:active{ transform: translateY(1px); }

/* ==================================
   Kompaktere Controls im Sheet
   ================================== */
.sheet-panel .input{ padding: 10px 12px; min-height: 40px; font-size:14px; }
.sheet-panel .btn{ padding: 10px 14px; }
.sheet-panel .btn.btn-primary{ box-shadow: 0 6px 18px rgba(255,140,42,.26); }

/* Appbar */
.appbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  height:65px; padding:0 var(--sp-3);
  background:linear-gradient(180deg, rgba(13,16,24,.9), rgba(13,16,24,.6));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.appbar-title{ margin:0; font-size:18px; font-weight:600; color:var(--text); }
.appbar-center{ position:absolute; left:50%; transform:translateX(-50%); }
.page-title{ font-size:16px; font-weight:600; color:var(--text-2); }
.appbar-right{ display:flex; align-items:center; gap: var(--sp-3); }
.meins-link{ color: var(--text-2); font-weight:600; text-decoration:none; }
.meins-link:hover{ color: var(--brand); }
.credits-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding: 6px 10px; background: var(--card-2);
  border:1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow);
  font-size:14px; font-weight:600; color: var(--text);
}
.credit-icon{ font-size:16px; line-height:0; }
.credit-amount{ font-variant-numeric: tabular-nums; }

/* Success */
.success-wrapper{ display:grid; gap: var(--sp-3); text-align:center; justify-items:center; animation: fadeIn .4s ease; }
.success-wrapper .hint{ font-size:14px; color: var(--text-2); line-height:1.4; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* Back Button */
.back-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius: var(--radius-lg);
  border:1px solid var(--border); background: var(--card-2);
  color: var(--text); cursor:pointer; box-shadow: var(--shadow);
}
.back-btn:active{ transform:translateY(1px); }
.back-btn:hover{ color: var(--brand); }
.back-ic{ width:20px; height:20px; stroke: currentColor; }

.section-header{ display:flex; align-items:center; gap:12px; margin: 0 0 var(--sp-3); }
.section-header .title-lg{ margin:0; }

/* Date-Input dark */
input[type="date"].input{ appearance: none; -webkit-appearance: none; background: var(--card-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; width: 100%; font: inherit; color-scheme: dark; }
input[type="date"].input::-webkit-datetime-edit { color: var(--text); }
input[type="date"].input::-webkit-datetime-edit-fields-wrapper { background: transparent; }
input[type="date"].input::-webkit-datetime-edit-year-field,
input[type="date"].input::-webkit-datetime-edit-month-field,
input[type="date"].input::-webkit-datetime-edit-day-field { color: var(--text); }
input[type="date"].input::-webkit-calendar-picker-indicator{ filter: invert(1); opacity: .85; cursor: pointer; }
input[type="date"].input::-webkit-clear-button,
input[type="date"].input::-webkit-inner-spin-button{ display: none; }

/* Chips */
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background: var(--card-2); border:1px solid var(--border);
  box-shadow: var(--shadow); font-size:12px; line-height:1; color: var(--text-2);
}
.chip .chip-k{ color: var(--text); font-weight:700; letter-spacing:.2px; }
.chip .chip-v{ opacity:.95; }
.chip.muted{ opacity:.8; }

/* Chip-Buttons */
.chip-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:10px; border:1px solid var(--border);
  background: var(--card-2); box-shadow: var(--shadow);
  font-size:14px; font-weight:600; color: var(--text); cursor:pointer;
  transition: background .15s ease, transform .1s ease, border-color .15s ease;
}
.chip-btn:hover{ background:#1a2230; border-color: rgba(255,165,60,.26); }
.chip-btn:active{ transform:translateY(1px); }
.chip-btn.primary{
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  border:0; color:#1a1007;
  box-shadow: 0 8px 22px rgba(255,140,42,.28);
}
.chip-btn.primary:hover{ opacity:.95; }
.chip-btn.success{ background:#339933 !important; }

/* Tabellen */
.tbl-wrap{ overflow:auto; border-radius: var(--radius-xl); border:1px solid var(--border); }
.tbl{ width:100%; border-collapse:separate; border-spacing:0; background:var(--card); }
.tbl thead th{
  text-align:left; font-weight:700; font-size:14px; color:var(--text-2);
  background:#18191c; border-bottom:1px solid var(--border); position:sticky; top:0;
}
.tbl th,.tbl td{ padding:12px 14px; vertical-align:middle; border-bottom:1px solid rgba(255,255,255,.06); font-size:12px;}
.tbl tbody tr:hover td{background:#1a1c20; }
.tbl .col-id{ width:84px; }
.tbl .col-actions{ width:140px; }

/* File Upload */
.file-upload { display: flex; align-items: center; gap: 12px; background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 12px; position: relative; }
.file-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#file-name { flex: 1; font-size: 14px; color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file-upload--mini { gap: 6px; padding: 4px 8px; border-radius: var(--radius-sm); }
.file-upload--mini #file-name, .file-upload--mini .file-name { font-size: 10px; color: var(--text-3); }
.file-upload--mini button { padding: 2px 6px !important; font-size: 12px !important; }

/* Textarea (allgemein) */
textarea.input{
  width: 100%; min-height: 120px; background: var(--card-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 14px; outline: none; font: inherit; line-height: 1.35; resize: vertical; color-scheme: dark;
}
textarea.input::placeholder{ color: var(--text-2); opacity: .85; }
textarea.input:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,179,72,.18); }

.seg1{ background:var(--card-2); border:1px solid var(--border); border-radius: var(--radius-xl); padding:6px; }

/* Upload-Tabelle / Tooltip unverändert außer Farben */
.upload-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.upload-table th, .upload-table td { text-align: left; padding: 8px; border-bottom: 1px solid #2a231c; }
.img-tooltip { position: relative; cursor: pointer; color: #bbb; }
.img-tooltip-content { visibility: hidden; opacity: 0; transition: opacity 0.2s; position: absolute; top: 20px; left: 0; background: #1b1c1f; border: 1px solid #2a231c; padding: 4px; z-index: 1000; }
.img-tooltip-content img { width: 150px; height: auto; display: block; }
.img-tooltip:hover .img-tooltip-content { visibility: visible; opacity: 1; }

/* Mini-CSS für Responsiveness */
.chatbar{display:flex;align-items:center;gap:.6rem;min-width:0}
.chatbar-img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.chatbar-info{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.chatbar-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatbar-title .sep{opacity:.6;padding:0 .25rem}
.chatbar-stats{display:flex;align-items:center;gap:.8rem;margin-top:.15rem;font-size:.9rem;opacity:.9}
.chatbar-points,.chatbar-images{display:inline-flex;align-items:center;gap:.3rem}
.heart{width:14px;height:14px;fill:#e11d48}
.image-ic{width:15px;height:15px;fill:#fff}
@media (max-width: 380px){ .chatbar-title .story,.chatbar-title .sep, #Header_Briefe{display:none} }
@media (max-width: 320px){ .chatbar{gap:.5rem} .chatbar-info{flex-direction:row;align-items:center;gap:.5rem} .chatbar-points{font-size:.85rem} }

/* Filterbar */
.stories-filter{ display:grid; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-3); }
.story-search{ width:100% }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip-btn.active{ outline: 2px solid rgba(255,179,72,.35); }

/* Grid: Stories */
.stories-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); }
.story-card{
  display:block; background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius-xl); overflow:hidden; box-shadow: var(--shadow);
  transition: transform .06s ease, background .15s ease, border-color .15s ease; position: relative;
}
#attrSheetContent > .story-card{ display: flex; flex-direction: column; height: 100%; min-height: 0; }
.story-card:active{ transform: translateY(1px); }
.story-media{ position: relative; flex: 1 1 auto; min-height: 0; width: 100%; margin: 0 !important; }
.story-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding: 10px 10px 12px; min-height:30%;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.85) 40%, rgba(0,0,0,.95) 100%);
  color:#fff;
}
.story-title{
  font-weight:700; font-size: 17px; letter-spacing:.2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  margin-bottom:10px; margin-top:30px;
}
.story-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.story-tags .kw{
  display:inline-flex; align-items:center; padding: 3px 8px; border-radius: 999px;
  font-size: 12px; line-height: 1; background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(2px);
}
.story-excerpt{
  font-size: 12px; line-height: 1.25; opacity: .95;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (hover:hover){
  .story-card:hover{
    border-color: rgba(255,165,60,.32);
    box-shadow: 0 0 0 1px rgba(255,165,60,.18) inset, var(--shadow);
    background: linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--card);
  }
}
@media (max-width: 360px){ .stories-grid{ grid-template-columns: 1fr; } }
@media (min-width: 900px){
  .container{ max-width: 720px; }
  .stories-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Chips-Scroll */
.chips-scroll{
  position: relative; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
  touch-action: pan-x; cursor: grab; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.chips-row{
  display: inline-flex; gap: .5rem; padding: .5rem .75rem .5rem .5rem;
  min-width: max-content; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none;
}
.chips-scroll::-webkit-scrollbar{ display:none; }
.chips-scroll.--right{
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
}
.chips-scroll.--left.--right{
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.chips-scroll.--left:not(.--right){
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 100%);
}
.chips-scroll.drag{ cursor: grabbing; }
.chips-scroll.drag .chips-row{ scroll-behavior: auto; }

.ic { width: 16px; height: 16px; display:inline-block; vertical-align:-2px; }
.male   { color: #7fb7ff; } /* neutralisiert */
.female { color: #f7a0c7; }

/* XP/Herzen-Leiste */
.xp{ display:grid; gap:6px; min-width:80px; flex:1 1 0; }
@media (max-width: 480px){ .xp{ min-width:60px; } }
@media (max-width: 360px){ .xp{ min-width:50px; } }
.xp-head{ display:flex; align-items:baseline; gap:8px; font-size:12px; color:var(--text-2); }
.xp-count{ font-weight:700; color:var(--text); }
.xp-hint{ opacity:.9; }
.xp-bar{
  position:relative; height:8px; border-radius:999px; background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08); overflow:hidden;
}
.xp-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(90deg, #ffb348, #ff8c2a);
  box-shadow: 0 0 12px rgba(255,165,60,.35) inset;
  border-right: 1px solid rgba(255,255,255,.20);
  transition: width .35s ease;
}
@media (max-width: 380px){ .xp-head{ font-size:11px; } .xp-bar{ height:7px; } }

/* Lightbox / Captions – Farbangleich */
.pswp__custom-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 14px; font-size:14px; color:#fff; text-align:center;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65));
  pointer-events:none;
}

/* Letters Grid & Cards – Farben angleichen */
.letters-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); margin: var(--sp-3) 0; }
.letter-card{
  display:grid; grid-template-rows:auto auto; gap:12px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:var(--sp-3); box-shadow:var(--shadow);
  text-decoration:none; color:inherit;
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.letter-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,165,60,.35);
  box-shadow:0 12px 28px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05) inset;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--card);
}
.letter-thumb{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(180deg, #232428, #1a1b1e);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -40px 80px rgba(0,0,0,.35);
}
.letter-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.letter-thumb::after{
  content:""; position:absolute; inset:-10%;
  background:linear-gradient(115deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 28%);
  transform:translateX(-40%); opacity:0; transition:transform .6s ease, opacity .25s ease; pointer-events:none;
}
.letter-card:hover .letter-thumb::after{ transform:translateX(35%); opacity:1; }
.letter-badge{
  position:absolute; top:10px; right:10px; padding:4px 8px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.2px; color:#201104;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  box-shadow:0 6px 16px rgba(255,140,42,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.letter-card:not([data-new="1"]) .letter-badge{ display:none; }
.letter-meta{ display:grid; gap:4px; text-align:center; }
.letter-subject{ font-weight:700; color:var(--text); letter-spacing:.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.letter-date{ font-size:12px; color:var(--text-2); opacity:.95; }
.letter-modal{ display:block; }
.letter-paper{
  width:min(720px, 92vw); max-height:82dvh; margin:0 auto; padding:24px 22px; overflow:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; border-radius:var(--radius-xl);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 50% -20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #1f2024, #141518);
  box-shadow:0 18px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.handwritten{ font-family:"Caveat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size:22px; line-height:1.6; color:var(--text); white-space:pre-wrap; }
.letter-src{ display:none !important; }
.letter-text{ white-space:pre-wrap; }
.typed-cursor{ opacity:.5; }
html.glightbox-open, body.glightbox-open{ overflow:hidden !important; touch-action:none; }
.glightbox-container .ginlined-content, .glightbox-container .gslide-inline, .ginline-content{ overflow:visible !important; height:auto !important; max-height:none !important; padding:0 !important; }
.glightbox-container .ginner-container, .glightbox-container .gslide-media{ overflow:visible !important; }
.glightbox-clean .ginner-container, .gslide, .gslide-media, .gslide-inline, .gslide-description{ background:transparent !important; }
.glightbox-container .gslide{ box-shadow:none !important; }
.letter-paper{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent; }
.letter-paper::-webkit-scrollbar{ width:8px; }
.letter-paper::-webkit-scrollbar-track{ background:transparent; }
.letter-paper::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.35); border-radius:999px; border:2px solid transparent; background-clip:content-box; }
@media (pointer:coarse){ .letter-paper{ scrollbar-width:none; } .letter-paper::-webkit-scrollbar{ display:none; } }

/* Unlock-Card (Farben veredelt) */
.unlock-card{
  width:min(96vw,900px); height:min(92vh,96dvh);
  background:#0f1218; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.55);
  padding:16px; position:relative; overflow:hidden; display:flex; flex-direction:column;
}
.close-x{ position:absolute; top:10px; right:12px; font-size:28px; line-height:1; border:0; background:transparent; color:#efe8de; cursor:pointer; z-index:5; }
.viewer{ position:relative; flex:1; width:100%; height:100%; background:linear-gradient(180deg,#12151c,#0f1218); border-radius:12px; overflow:hidden; }
.unlock-canvas, .unlock-final{ position:absolute; inset:0; width:100%; height:100%; display:block; border-radius:12px; object-fit:contain; }
.unlock-final{ opacity:0; transition:opacity .45s ease; }
.badge{
  position:absolute; bottom:14px; left:14px;
  background:#22c55e; color:#04140a; font-weight:800; padding:.4rem .7rem; border-radius:999px;
  box-shadow:0 6px 20px rgba(34,197,94,.28); transform:scale(.95); opacity:0; transition:opacity .25s ease, transform .25s ease; z-index:4;
}
.badge.pop{ animation:badgePop .38s ease-out forwards; }
.badge.show{ opacity:1; }
@keyframes badgePop{ 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.08);opacity:1} 100%{transform:scale(1)} }
.shine{
  pointer-events:none; position:absolute; inset:0;
  background:
    radial-gradient(1200px 300px at -10% -20%, rgba(255,255,255,.18), transparent 40%),
    radial-gradient(500px 120px at 120% 0%, rgba(255,255,255,.12), transparent 35%),
    radial-gradient(300px 80px at 50% 110%, rgba(255,255,255,.10), transparent 40%);
  mix-blend-mode:overlay; opacity:.0; transition:opacity .35s ease; z-index:3;
}
.shine.on{ opacity:.85; }
@media (prefers-reduced-motion: reduce){ .unlock-final{ transition:none } .shine{ display:none } }

/* Zahlen ruhiger */
.amount-num, .price-eur, .pack-credits-num { font-variant-numeric: tabular-nums; }

/* Hero mit Amber-Schimmer */
.credit-hero{
  background:
    linear-gradient(180deg, rgba(255,165,60,.10), rgba(255,140,42,.06)) border-box,
    linear-gradient(180deg, var(--card), var(--card)) padding-box;
  border:1px solid rgba(255,165,60,.20);
}
.credit-hero-row{ display:grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; }
.credit-hero .title-lg{ margin:0; line-height:1.1; }
.credit-amount-line{ margin:0; line-height:1.1; }
.credit-amount-line .heart{ transform: translateY(1px); }
.amount-num{ line-height:1; }
.amount-unit{ color:var(--text-2); font-weight:600; }

/* Dezentere Chips */
.pill, .chip-badge, .chip-save, .chip-base{
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid var(--border); background:var(--card-2); color:var(--text-2);
}
.chip-badge{
  border-color: rgba(255,165,60,.35);
  color:#231205;
  background:
    linear-gradient(180deg, rgba(255,179,72,.28), rgba(255,140,42,.18)),
    var(--card-2);
}
.chip-save{
  border-color: rgba(255,165,60,.35);
  color:#ffe3c2;
  background:
    linear-gradient(180deg, rgba(255,179,72,.16), rgba(255,140,42,.12)),
    var(--card-2);
}
.chip-base{ opacity:.85; }

/* Packs */
.pack-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); }
@media (max-width: 377px){ .pack-grid{ grid-template-columns: 1fr; } }
@media (max-width: 430px){ .chip-save{ height:20px;font-size:11px; } .pack-grid{gap: 8px;} }


.pack-card{
  position:relative; overflow:hidden;
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow); padding: var(--sp-3); display:grid; gap:12px;
  transition: transform .06s ease, border-color .15s ease, background .15s ease;
}
.pack-card:hover{ border-color: rgba(42,140,255,.28); }
.pack-card:active{ transform: translateY(1px); }

.pack-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pack-credits{ display:inline-flex; align-items:center; gap:8px; font-weight:800; }
.pack-credits .heart{ width:16px; height:16px; fill:#e11d48; }
.pack-credits-unit{ color: var(--text-2); font-size:13px; }

/* Meta-Box ruhiger */
.pack-meta{
  display:grid; grid-template-columns: 1fr 1fr; gap:8px;
  padding:10px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid rgba(255,255,255,.06);
}
.meta-line{ display:flex; align-items:baseline; justify-content:space-between; }
.meta-line .muted{ font-size:12px; }

/* Preis + Rabattzeile */
.pack-foot{ display:flex; align-items:center; gap:10px; }
.price{ margin-right:auto; font-weight:800; letter-spacing:.2px; }
.price-eur{ font-size:18px; }

/* Button: ruhigeres Blau, wenig Glow */
.btn-pay{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; min-width:120px;
  padding:10px 14px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#000; font-weight:700; border:1px solid rgba(42,140,255,.45);
  box-shadow: 0 4px 12px rgba(42,140,255,.25);
  transition: filter .15s ease, transform .06s ease;
}
.btn-pay:hover{ filter: brightness(1.03); }
.btn-pay:active{ transform: translateY(1px); }
.btn-pay.btn-pay-block{ width:100%; margin-top:6px; }



/* Divider */
.social-login{ margin-top: 18px; }
.divider{ display:flex; align-items:center; gap:12px; color:#9aa3ae; font-size:14px; margin: 12px 0 14px; }
.divider:before,.divider:after{ content:""; height:1px; flex:1; background:#2a3240; }

/* Kompakter Google-Button – unabhängig von .btn */
.gbtn{
  display:none;             /* per JS sichtbar */
  width:100%;
  height:48px;
  padding:0 14px 0 12px;
  border-radius:12px;
  border:1px solid #2f3848;
  background:#111827;       /* dark card look */
  color:#e5e7eb;
  font-weight:600;
  font-size:15px;
  letter-spacing:.2px;
  outline:0;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.gbtn:hover{ border-color:#3a4457; transform: translateY(-1px); transition:all .12s ease; }
.gbtn:active{ transform: translateY(0); }

/* Icon & Label */
.gbtn .gicon{ width:20px; height:20px; display:block; }
.gbtn .glabel{ line-height:1; }

/* Harter Reset gegen globale .btn-Regeln */
.gbtn, .gbtn * { box-sizing: border-box; }
.gbtn svg { flex:0 0 auto; }

/* Light mode fallback */
@media (prefers-color-scheme: light){
  .gbtn{ background:#fff; color:#3c4043; border-color:#dadce0; }
  .divider:before,.divider:after{ background:#e5e7eb; }
}


/* Zeile unter dem Login-Button */
.row-actions{
  margin-top: 10px;
  display:flex; align-items:center; justify-content:center; gap:10px;
}

/* Link-Button (sekundär) */
.link-btn{
  appearance:none; background:transparent; border:0;
  color: var(--brand); font-weight:700; cursor:pointer;
  padding:0; line-height:1;
}
.link-btn:hover{ text-decoration: underline; }


/* Login mittig, aber ohne Shrink */
#view-login{
  min-height:100svh;
  display:flex;                 /* statt grid */
  align-items:center;           /* vertikal zentriert */
  justify-content:center;       /* horizontal zentriert */
  padding: max(16px, env(safe-area-inset-top))
           max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom))
           max(16px, env(safe-area-inset-left));
}

/* Container füllt Breite, bleibt auf großen Screens begrenzt */
#view-login .container{
  width:100%;
  max-width:560px;              /* gern anpassen (z.B. 600) */
  margin:0 auto;
  padding:0 var(--sp-3);
}

/* Karte füllt Container-Breite */
#view-login .card{
  width:100%;
  padding:28px 24px;
  border-radius:18px;
}

/* Optional: auf sehr kleinen Screens wirklich volle Breite */
@media (max-width:480px){
  #view-login .container{ max-width:none; }
}


/* Pull-to-Refresh Indicator (nur App) */
.ptr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  transition: transform 0.2s ease;
  z-index: 9999;
}
.ptr.ptr-show {
  transform: translateY(0);
}

.ptr .ptr-icon {
  width: 20px;
  height: 20px;
  border: 2px solid var(--text-2);
  border-top-color: transparent;
  border-radius: 50%;
  margin-right: 10px;
  /* Standard: kein Spin */
  animation: none;
}

.ptr.ptr-refreshing .ptr-icon {
  /* Nur wenn aktualisiert wird: drehen */
  animation: ptr-spin 1s linear infinite;
}

.ptr .ptr-text {
  color: var(--text-2);
  font-size: 14px;
}

@keyframes ptr-spin {
  to {
    transform: rotate(360deg);
  }
}



/* Vollbild-Overlay */
#jsload-spinner{
  display:none;
  position:fixed;
  inset:0;                   /* top:0; right:0; bottom:0; left:0 */
  z-index:9999;
  background:rgba(0,0,0,.35);
  align-items:center;
  justify-content:center;
}

/* Sichtbar, als Flex-Zentrierung */
#jsload-spinner.jsload--show{
  display:flex;
}

/* Box in der Mitte */
#jsload-spinner .jsload-box{
  min-width:120px;
  padding:20px 24px;
  border-radius:12px;
  background:#111827;        /* dunkles Grau */
  color:#fff;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}

/* Kreis-Spinner */
#jsload-spinner .jsload-circle{
  width:48px;
  height:48px;
  margin:0 auto 10px auto;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  animation:jsload-spin 0.9s linear infinite;
}

@keyframes jsload-spin{
  to { transform:rotate(360deg); }
}

#jsload-spinner .jsload-text{
  font:14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  opacity:.9;
}



.sheet-close-x{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--card-2);
  color: var(--text-2);
  box-shadow: var(--shadow);
  cursor:pointer;
  opacity:.9;
  z-index:99;
  margin-top:10px;
  margin-right:10px;
}
.sheet-close-x:hover{ color: var(--brand); }
.sheet-close-x:active{ transform: translateY(1px); }
.sheet-close-x svg{ display:block; }
@media (pointer:coarse){
  .sheet-close-x{ width:36px; height:36px; }
}





/* Glasiger Hero mit zartem Rand & Shine */
.credit-hero--glass{
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,165,60,.10), rgba(255,140,42,.06)) border-box,
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) padding-box;
  border:1px solid rgba(255,165,60,.22);
  overflow:hidden;
}
.credit-hero--glass::after{
  content:""; position:absolute; inset:-30%;
  background: radial-gradient(60% 30% at 120% -20%, rgba(255,179,72,.12), transparent 60%);
  pointer-events:none;
}

/* Balance-Pill rechts */
.balance-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.35);
}
.balance-pill .amount-num{ font-weight:800; letter-spacing:.2px; }

/* Steps Tag1–3 */
.claim-steps{
  display:flex; gap:8px; margin-top:12px;
  background: var(--card-2); border:1px solid var(--border);
  border-radius: 999px; padding:6px;
}
.step{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:0 12px; border-radius:999px;
  font-size:13px; font-weight:700; color: var(--text-2);
  border:1px solid transparent;
}
.step-active{
  color:#1a1007;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 20px rgba(255,140,42,.28);
}
.step-done{
  color:#ffe3c2;
  background: linear-gradient(180deg, rgba(255,179,72,.18), rgba(255,140,42,.12));
  border:1px solid rgba(255,165,60,.35);
}
.step-idle{ opacity:.8; }

/* Karten-Glow für aktiv */
.pack-card--glow{
  border-color: rgba(255,165,60,.35);
  box-shadow:
    0 12px 28px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,165,60,.20) inset;
}

/* Badge „Tag X“ rechts oben */
.tag-pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:26px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:800;
  color:#ffe3c2; background: linear-gradient(180deg, rgba(255,179,72,.16), rgba(255,140,42,.12));
  border:1px solid rgba(255,165,60,.35);
}
.tag-pill--active{
  color:#201104; background: linear-gradient(180deg, var(--brand), var(--brand-2));
  border-color: transparent; box-shadow: 0 8px 18px rgba(255,140,42,.28);
}

/* Claim-Button – präsenter */
.btn-claim{
  width:100%;
  padding:12px 14px;
  border-radius: 14px; border:0;
  font-weight:800; letter-spacing:.2px; cursor:pointer;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#1a1007;
  box-shadow: 0 10px 26px rgba(255,140,42,.30), 0 1px 0 rgba(255,255,255,.08) inset;
  transition: transform .06s ease, filter .14s ease;
}
.btn-claim:hover{ filter: brightness(1.02); }
.btn-claim:active{ transform: translateY(1px); }
.btn-claim[disabled]{
  cursor:not-allowed;
  background: linear-gradient(180deg, #2a2c31, #212227);
  color:#9aa3ae; box-shadow:none; border:1px solid rgba(255,255,255,.08);
}

/* Gesperrte Karten dunkler */
.pack-card[data-locked="1"]{
  opacity:.9;
  background: linear-gradient(180deg, #15161a, #121317);
}

/* Mikro-Animation für Herz in aktiver Karte */
@keyframes beat { 0%,100%{ transform:scale(1)} 50%{ transform:scale(1.08)} }
.pack-card--glow .pack-credits .heart{ animation: beat 1.6s ease-in-out infinite; transform-origin:center; }

.pack-card.is-disabled{
  opacity:.62;
  filter: grayscale(.35) brightness(.95);
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
}
.pack-card.is-disabled .pack-credits .heart{ animation:none !important; }
.pack-card.is-disabled .btn-claim{
  pointer-events:none;
  background: linear-gradient(180deg, #2a2c31, #212227);
  color:#9aa3ae; box-shadow:none; border:1px solid rgba(255,255,255,.08);
}




/* ========== Character Slider (Overlay-Style) ========== */
.char-slider{position:relative;display:flex;align-items:center;gap:8px;margin-top:12px}
.char-slider .nav{border:0;background:#00000040;color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;display:grid;place-items:center;user-select:none}
.char-slider .viewport{position:relative;flex:1;min-height:270px;overflow:hidden}

/* Slides + Transition */
.char-slider .slide{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateX(20%);transition:transform .32s ease,opacity .32s ease}
.char-slider .slide.is-active{opacity:1;pointer-events:auto;transform:translateX(0)}
.char-slider .slide.to-left{transform:translateX(-20%);opacity:0}
.char-slider .slide.from-right{transform:translateX(20%);opacity:0}
.char-slider .slide.to-right{transform:translateX(20%);opacity:0}
.char-slider .slide.from-left{transform:translateX(-20%);opacity:0}

/* Karte = nur Bild, Infos als Overlay */
#char-slider .card{
  position:relative;display:block;width:100%;padding:0;
  border-radius:16px;overflow:hidden;
  background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)
}

/* Bild füllt die Karte */
#char-slider .img{width:100%;max-width:none;aspect-ratio:16/10;background:#111214}
#char-slider .img img{width:100%;height:100%;object-fit:cover;display:block}

/* Overlay unten: Name, Geschlecht, Chips */
#char-slider .info{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;
  color:#fff;min-width:0;display:block;pointer-events:none
}
#char-slider .info::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.85));z-index:-1
}

/* Typo + Chips im Overlay */
/* Typo + Chips im Overlay */
#char-slider .name-row{
  display: flex;
  align-items: baseline;      /* gleicht Schriftlinien an */
  gap: 8px;                   /* Abstand zwischen Name und Geschlecht */
  margin: 30px 0 10px;
}

#char-slider .title{
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  -webkit-text-stroke: 0.6px rgba(0,0,0,.75);
  text-shadow:
    0 0 3px rgba(0,0,0,.9),
    0 0 6px rgba(0,0,0,.7),
    0 1px 3px rgba(0,0,0,.8);
  pointer-events: auto;
}

#char-slider .meta{
  font-size: 16px;
  font-weight: 700;
  color: #f0f0f0;
  opacity: .95;
  -webkit-text-stroke: 0.6px rgba(0,0,0,.75);
  text-shadow:
    0 0 2px rgba(0,0,0,.8),
    0 0 4px rgba(0,0,0,.7);
  pointer-events: auto;
}

/* Chips wie gehabt */
#char-slider .chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

#char-slider .chip{
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  color:#eee;
  pointer-events:auto;
}

/* Pfeile dezent */
#char-slider .nav{background:rgba(0,0,0,.35);backdrop-filter:blur(2px);box-shadow:0 6px 16px rgba(0,0,0,.35);color:#fff}

/* Mobile Tuning */
@media (max-width:700px){
  #char-slider .info::before{height:68%}
  #char-slider .title{font-size:19px}
}


.alert{ display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:14px; border:1px solid var(--border); background:var(--card-2); margin-bottom:10px;}
.alert.success{
  background: linear-gradient(180deg, rgba(255,179,72,.12), rgba(255,140,42,.08)), var(--card-2);
  border-color: rgba(255,165,60,.35);
}
.alert .title{ font-weight:700; margin:0 0 4px; }
.alert .body{ color: var(--text-2); font-size:14px; line-height:1.35; }


.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  color: var(--text-2);
  cursor: pointer;
  transition: all .15s ease;
}
.icon-btn:hover {
  color: var(--text-1);
  background: var(--card-3);
  border-color: var(--border-strong);
}
.icon-btn.danger:hover {
  color: #ff5b5b;
  border-color: rgba(255,91,91,0.4);
}
.icon-btn svg {
  width: 16px;
  height: 16px;
}


.options-view {
  padding: var(--sp-4);
}

.options-inner {
  background: var(--card);
  border-radius: var(--radius-xl);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}

.options-list {
  display: grid;
  gap: 12px;
}

.option-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}

/* Default Icons sichtbar, reported Icons versteckt */
.option-btn .reported-icon { display: none; }
.option-btn .default-icon svg,
.option-btn .reported-icon svg { width: 18px; height: 18px; fill: currentColor; }

/* Wenn gemeldet: */
.option-btn.is-reported {
  background: rgba(255,193,7,0.08);
  border-color: rgba(255,193,7,0.5);
  color: rgba(255,193,7,0.9);
}

/* Icons tauschen */
.option-btn.is-reported .default-icon { display: none; }
.option-btn.is-reported .reported-icon { display: inline-flex; }

/* Optional Label wechseln automatisch per CSS-Content */
.option-btn.is-reported .label::after {
  content: " – gemeldet";
  font-style: italic;
  opacity: 0.8;
}




.ic {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.rating {
  display: flex;
  gap: 10px;
}

.rating {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.rate-btn {
  width: 42px;
  height: 42px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-2);
  transition: all .15s ease;
}

.rate-btn .ic {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.rate-btn:hover {
  background: #1a1c20;
  color: var(--brand);
  border-color: rgba(255,165,60,.3);
}

.rate-btn.active.good {
  color: #22c55e;
  border-color: #22c55e88;
  background: #1f773f;
}

.rate-btn.active.bad {
  color: #ff6b6b;
  border-color: #ff6b6b88;
  background: rgba(255,107,107,0.12);
}

[data-tooltip] {
  position: relative;
  cursor: help;
  display: inline-block; /* wichtig, damit das Element eine eigene Position hat */
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%; /* über dem Element */
  left: 50%;
  transform: translateX(-50%);
  white-space: pre-line;
  background: var(--card-2);
  color: var(--text);
  font-size: 13px;
  line-height: 1.3;
  padding: 6px 10px;
  min-width:270px;
  border-radius: 8px;
  border: 1px solid #FF8C2A;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 9999;
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}