/* =========================================================
   Hi-Dorf – Light Theme (Mobile-first)
   ========================================================= */

[hidden]{ display:none !important; }

/* ---------- 1) Design Tokens ---------- */
:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#64748b;
  --accent:#14b8a6;
  --accent-strong:#0ea5a3;
  --border:#e5e7eb;
  --input:#ffffff;
  --danger:#e11d48;
  --shadow:0 8px 24px rgba(15,23,42,.08);
  --radius:16px;

  /* Layout-Variablen (bei Bedarf per JS aktualisieren) */
  --appbar-h:56px;   /* Top Appbar Höhe */
  --bn-h:64px;       /* Bottom-Nav Höhe */
  --composer-h:56px; /* Chat-Composer Höhe */
}

/* ---------- 2) Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
img,svg{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

/* ---------- 3) Utilities ---------- */
.muted{ color:var(--muted); }
.noscroll{ overflow:hidden; }
.safe-top{ padding-top:max(env(safe-area-inset-top),0px); }
.safe-bottom{ padding-bottom:max(env(safe-area-inset-bottom),8px); }
.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gap{ gap:12px; }
.flex1{ flex:1; }
.flex3{ flex:3; }
.mt-6{ margin-top:6px; }

/* Globale Card */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  margin:15px 0;
}

.text-center{
  text-align: center;
}

/* =========================================================
   4) Auth (Login / Register)
   ========================================================= */
body.auth-body{ background:var(--bg); }
.auth-wrap{ min-height:100%; display:grid; place-items:center; padding:5vh 16px; }

.auth-card{
  width:100%; max-width:420px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 24px 18px;
  animation:pop .25s ease-out;
}
@keyframes pop{ from{ transform:translateY(8px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

.brand{ text-align:center; margin-bottom:18px; }
.brand h1{ margin:8px 0 0; font-size:28px; letter-spacing:.3px; }
.brand .brand-icon{
  display:inline-grid; place-items:center;
  width:64px; height:64px; margin:0 auto; border-radius:18px;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  box-shadow:0 8px 24px rgba(20,184,166,.25);
  color:#fff; font-size:30px;
}

.auth-form{ display:grid; gap:14px; margin-top:8px; }
.field span{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }

input[type="email"],input[type="password"],input[type="text"],.input{
  width:100%; padding:12px 14px; border-radius:12px;
  background:var(--input); border:1px solid var(--border); color:var(--text);
  outline:none; transition:border-color .12s ease, box-shadow .12s ease;
}
input::placeholder,.input::placeholder{ color:#94a3b8; }
input:focus,.input:focus{ border-color:#94e7df; box-shadow:0 0 0 4px rgba(20,184,166,.15); }

.pw{ position:relative; display:flex; align-items:center; }
.pw input{ padding-right:44px; }
.pw-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; width:36px; height:36px;
  border-radius:10px; color:#475569; cursor:pointer;
}
.pw-toggle:hover{ background:rgba(0,0,0,.06); }

.hr{ position:relative; text-align:center; margin:6px 0 0; }
.hr::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--border); }
.hr span{ position:relative; z-index:1; background:transparent; padding:0 10px; color:var(--muted); font-size:12px; }

.alert{
  background:#fef2f2; border:1px solid #fecaca; color:#991b1b;
  padding:10px 12px; border-radius:12px; margin-bottom:8px;
}
.alert.info{ background:#ecfeff; border:1px solid #a5f3fc; color:#164e63; }

/* =========================================================
   5) App-Shell (Appbar, Drawer, Content, Bottom-Nav)
   ========================================================= */
.appbar{
  position:sticky; top:0; z-index:30;
  display:grid; grid-template-columns:48px 1fr 48px; align-items:center;
  height:var(--appbar-h);
  background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
  padding:0 8px;
}
.appbar-title{ margin:0; font-size:16px; text-align:center; }
.icon-btn{
  background:transparent; border:0; color:var(--text);
  width:48px; height:48px; border-radius:10px; cursor:pointer;
  font-size:22px; line-height:1;
}
.icon-btn:hover{ background:rgba(0,0,0,.06); }

.drawer{
  position:fixed; inset:0 auto 0 0; width:82%; max-width:340px;
  background:#fff; border-right:1px solid var(--border);
  transform:translateX(-100%); transition:transform .18s ease-out; z-index:40;
}
.drawer.open{ transform:translateX(0); }
.drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px; border-bottom:1px solid var(--border);
}
.drawer-header .avatar-lg{
  width:40px; height:40px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:#fff; font-size:18px; font-weight:700;
}
.drawer-header .avatar-lg .avatar-img{ width:100%; height:100%; object-fit:cover; display:block; }
.drawer-header .who{ flex:1; min-width:0; }
.drawer-header .who small{ display:none; }
.drawer-header .drawer-close{
  margin-left:auto; font-size:20px; line-height:1;
  background:none; border:0; cursor:pointer; width:40px; height:40px; border-radius:10px;
}
.drawer-header .drawer-close:hover{ background:rgba(0,0,0,.06); }

.drawer-nav{ display:flex; flex-direction:column; padding:8px; gap:4px; }
.drawer-link{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:10px; text-decoration:none; color:var(--text); font-size:15px;
}
.drawer-link:hover{ background:rgba(0,0,0,.05); }
.drawer-link.active{ background:var(--accent); color:#fff; }
.drawer-link .ico{ font-size:18px; line-height:1; }
.drawer-link .txt{ flex:1; }
.drawer-badge{
  position:absolute; right:10px;
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:#ef4444; color:#fff; font-size:12px; font-weight:700; display:grid; place-items:center;
  box-shadow:0 2px 6px rgba(239,68,68,.35);
}
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:35; }

.content{ padding:12px 12px calc(var(--bn-h) + 12px); }
.hello-title{ font-size:18px; font-weight:700; }
.hello-sub{ color:var(--muted); margin-top:4px; }
.hello-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:25;
  display:flex; justify-content:space-around; gap:8px;
  padding:6px 8px env(safe-area-inset-bottom);
  background:rgba(255,255,255,.9);
  border-top:1px solid var(--border);
  backdrop-filter:blur(8px);
}
.nav-item{
  position:relative; flex:1; text-decoration:none; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 6px; border-radius:12px;
}
.nav-item.active{ color:var(--text); background:rgba(0,0,0,.05); }
.nav-ico{ font-size:18px; line-height:1; }
.nav-txt{ font-size:11px; }
.nav-badge{
  position:absolute; top:2px; right:14px;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:#ef4444; color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center;
  box-shadow:0 2px 6px rgba(239,68,68,.35);
}

/* =========================================================
   6) Form Controls & Buttons (App-weit)
   ========================================================= */
.select,.select-full{
  width:100%; padding:10px 12px;
  border-radius:10px; background:var(--input);
  border:1px solid var(--border); color:var(--text); font-size:14px;
}
.textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  background:var(--input); border:1px solid var(--border); color:var(--text);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px 14px;
  border-radius:12px; border:1px solid var(--border);
  background:#fff; color:var(--text); text-decoration:none; cursor:pointer;
  transition:transform .08s ease, filter .08s ease, box-shadow .08s ease;
}
.btn:hover{ filter:brightness(1.02); }
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-strong)) !important;
  border:0; color:#fff; box-shadow:0 6px 16px rgba(20,184,166,.25);
}
.btn-ghost{ background:#fff; }
.btn-ghost-sm{
  padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:#fff; font-size:14px;
}
.btn-ghost-sm:hover{ filter:brightness(1.02); }
.btn-ghost-xs{
  font-size:13px; padding:4px 8px; border:1px solid var(--border);
  border-radius:6px; color:var(--muted); background:transparent; text-decoration:none;
}
.btn-ghost-xs:hover{ filter:brightness(1.03); }

/* Kleine Varianten + Helfer */
.input-sm{ padding:10px 12px; border-radius:10px; }
.btn-sm{ padding:10px 12px; border-radius:10px; font-size:14px; }
.grow{ flex:1; }

/* =========================================================
   7) Tags / Chips
   ========================================================= */
.tag-row{
  display:flex; align-items:center; gap:8px; margin-top:6px;
}
.tag-row input{
  flex:3; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--input); color:var(--text); font-size:14px;
}
.tag-row input::placeholder{ color:#9ca3af; }
.tag-row .btn{ flex:1; white-space:nowrap; }

.chips{ margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  display:inline-flex; align-items:center; padding:6px 10px;
  background:#f1f5f9; color:#0f172a; border:1px solid var(--border);
  border-radius:999px; font-size:13px; line-height:1; white-space:nowrap;
}
.chip span{ display:inline-block; line-height:1; }
.chip button{
  border:0; background:transparent; cursor:pointer; color:#334155;
  margin-left:3px; font-size:13px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
}
.chip button:hover{ color:#0f172a; }

/* =========================================================
   8) Feed / Dashboard
   ========================================================= */
.filter-bar{
  position:static !important;
  background:rgba(255,255,255,.9);
  border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); backdrop-filter:blur(8px);
  padding:8px; display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; margin-bottom:10px;
  top:auto !important;
}
@media (max-width:600px){ .filter-bar{ grid-template-columns:1fr 1fr; } }

.feed{ display:grid; gap:10px; }
.feed-card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow); margin-bottom:10px; padding:12px; display:grid; gap:8px;
}
.feed-head{ display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center; }

.feed-avatar{
  width:40px; height:40px; border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:#fff; display:grid; place-items:center; font-weight:700;
}
.feed-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.feed-meta{ display:flex; flex-direction:column; gap:2px; }
.feed-name{ font-weight:700; }
.feed-sub{ color:var(--muted); font-size:12px; }

.badge{
  font-size:12px; border:1px solid var(--border);
  border-radius:999px; padding:4px 8px;
  display:inline-flex; align-items:center; gap:6px;
}
.badge.need{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.badge.offer{ background:#ecfeff; border-color:#a5f3fc; color:#164e63; }

.feed-row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; }
.feed-title{ font-weight:700; font-size:16px; margin:2px 0; }
.feed-body{ color:var(--text); }

.feed-actions-compact{ display:inline-flex; align-items:center; gap:8px; }
.icon-only{ display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; background:#fff; text-decoration:none; }
.icon-only:hover{ filter:brightness(1.03); }
.ico-msg{ font-size:16px; line-height:1; }

.load-more{
  display:block; width:100%; text-align:center; margin-top:4px;
  padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#fff;
}

/* =========================================================
   9) Public Profile
   ========================================================= */
.pp-hero{ padding-top:14px; }
.pp-hero-card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow); padding:20px; text-align:center;
}
.pp-avatar-lg{
  width:120px; height:120px; border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:40px;
  margin:10px auto 14px;
}
.pp-avatar-lg img{ width:100%; height:100%; object-fit:cover; display:block; }
.pp-title-xl{ margin:0 0 4px; font-size:22px; line-height:1.3; }
.pp-meta{ color:var(--muted); font-size:13px; margin-top:4px; }

.pp-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:16px; margin-top:12px; }
.pp-section-title{ font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.pp-textbox{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; }

.dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; }
.dot-alt{ background:#0ea5a3; }

/* =========================================================
   10) Chat (Liste + Verlauf)
   ========================================================= */
/* Chatliste */
.chatlist{ display:grid; gap:10px; }
.chatlist-item{
  display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center;
  background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  padding:10px; text-decoration:none; color:inherit;
}
.chat-avatar{
  width:44px; height:44px; border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  display:grid; place-items:center; color:#fff; font-weight:800;
}
.chat-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.chatlist-main{ display:flex; flex-direction:column; gap:2px; }
.chatlist-name{ font-weight:700; }
.chatlist-snippet{ color:var(--muted); font-size:13px; }
.chatlist-meta{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.chatlist-time{ color:var(--muted); font-size:12px; }
.chat-badge{
  min-width:22px; height:22px; border-radius:999px; padding:0 6px;
  background:#0ea5a3; color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700;
}

/* Chat-Verlauf */
.chat-shell{
  height:calc(100dvh - var(--appbar-h));
  display:flex; flex-direction:column; gap:8px;
  padding-bottom:calc(var(--bn-h) + 8px);
}
.chat-header{
  background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:8px;
}
.chat-peer{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:inherit; }
.chat-name{ font-weight:700; }

.chat-log{
  flex:1; overflow-y:auto;
  background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
  padding:10px; padding-bottom:calc(var(--composer-h) + 16px);
  scroll-behavior:smooth;
}
.chat-empty{ color:var(--muted); text-align:center; margin:12px 0; }

.bubble-row{ display:flex; margin:6px 0; }
.bubble-row.me{ justify-content:flex-end; }
.bubble{
  max-width:78%;
  background:#ecfeff; border:1px solid #a5f3fc; border-radius:14px; padding:8px 10px; box-shadow:var(--shadow);
}
.bubble-row.you .bubble{ background:#f8fafc; border-color:var(--border); }
.bubble-text{ white-space:pre-wrap; word-wrap:break-word; }
.bubble-time{ color:var(--muted); font-size:11px; margin-top:4px; text-align:right; }

/* Composer (fix über Bottom-Nav) */
.chat-composer{
  position:sticky; bottom:calc(var(--bn-h) + 8px); z-index:10;
  display:grid; grid-template-columns:1fr auto; gap:8px;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow); padding:8px;
}
.composer-input{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:#fff; color:var(--text);
}
.composer-input::placeholder{ color:#94a3b8; }
.composer-send{
  padding:10px 12px; border-radius:10px; border:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:#fff; cursor:pointer; box-shadow:0 6px 16px rgba(18,184,134,.35);
}

/* =========================================================
   11) Media & Accessibility
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}
@media (max-width:360px){
  .auth-card{ padding:22px 16px 14px; }
  .brand h1{ font-size:24px; }
}

/* =========================================================
   12) Profile Avatar Card (konsolidiert)
   ========================================================= */
.profile-avatar-card{ margin:12px 0 10px; }

.card-title{
  margin:0 0 8px;
  font-size:16px;
  font-weight:700;
}

.avatar-row{ display:flex; align-items:center; gap:12px; }

.avatar{
  border-radius:50%;
  overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:#fff; font-weight:800;
}

.avatar-lg{ width:64px; height:64px; font-size:22px; }
.avatar-img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-fallback{ font-size:22px; line-height:1; }

.upload-form{ display:flex; align-items:center; gap:8px; }
.file-input{ max-width:220px; font-size:14px; }

/* Danger-Zone */
.danger-card{ border:1px solid #fecaca; }
.btn-danger{
  background:#ef4444; color:#fff; border:0;
  border-radius:12px; padding:12px 14px; cursor:pointer;
}
.btn-danger:hover{ filter:brightness(1.02); }

/* =======================
   Chat-Layout (scoped)
   ======================= */

/* Nur auf der Chat-Seite scrollt der Log */
.page-chat { overflow: hidden; }
.page-chat .content{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-chat .chat-shell{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;            /* wichtig fürs Schrumpfen */
}
/* nur der Nachrichtenbereich scrollt */
.page-chat .chat-log{
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  padding-bottom: calc(var(--composer-h, 56px) + 10px); /* Platz für Composer */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
/* Composer bleibt unten sichtbar */
.page-chat .chat-composer{
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
  margin-top: 8px;
}
/* Platz falls Bottom-Nav vorhanden ist */
.page-chat .content{
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
}

/* Gleich breite Icon-Buttons (z. B. Zurück/Mehr) */
.icon-btn--square{
  width: 48px; height: 48px;
  display: grid; place-items: center;
  font-size: 22px; line-height: 1;
}

/* =======================
   Suche / Tags / Userlisten
   ======================= */
.searchbar{ margin: 8px 0 12px; }

/* Tag-Liste (Zeilen mit Badge) */
.tag-list{ display:flex; flex-direction:column; gap:6px; }
.tag-row-link{
  display:flex; align-items:center; justify-content:space-between;
  text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:10px 12px; box-shadow:var(--shadow);
}
.tag-pill{ font-weight:700; }
.tag-count{
  background:#ecfeff; border:1px solid #a5f3fc; color:#164e63;
  padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700;
}

/* User-Liste (Tag-View & People) */
.user-list,
.people,
.people-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }

.user-row,
.person{
  display:grid; gap:10px; align-items:center;
  grid-template-columns: 44px 1fr auto;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:10px; box-shadow:var(--shadow);
}

.user-avatar,
.person .avatar,
.person-avatar{
  width:44px; height:44px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:#fff; font-weight:800; text-decoration:none;
}
.user-avatar img,
.person .avatar img,
.person-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.user-name,
.person-name{ font-weight:700; text-decoration:none; color:inherit; }

.user-actions .icon-action{ padding:8px 10px; }
.person-sub{ font-size:12px; }
.person-actions{ display:flex; gap:8px; }
.person-msg{ text-decoration:none; font-size:18px; padding:6px; }
.person-msg.disabled{ color:var(--muted); cursor:default; }

/* =======================
   Tabs
   ======================= */
.tabs{ display:grid; grid-auto-flow:column; gap:6px; margin:6px 0 10px; }
.tab-btn{
  text-decoration:none; text-align:center;
  padding:10px 12px; border:1px solid var(--border);
  border-radius:10px; color:var(--muted); background:#fff;
}
.tab-btn.is-active{
  color:var(--text); background:rgba(0,0,0,.05); border-color:var(--border);
}
.tab-panel.is-hidden{ display:none; }
.tab-panel.is-visible{ display:block; }

/* Trenner im AG-Form */
.sep{ border:0; border-top:1px solid var(--border); margin:8px 0; }

/* =======================
   Chips & Tag-Eingaben
   ======================= */
.chips{ margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; background:#f1f5f9; color:#0f172a;
  border:1px solid var(--border); border-radius:999px; font-size:13px; line-height:1;
}
.chip button{
  border:0; background:transparent; cursor:pointer; color:#334155; padding:0; line-height:1;
}
.chip button:hover{ color:#0f172a; }

.tag-row{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.tag-row input{
  flex:1; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--input); color:var(--text); font-size:14px;
}
.tag-row input::placeholder{ color:#9ca3af; }
.tag-row .btn{ white-space:nowrap; }

/* =======================
   Danger / Buttons / Kleinkram
   ======================= */
.danger-card{ border:1px solid #fecaca !important; }
.btn-danger{
  background:#ef4444; color:#fff; border:0;
  border-radius:12px; padding:12px 14px; cursor:pointer;
}
.btn-danger:hover{ filter:brightness(1.02); }

.card-title{ margin:0 0 8px; font-weight:700; font-size:16px; }
.hello-sub{ color:var(--muted); margin:10px 0 6px; }
.profile-avatar-card{ margin-bottom:10px; }
.avatar-row{ display:flex; align-items:center; gap:12px; }

.avatar{ display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:#fff; font-weight:800; overflow:hidden;
}
.avatar-lg{ width:64px; height:64px; }
.avatar-img{ width:100%; height:100%; object-fit:cover; display:block; }
.upload-form{ display:flex; align-items:center; gap:8px; }
.file-input{ max-width:220px; }

.select-full{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background:var(--input); color:var(--text);
}
.textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  background:var(--input); border:1px solid var(--border); color:var(--text);
}
.row.gap{ gap:12px; }
.flex1{ flex:1; } .flex3{ flex:3; }

/* =======================
   Listen / Links / Pills
   ======================= */
.list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.list-item{ background:var(--card); border:1px solid var(--border); border-radius:12px; }
.list-link{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; text-decoration:none; color:inherit;
}
.list-link:hover{ filter:brightness(1.02); }

/* Pill-Varianten */
.pill{                           /* Badge in Listen/Grids */
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--border); border-radius:999px;
  background:#f8fafc; color:#0f172a; text-decoration:none; font-weight:600;
}
.pill:hover{ filter:brightness(1.02); }
.pill-count{                     /* Zahl in Pill */
  min-width:20px; height:20px; border-radius:999px; display:grid; place-items:center;
  background:#0ea5a3; color:#fff; font-size:12px; font-weight:700; padding:0 6px;
}

/* =======================
   Kategorien / Market
   ======================= */
.tabs-cats{ display:flex; gap:6px; margin:10px 0; }
.tab-cat{
  flex:1; padding:10px; border:1px solid var(--border);
  background:var(--card); cursor:pointer; border-radius:8px; font-weight:600;
}
.tab-cat.active{ background:var(--accent); color:#fff; }

.subtabs{ display:flex; gap:6px; margin:10px 0; }
.subtab{
  flex:1; padding:8px; border:1px solid var(--border);
  border-radius:6px; cursor:pointer; background:var(--input);
}
.subtab.active{ background:var(--accent-strong); color:#fff; }

.cat-panel, .subtab-panel{ display:none; }
.cat-panel.active, .subtab-panel.active{ display:block; }

/* Quick-Actions */
.quick-actions{ display:flex; gap:8px; margin-bottom:10px; }
.quick-actions .qa-btn{
  font-size:25px; flex:1; text-align:center; padding:5px 12px;
  border:1px solid var(--border); border-radius:12px;
  background:var(--card); text-decoration:none; color:var(--text); font-weight:600;
}
.quick-actions .qa-btn:hover{ filter:brightness(1.02); }

/* Market Toolbar */
.market-toolbar{ display:grid; gap:8px; margin-bottom:10px; }
.market-tabs{ display:flex; gap:6px; }
.market-tab{
  font-size:25px; flex:1; text-align:center; padding:5px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--card); text-decoration:none; color:var(--text); font-weight:600;
}
.market-tab.active{ background:var(--accent); color:#fff; }

.market-switch{ display:flex; gap:6px; }
.switch-btn{
  flex:1; text-align:center; padding:8px;
  border:1px solid var(--border); border-radius:8px;
  background:var(--input); text-decoration:none; color:var(--text); font-weight:600;
}
.switch-btn.active{ background:var(--accent-strong); color:#fff; }

.market-search{ display:flex; gap:6px; }
.market-search .input{ flex:1; }
.market-breadcrumb{ margin-bottom:6px; }
.market-h3{ margin:0 0 6px; }

/* ---------- Große Karten für Stichwörter ---------- */
.tagcard-grid{
  display:grid; gap:8px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width:740px){
  .tagcard-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.tagcard{
  display:flex; flex-direction:column; justify-content:space-between;
  gap:10px; padding:14px;
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow);
  text-decoration:none; color:inherit;
  transition: transform .08s ease, filter .08s ease;
}
.tagcard:hover{ transform: translateY(-1px); filter:brightness(1.02); }
.tagcard-title{ font-size:16px; font-weight:800; }
.tagcard-meta{ display:flex; align-items:center; gap:8px; color:var(--muted); }
.tagcard-count{
  min-width:26px; height:26px; border-radius:999px; padding:0 8px;
  display:grid; place-items:center; background:#0ea5a3; color:#fff; font-weight:800;
}

/* ========================
   COVER / DIALOG (Composer)
   ======================== */
.cover{
  width:100%; height:100%;
  margin:0; padding:0; border:0;
  max-width:none; max-height:none;
  background:rgba(0,0,0,.45);
  display:none;
}
.cover[open]{ display:grid; place-items:center; }
.cover::backdrop{ background:transparent; } /* iOS-safe */

.cover-card{
  width:min(800px,92vw);
  max-height:86vh;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:16px;
  overflow-y:auto;
  animation:popIn .15s ease;
}
@keyframes popIn{ from{transform:scale(.96);opacity:0} to{transform:scale(1);opacity:1} }

.cover-close{
  position:absolute; top:12px; right:14px;
  background:transparent; border:0; cursor:pointer;
  font-size:22px; line-height:1; color:var(--muted);
}

.pp-hero-actions .btn{ min-width:200px; padding:10px 18px; font-size:16px; }
.cover-card h2{ margin:7px 0; }

/* ========================
   COMPOSER HEAD
   ======================== */
.composer-trigger{ cursor:pointer; }

.composer-head{
  display:grid; grid-template-columns:44px 1fr auto;
  gap:10px; align-items:center; margin-bottom:8px;
}
.composer-avatar{
  width:44px; height:44px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:#fff; font-weight:800;
}
.composer-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.composer-name{ font-weight:700; }

/* Badge VARIANTEN */
.badge.info{
  background:#fffbe6;        /* zartes Gelb */
  border:1px solid #fde68a;
  color:#92400e;
}

/* Eigene/Versteckte Posts */
.my-post{ outline:2px solid rgba(20,184,166,.15); }
.post-hidden{ background:#fff5f5; border-color:#fecaca; }
.unhide-row{ display:flex; justify-content:center; margin-top:8px; }

/* Kleine runde Inline-Buttons (optional) */
.post-actions-inline{ display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
.circle-btn{
  width:36px; height:36px; border-radius:50%;
  display:inline-grid; place-items:center;
  border:1px solid var(--border);
  background:#fff; color:var(--text);
  text-decoration:none; cursor:pointer;
}
.circle-btn:hover{ filter:brightness(1.03); }
.circle-danger{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.circle-close { background:#f1f5f9; border:1px solid var(--border); color:#475569; }
.circle-close:hover{ background:#e2e8f0; }
.circle-ok{ background:#dcfce7; border-color:#86efac; color:#166534; }
.circle-ok:hover{ background:#bbf7d0; }

/* ========================
   STEP-CHOICES / BAR
   ======================== */
.bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:0 0 12px;
}
.bar-title{ margin:0; font-size:16px; font-weight:700; }
.bar-action{ margin-left:auto; }

.choice-grid.two{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px; margin-bottom:10px;
}

/* höhere Kacheln */
.choice-btn.tall{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:72px; padding:12px;
  border:1px solid var(--border); border-radius:12px;
  background:var(--card); box-shadow:var(--shadow);
  font-weight:700; line-height:1.25; cursor:pointer;
}
.choice-btn.tall:hover{ filter:brightness(1.03); }
.choice-btn.tall:active{ transform:translateY(1px); }
.choice-btn.tall.selected{
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:#fff; border-color:transparent;
}

/* Einzelbutton (volle Breite) */
.choice-single .choice-btn{
  width:100%; padding:14px;
  border:1px solid var(--border); border-radius:12px;
  background:var(--card); box-shadow:var(--shadow);
  font-weight:700; cursor:pointer;
}
.choice-single .choice-btn:hover{ filter:brightness(1.03); }
.choice-single .choice-btn:active{ transform:translateY(1px); }

@media (max-width:360px){
  .choice-btn.tall{ min-height:64px; font-size:14px; padding:10px; }
}

/* Felder in Cards */
.card .field > span{ display:block; margin-bottom:4px; }
.card .row input.input{ flex:1; }

/* ========================
   PLANEN (sichtbar ab/bis)
   ======================== */
.plan-wrap{ margin-top:12px; }
.plan-toggle{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border:1px solid var(--border); border-radius:10px;
  background:#fff; cursor:pointer;
}
.plan-toggle.active{ border-color:#94e7df; box-shadow:0 0 0 4px rgba(20,184,166,.15); }
.plan-fields{ display:none; margin-top:10px; }
.plan-fields.grid{ display:grid; gap:8px; }
@media (min-width:560px){ .plan-fields.grid-2{ grid-template-columns:1fr 1fr; } }

/* ========================
   LIGHTBOX
   ======================== */
.feed-gallery a:hover{ filter:brightness(1.02); }
#photos{ display:block; margin-top:6px; }

.lb[hidden]{ display:none; }
.lb{ position:fixed; inset:0; z-index:9999; }
.lb-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.86); }
.lb-frame{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.lb-img{
  max-width:95vw; max-height:92vh; border-radius:12px; background:#000;
  box-shadow:0 10px 30px rgba(0,0,0,.55); pointer-events:auto;
}
.lb-cap{
  position:absolute; left:0; right:0; bottom:16px; text-align:center;
  color:#fff; font-size:14px; text-shadow:0 1px 2px rgba(0,0,0,.4);
  pointer-events:none;
}
.lb-close{
  position:fixed;
  top:max(12px, env(safe-area-inset-top));
  right:max(12px, env(safe-area-inset-right));
  z-index:1; border:none; cursor:pointer; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.15); color:#fff; font-size:18px; line-height:1;
  backdrop-filter:saturate(150%) blur(6px);
}
.lb-close:hover{ background:rgba(255,255,255,.25); }

/* ========================
   UPLOADER
   ======================== */
.uploader{ margin-top:12px; }
.uploader-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px; font-weight:600;
}
.uploader-count{ font-size:12px; color:var(--muted); }
.uploader-actions{ display:flex; gap:8px; }
@media (max-width:420px){ .uploader-actions .btn.btn-sm{ padding:8px 10px; font-size:14px; } }

.uploader-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px; margin-top:10px;
}
@media (min-width:560px){ .uploader-grid{ grid-template-columns:repeat(5,1fr); } }

.thumb{
  position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
  background:#f2f4f7; box-shadow:var(--shadow);
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb-remove{
  position:absolute; top:6px; right:6px; width:28px; height:28px;
  border:none; border-radius:999px; background:rgba(0,0,0,.55);
  color:#fff; cursor:pointer; line-height:28px; text-align:center;
}
.thumb-remove:hover{ background:rgba(0,0,0,.7); }
.add-tile{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1; border:1px dashed var(--border); border-radius:10px;
  background:var(--card); cursor:pointer;
}
.add-tile:hover{ filter:brightness(1.03); }

.btn[disabled]{ opacity:.7; cursor:not-allowed; }
.btn-spinner{ font-size:14px; margin-left:6px; }
.chat-log{ overflow-anchor:none; }
.chat-log.prehide{ visibility:hidden; opacity:0; }
.chat-log.reveal{ visibility:visible; opacity:1; transition:opacity .12s; }

/* ========================
   AVATAR-GRID (Profilbild)
   ======================== */
:root{
  --row: clamp(70px, 8.5vw, 92px);
  --gap: .6rem;
  --radius: 16px;
}
.avatar-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:var(--row); gap:var(--gap);
}
.grid-avatar{ grid-column:1 / span 2; grid-row:1 / span 2; display:flex; align-items:center; justify-content:center; }
.avatar-circle{
  width:calc(var(--row) * 1.6); aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:#f4f6f7; box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.avatar-circle img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar-initial{ font-size:clamp(1.8rem,6vw,2.6rem); font-weight:700; color:#556; opacity:.8; }
.grid-controls{ display:contents; }
#btnGallery{ grid-column:3; grid-row:1; }
#btnCamera{ grid-column:4; grid-row:1; }
.grid-upload{ grid-column:3 / span 2; grid-row:2; }

.btn{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  border:1px solid #e3e7ea; border-radius:var(--radius);
  background:#fff; font-size:.95rem; font-weight:600;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.btn:active{ transform:translateY(0); }
.btn.primary{ background:#00adab; color:#fff; border-color:#009e9c; }
.btn.primary:hover{ filter:brightness(1.04); }
.is-selected{ background:#eef9fb; border-color:#9adede; }
.upload-loading{ opacity:.75; pointer-events:none; }
.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; }

@media (max-width:520px){
  :root{ --row: clamp(76px, 18vw, 98px); }
  .avatar-circle{ width:calc(var(--row) * 1.8); }
}

/* ========================
   KOMMENTAR-DIALOG
   ======================== */
.cmt-dlg{ border:none; padding:0; width:min(700px,92vw); }
.cmt-dlg::backdrop{ background:rgba(0,0,0,.3); }
.cmt-card{ background:#fff; border-radius:14px; padding:14px; box-shadow:0 8px 30px rgba(0,0,0,.15); }
.cmt-close{ float:right; border:none; background:transparent; font-size:18px; cursor:pointer; }
.cmt-head{ margin:4px 0 10px; }
.cmt-title{ font-weight:700; font-size:1.05rem; }
.cmt-sub{ color:var(--muted); font-size:.9rem; }
.cmt-list{ max-height:50vh; overflow:auto; display:flex; flex-direction:column; gap:10px; padding-right:2px; }
.cmt-item{ display:grid; grid-template-columns:42px 1fr; gap:10px; }
.cmt-avatar{ width:42px; height:42px; border-radius:50%; background:#f3f5f7; display:grid; place-items:center; font-weight:700; color:#667; overflow:hidden; }
.cmt-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.cmt-bubble{ background:#f7f9fb; border:1px solid #e7ecf0; border-radius:12px; padding:8px 10px; position:relative; }
.cmt-name{ font-weight:700; margin-bottom:2px; }
.cmt-body{ white-space:pre-wrap; }
.cmt-time{ color:var(--muted); font-size:.8rem; margin-top:4px; }
.cmt-del{ position:absolute; top:6px; right:6px; border:none; background:transparent; cursor:pointer; opacity:.7; }
.cmt-del:hover{ opacity:1; }
.cmt-form{ margin-top:12px; display:grid; gap:8px; }

/* ========================
   ENGAGE-BAR
   ======================== */
.engage-bar{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  color:var(--muted); font-size:.95rem;
}
.engage-bar .eb-left, .engage-bar .eb-right{ cursor:pointer; user-select:none; }
.engage-bar .eb-left:hover, .engage-bar .eb-right:hover{ opacity:.85; }

/* ========================
   POST-ACTIONS (klassisch)
   ======================== */
.post-actions{ display:flex; gap:10px; margin-top:8px; }
.pa-btn{
  border:1px solid var(--border); background:#fff; border-radius:14px;
  padding:.45rem .7rem; font-weight:600; display:inline-flex; align-items:center; gap:.4rem;
}
.pa-btn.is-on{ background:#ffe9ee; border-color:#f4a; }

/* 4er-Aktionsleiste (gleichmäßig: 2/2/2/2) */
.actions-10 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 gleiche Spalten */
}

.actions-10 .act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
}

.actions-10 .act .ico { font-size: 1.1rem; line-height: 1; }
.actions-10 .act .lbl { font-size: .9rem; }
.actions-10 .act:hover { background: rgba(0,0,0,.035); }
@media (prefers-color-scheme: dark){
  .actions-10 .act:hover { background: rgba(255,255,255,.06); }
}

/* Icon-only (Löschen/Verbergen) */
.icon-ghost {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  cursor: pointer;
  line-height: 1;
  font-size: 18px;
  color: var(--muted, #777);
}
.icon-ghost:hover { background: rgba(0,0,0,.05); color: inherit; }
.icon-ghost:focus-visible { outline: 2px solid rgba(0,0,0,.2); outline-offset: 2px; }
.icon-ghost.-muted { color: var(--muted, #8a8a8a); }
.icon-ghost.-danger { color: #d45757; }
.icon-ghost.-danger:hover { background: rgba(212,87,87,.10); }
@media (prefers-color-scheme: dark){
  .icon-ghost:hover { background: rgba(255,255,255,.06); }
}

/* Engage-Bar */
.engage-bar .eb-left,
.engage-bar .eb-right { cursor: pointer; user-select: none; }
.engage-bar .eb-left:hover,
.engage-bar .eb-right:hover { opacity: .85; }

/* Like-Animation */
.like-btn { position: relative; overflow: hidden; transform: translateZ(0); }
.like-btn .ico { display: inline-block; transition: transform .15s ease-out; }
.like-btn.is-on .ico { transform: scale(1.05); }
.like-btn.anim-pop .ico { animation: like-pop .35s cubic-bezier(.2,.7,.2,1) both; }
.like-btn.anim-pop::after {
  content:""; position:absolute; left:50%; top:50%;
  width:10px; height:10px; border-radius:999px;
  transform:translate(-50%,-50%) scale(1);
  opacity:.25; border:2px solid currentColor;
  animation: like-ripple .45s ease-out both;
}
@keyframes like-pop {
  0%{transform:scale(1)} 40%{transform:scale(1.25)} 70%{transform:scale(.96)} 100%{transform:scale(1)}
}
@keyframes like-ripple {
  0%{transform:translate(-50%,-50%) scale(1); opacity:.3}
  100%{transform:translate(-50%,-50%) scale(6.5); opacity:0}
}
.count-bump { animation: count-bump .25s ease-out; }
@keyframes count-bump {
  0%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-1px) scale(1.08)}
  100%{transform:translateY(0) scale(1)}
}

/* Kommentar-Dialog Vorschau */
.cmt-preview { border-bottom:1px solid var(--border); padding:10px 0 12px; margin-bottom:8px; }
.pv-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.pv-ava { width:36px; height:36px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--bg2,#eee); font-weight:700; }
.pv-ava img { width:100%; height:100%; object-fit:cover; display:block; }
.pv-meta { display:flex; flex-direction:column; }
.pv-name { font-weight:700; }
.pv-time { color:var(--muted); font-size:.9rem; }
.pv-body { white-space:pre-wrap; margin:6px 0 8px; }
.pv-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.pv-photo { display:block; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.pv-photo img { width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; display:block; }
.cmt-bubble { position:relative; }
.cmt-del { position:absolute; top:6px; right:6px; border:none; background:transparent; cursor:pointer; opacity:.7; }
.cmt-del:hover { opacity:1; }
.cmt-dlg::backdrop { background:rgba(0,0,0,.35); }
.cmt-dlg { padding:0; border:0; max-width:min(800px,96vw); width:min(800px,96vw); }
.cmt-card { max-height:85vh; overflow:auto; }

/* Filter-UI */
.filter-wrap { display:flex; justify-content:flex-end; margin:6px 0 10px; }
.filter-gear {
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--bg); border-radius:999px; cursor:pointer;
  opacity:.7; transition:opacity .2s, transform .25s;
}
.filter-gear:hover { opacity:1; }
.filter-gear:focus-visible { outline:2px solid #00adab; outline-offset:2px; }
.filter-gear[aria-expanded="true"] { transform:rotate(90deg); }
.filter-bar {
  margin-top:8px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--bg);
  box-shadow:var(--shadow-sm,0 2px 6px rgba(0,0,0,.04)); animation:fadeIn .18s ease;
}
@keyframes fadeIn { from{opacity:0; transform:scale(.98)} to{opacity:1; transform:scale(1)} }
@media (max-width:520px){
  .filter-gear{ width:28px; height:28px; }
  .filter-bar{ padding:6px; }
}

/* Mobile: nur Icons in der Aktionsleiste */
@media (max-width:600px){
  .actions-10 .act .lbl{ display:none; }
  .actions-10 .act .ico{ font-size:1.3rem; }
}

/* Karte sanft ausblenden */
.feed-card.fade-out {
  opacity:0; transform:translateY(4px) scale(.995);
  transition:opacity .18s ease, transform .18s ease;
}

/* Hinweis-Popup */
#noteHost { position:fixed; inset:0; pointer-events:none; z-index:6000; }
.note {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.95);
  opacity:0; width:min(85vw,460px); min-height:120px; padding:26px 22px;
  border-radius:20px; border:none; box-shadow:0 24px 64px rgba(0,0,0,.25);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px;
  text-align:center; font-weight:700; line-height:1.4; font-size:1.05rem;
  pointer-events:auto; backdrop-filter:blur(8px) saturate(1.25);
  animation:note-in .25s ease forwards, note-out .25s ease forwards var(--out-delay,2.5s);
}
.note .ico{ font-size:30px; }
.note .txt{ flex:0; }

/* Farbvarianten (20% Sichtbarkeit) */
.note.-warn { background:rgba(220,53,69,.20); color:#b10000; }
.note.-info { background:rgba(255,193,7,.20); color:#5c3d00; }
.note.-ok   { background:rgba(40,167,69,.20); color:#064d20; }

@keyframes note-in {
  from{opacity:0; transform:translate(-50%,-56%) scale(.95);}
  to{opacity:1; transform:translate(-50%,-50%) scale(1);}
}
@keyframes note-out {
  from{opacity:1; transform:translate(-50%,-50%) scale(1);}
  to{opacity:0; transform:translate(-50%,-44%) scale(.96);}
}

/* --- Nur in dieser Card regeln --- */
.reg-card .form .field { margin-top: 12px; }
.reg-card .form .field:first-child { margin-top: 0; }

/* PLZ/Ort: kein Zusatzabstand innerhalb des Grids, Abstand nur um das Grid herum */
.reg-card .form .row-2 { 
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
}
@media (max-width: 420px) {
  .reg-card .form .row-2 { grid-template-columns: 1fr; }
}
/* Felder im Grid bekommen KEINEN extra top-margin mehr */
.reg-card .form .row-2 .field { margin-top: 0 !important; }

/* Mehr Luft speziell bei den Passwort-Feldern (ohne Höhe zu ändern) */
.reg-card .form .field.field-pw { margin-top: 12px !important; }

/* Label -> Input Abstand konsistent */
.reg-card .form .field > span {
  display: block;
  margin-bottom: 6px;
  margin-top: 12px;
  line-height: 1.2;
}

/* Passwort-Auge absolut positionieren, damit es nichts „aufbläht“ */
.reg-card .pw { position: relative; display: block; }
.reg-card .pw .input { width: 100%; padding-right: 38px; }  /* Platz für den Button */
.reg-card .pw .pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;                  /* kein Einfluss auf Höhe! */
}

/* Consent dezenter + Links nur unterstrichen */
.reg-card .check.consent { 
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.reg-card .check.consent .link-underline {
  text-decoration: underline;
  color: inherit;
}