/* ============================================================
   Seitenlayouts für die Unterseiten + Anpassungen für mehrere Seiten
   (Impressum, Datenschutz, Anmeldung, KI, Dashboard, Konto)
   ============================================================ */
body{ display:flex; flex-direction:column; min-height:100vh; }
main{ flex:1 0 auto; width:100%; }

/* Kopfzeile: Konto-Knopf + Menü (auf allen Seiten gleich) */
.toprow .brand{ color:inherit; text-decoration:none; min-width:0; }
.toprow .brand h1{ margin:0; }
.acct{ position:relative; flex:none; max-width:55%; }
.acct .acct-btn{ max-width:100%; text-decoration:none; }
.acct-menu{ right:0; top:calc(100% + 8px); }
.acct-menu a, .acct-menu button{
  display:block; width:100%; text-align:left; padding:12px 10px; border:none; background:none;
  border-radius:10px; font-family:inherit; font-size:15px; font-weight:600; color:var(--ink);
  cursor:pointer; text-decoration:none; min-height:44px;
}
.acct-menu a:active{ background:var(--accent-soft); }
.acct-menu .danger{ color:var(--danger); }

/* KI-Knopf auf der Startseite ist jetzt ein Link */
a.ai-open{ text-decoration:none; }

/* Kleine Copyright-Zeile im Regel-Detail */
.overlay-copy{ text-align:center; font-size:12.5px; color:var(--muted); padding:6px 18px 34px; }

/* Unterseiten */
.page{ max-width:680px; margin:0 auto; padding:26px 18px 24px; width:100%; }
.page--narrow{ max-width:460px; }
.page-title{ font-size:28px; font-weight:700; letter-spacing:-.035em; line-height:1.15; margin:2px 0 8px; color:var(--ink); }
.page-lead{ font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0 0 18px; }
.page .legal a, .page .ai-note a, .auth-chk a, .link{ color:var(--accent-fg); text-decoration:underline; }
.page-note{ margin-top:18px; padding:14px 16px; border-radius:var(--radius-md); background:var(--bg-soft); border:1px solid var(--border); font-size:14px; line-height:1.55; color:var(--ink-soft); }
.page-note b{ color:var(--ink); }

/* Anmeldung */
.auth-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 18px 22px; box-shadow:0 1px 2px rgba(20,24,31,.03); }
.auth-card .auth-tabs{ margin-bottom:4px; }
.auth-card .ai-btn{ margin-top:16px; }
.auth-success{ background:var(--teal-soft); border:1px solid var(--teal); border-radius:var(--radius-md); padding:14px 16px; font-size:15px; line-height:1.5; }
.btn-row{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.btn-row .ai-btn{ margin-top:0; text-align:center; text-decoration:none; display:block; }
a.ai-btn{ text-decoration:none; display:block; text-align:center; }

/* KI-Seite: Texteingabe */
.ai-text{ width:100%; margin:12px 0; padding:11px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:inherit; font-size:16px; line-height:1.5; color:var(--ink); resize:vertical; background:var(--surface); }
.ai-page textarea{ width:100%; margin-top:12px; padding:11px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:inherit; font-size:16px; color:var(--ink); resize:vertical; background:var(--surface); }

/* Konto löschen (Gefahrenbereich) */
.danger-zone{ margin-top:26px; padding:16px; border:1px solid var(--danger-line); background:var(--danger-bg); border-radius:var(--radius-md); }
.danger-zone h3{ margin:0 0 6px; font-size:16px; color:var(--danger); }
.danger-zone p{ margin:0 0 6px; font-size:14px; line-height:1.55; color:var(--danger-ink); }
.danger-zone .ai-btn.ai-del{ background:var(--surface); border:1px solid var(--danger-line); }

.is-hidden{ display:none !important; }

/* ============================================================
   Startseite: nur die Suche läuft mit, Regel-Detail mit festen Knöpfen
   ============================================================ */
.top--scroll{ position:relative; }
.searchbar{
  position:sticky; top:0; z-index:20;
  padding:10px 18px 12px; background:var(--glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.ic{ display:block; flex:none; }
.clear-btn{ width:30px; height:30px; }

/* Icon-Knöpfe (Stern, Link kopieren) */
.head-actions{ margin-left:auto; display:flex; gap:6px; }
.icon-btn{
  width:40px; height:40px; border:none; border-radius:14px; background:var(--bg-soft);
  color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.icon-btn:active{ background:var(--accent-soft); }
.icon-btn.on{ color:var(--star); background:var(--star-bg); }
.fav-star{
  width:40px; height:40px; margin:-10px -10px -10px 0; border:none; background:none; border-radius:12px;
  color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
}
.fav-star.on{ color:var(--star); }
.fav-star:active{ background:var(--bg-soft); }
.chip{ display:inline-flex; align-items:center; gap:6px; }

/* Vorherige / Nächste: unten fest im Regel-Detail */
.overlay-body{ flex:1 0 auto; padding-bottom:28px; }
.nav-bar{
  position:sticky; bottom:0; z-index:6;
  background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
}
.nav-bar .nav-buttons{ max-width:680px; margin:0 auto; }
.nav-buttons button{ display:flex; align-items:center; justify-content:center; gap:6px; }

/* Kurze Meldung (z. B. „Link kopiert“) */
.toast{
  position:fixed; left:50%; bottom:96px; z-index:300; transform:translate(-50%,10px);
  max-width:calc(100% - 40px); padding:11px 18px; border-radius:14px;
  background:var(--ink); color:var(--bg); font-size:14px; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
@media (prefers-reduced-motion:reduce){ .toast, .icon-btn{ transition:none; } }

/* ============================================================
   Überschneidungen vermeiden
   ============================================================ */
.toprow{ gap:14px; }
.toprow .brand{ flex:1 1 auto; min-width:0; }
.toprow h1, .top h1{ white-space:normal; overflow-wrap:anywhere; }
.acct{ flex:0 1 auto; max-width:42%; }
.acct-btn{ min-width:0; }
.top--scroll{ z-index:30; }                 /* Konto-Menü liegt über der mitlaufenden Suchleiste */
.acct-menu{ min-width:220px; max-width:min(300px, calc(100vw - 36px)); padding:12px; }
.acct-menu p{ margin:4px 8px 10px; padding-bottom:10px; border-bottom:1px solid var(--border); line-height:1.4; }
.acct-menu p b{ display:block; margin-top:2px; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.overlay-head .headcat{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sf-links{ gap:0 24px; }

/* Bild zum Teilen (wird kurz unsichtbar hinter der Seite aufgebaut) */
.share-card{
  position:fixed; left:0; top:0; z-index:-1; width:560px; max-width:none; margin:0;
  padding:30px 30px 24px; background:var(--surface); color:var(--ink); font-family:var(--font);
}
.share-card .cat-pill{ display:inline-block; margin-bottom:14px; }
.share-card .overlay-copy{ display:none; }
.share-foot{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:22px; padding-top:14px; border-top:1px solid var(--border);
  font-size:13px; color:var(--muted);
}
.share-foot b{ color:var(--ink); font-weight:700; }
@media (max-width:380px){ .head-actions{ gap:4px; } .icon-btn{ width:38px; height:38px; } }
.share-card .cat-pill{ padding:6px 13px; border-radius:999px; background:var(--accent-soft); color:var(--accent-fg); font-size:12.5px; font-weight:700; }

/* ============================================================
   Quadratischer KI-Knopf vor der Suchleiste (nur sichtbar, wenn die Suchleiste oben angepinnt ist)
   ============================================================ */
.search-sentinel{ height:1px; margin-bottom:-1px; pointer-events:none; }
.searchbar{ display:flex; align-items:stretch; gap:10px; }
.searchbar .searchwrap{ flex:1; min-width:0; }
.ai-sq{
  display:none; flex:none; width:52px; align-items:center; justify-content:center;
  border-radius:16px; color:#fff; text-decoration:none;
  background:linear-gradient(135deg,#2F5BFF 0%,#5E85FF 100%);
  box-shadow:0 8px 18px rgba(47,91,255,.28);
}
.ai-sq.locked{ background:var(--bg-soft); color:var(--muted); box-shadow:none; border:1px solid var(--border); }
.searchbar.stuck .ai-sq{ display:flex; animation:sqIn .18s ease-out; }
.ai-sq:active{ transform:scale(.96); }
.ai-sq:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@keyframes sqIn{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .searchbar.stuck .ai-sq{ animation:none; } }