/* =====================================================================
   app.css — Zentrales Stylesheet, Design-Sprache aus dem
   Kundenportal-Mockup übernommen (Aktenordner-Ästhetik,
   Fraunces/IBM Plex Sans, Sparten-Akzentfarben).
   ===================================================================== */

:root{
  --ink: #1E2D4F;
  --ink-soft: #445068;
  --paper: #FBFAF7;
  --paper-dim: #F1EFE8;
  --line: #DEDAD0;
  --slate: #6B7280;
  --gold: #C9A24B;

  --ok-bg: #E7F2E9; --ok-fg: #2F6B3D;
  --warn-bg: #F5EFE0; --warn-fg: #8A6A1C;
  --err-bg: #FBEEEA;  --err-fg: #B54B3A;

  --radius: 3px;
  --shadow: 0 1px 2px rgba(30,45,79,0.06), 0 4px 14px rgba(30,45,79,0.05);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;
  /* NEU (gefundene Ursache für seitliches Scrollen): Sicherheitsnetz,
     falls ein einzelnes Element (Tabelle, lange Zahl, feste Breite)
     doch mal breiter als der Bildschirm wird — verhindert, dass die
     GANZE Seite dadurch horizontal scrollbar wird. */
  overflow-x:hidden; max-width:100vw;
}
body{
  font-family:'IBM Plex Sans', sans-serif;
  background:var(--paper-dim);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; margin:0 0 .5em;}
a{color:inherit;}
.mono{font-family:'IBM Plex Mono', monospace;}

.container{max-width:640px;margin:40px auto;padding:32px;background:var(--paper);border-radius:6px;box-shadow:var(--shadow);}
.container.wide{max-width:960px;}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
label{font-size:12.5px;font-weight:500;color:var(--ink-soft);}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=tel],input[type=file],select,textarea{
  font-family:inherit;font-size:13.5px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;}
textarea{resize:vertical;min-height:80px;}

.btn{display:inline-block;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:10px 20px;border-radius:var(--radius);font-size:13.5px;font-weight:500;cursor:pointer;text-decoration:none;text-align:center;transition:opacity .12s ease;}
.btn:hover{opacity:.85;}
.btn.block{width:100%;}
.btn.ghost{background:transparent;color:var(--ink);}
.btn.ghost:hover{background:rgba(30,45,79,.05);opacity:1;}
.btn.danger{background:#B54B3A;border-color:#B54B3A;}

.alert{padding:12px 16px;border-radius:var(--radius);font-size:13.5px;margin-bottom:18px;border:1px solid transparent;}
.alert.success{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-fg);}
.alert.error{background:var(--err-bg);color:var(--err-fg);border-color:var(--err-fg);}

.checkbox-row{display:flex;align-items:flex-start;gap:10px;margin:16px 0;font-size:13px;line-height:1.5;}
.checkbox-row input{margin-top:3px;}

.simple-links{display:flex;gap:14px;justify-content:center;margin-top:20px;font-size:13px;flex-wrap:wrap;}

/* ===== App-Shell (eingeloggter Bereich) ===== */
/* NEU (Bugfix): Sidebar war "position:sticky" innerhalb eines Grids —
   funktionierte nur, solange der Hauptinhalt kürzer als 100vh blieb.
   Bei längeren Seiten (z.B. "Meine Verträge" mit vielen Karten) lief
   die Sidebar aus ihrer Grid-Zelle heraus und scrollte dann normal
   mit. "position:fixed" bindet sie stattdessen ans Browserfenster,
   unabhängig von der Höhe des Inhalts. */
.app{min-height:100vh;}
.sidebar{background:var(--ink);color:#EDEFF4;display:flex;flex-direction:column;position:fixed;top:0;left:0;width:250px;height:100vh;z-index:30;}
.brand{padding:26px 24px 20px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px;}
.brand-seal{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:600;font-size:15px;color:var(--gold);flex-shrink:0;}
.brand-name{font-family:'Fraunces',serif;font-weight:600;font-size:16.5px;line-height:1.15;}
.brand-sub{font-size:11px;color:#9AA4BB;letter-spacing:.06em;text-transform:uppercase;margin-top:2px;}
nav.folder-nav{padding:18px 0;flex:1;overflow-y:auto;}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 24px 10px 20px;border-left:3px solid transparent;cursor:pointer;font-size:14px;color:#C7CDDC;text-decoration:none;}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff;}
.nav-item.active{background:rgba(255,255,255,.08);color:#fff;border-left-color:var(--gold);font-weight:500;}

/* NEU: Einheitliches Icon-Set (src/Icons.php) — ersetzt die
   bisherigen Emoji-Icons. Größe/Farbe werden hier zentral gesteuert,
   nicht pro Icon einzeln im SVG. */
.icon{width:18px;height:18px;flex-shrink:0;vertical-align:-3px;}
.icon-sm{width:15px;height:15px;}
.icon-lg{width:24px;height:24px;}

/* NEU: Auf-/zuklappbare Menügruppen in der Sidebar — ersetzt die
   lange, flache Liste aus Einzellinks. */
.nav-group-toggle{display:flex;align-items:center;gap:11px;width:100%;padding:10px 24px 10px 20px;border:none;background:none;cursor:pointer;font-size:14px;color:#C7CDDC;font-family:inherit;text-align:left;}
.nav-group-toggle:hover{background:rgba(255,255,255,.05);color:#fff;}
.nav-group-toggle .chevron{margin-left:auto;transition:transform .15s ease;}
.nav-group.open .nav-group-toggle .chevron{transform:rotate(180deg);}
.nav-group-items{max-height:0;overflow:hidden;transition:max-height .2s ease;}
.nav-group.open .nav-group-items{max-height:400px;}
.nav-item-sub{padding-left:52px !important;font-size:13.5px !important;}
.sidebar-footer{padding:14px 24px 20px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px;}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;font-family:'Fraunces',serif;flex-shrink:0;}
.logout-link{margin-left:auto;color:#9AA4BB;text-decoration:none;font-size:15px;}
/* NEU: main beginnt jetzt hinter der fest positionierten Sidebar
   (margin-left statt Grid-Spalte) — der zusätzliche, variable Anteil
   zentriert den Inhalt im verbleibenden Platz, ohne die Sidebar
   anzufassen. */
/* NEU (Bugfix v2): Die vorherige Lösung über margin-left + calc()
   sollte den Inhalt im Platz rechts der fest positionierten Sidebar
   zentrieren, hat das in der Praxis aber nicht zuverlässig getan.
   Robusterer Ansatz: main selbst als Grid mit einer einzigen Spalte
   (max. 1080px breit), die per justify-content zentriert wird — das
   ist genau das CSS-Werkzeug, das für diesen Zweck gemacht ist,
   statt sich auf Rand-Berechnungen zu verlassen. */
main{
  /* NEU (Bugfix v3): Grid-Ansatz aus v2 hatte einen konzeptionellen
     Fehler — eine Spalte mit minmax(0, 1080px) zieht sich bei
     "justify-content:center" nicht zuverlässig auf die volle Breite,
     sondern kann sich auf den Inhalt zusammenziehen. Robuster: beide
     Ränder EXPLIZIT berechnen (nicht nur links), damit width:auto
     rechnerisch exakt auf 1080px landet, statt sich auf unklares
     Verhalten bei überbestimmten Rand-Werten zu verlassen. */
  --seiten-abstand: max(44px, calc((100vw - 250px - 1080px) / 2));
  margin-left: calc(250px + var(--seiten-abstand));
  margin-right: var(--seiten-abstand);
  max-width:1080px;
  min-height:100vh;
  padding:34px 0 60px;
}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}

/* NEU (Bugfix): Viele Formular-/Inhalts-Karten haben eine eigene
   max-width (schmaler als main), saßen dadurch aber links in main statt
   zentriert — main selbst war zwar schon zentriert, aber das reicht
   nicht, wenn der Inhalt DARIN schmaler ist und kein eigenes
   auto-Margin hat. Gilt NUR für Karten direkt in main (nicht für
   Karten innerhalb von Grids wie .vertraege-grid/.drei-kacheln/
   .summary-grid — die sollen ihre Zellen weiter ausfüllen).
   Einzelne Karten, die bewusst LINKS bleiben sollen (z.B. neben einer
   anderen Karte), können das mit style="margin:0;" wieder aufheben. */
main > .card, main > form > .card{margin-left:auto;margin-right:auto;}

/* NEU: Wiederverwendbares Schritt-für-Schritt-Muster ("Rondell") —
   genutzt bei der Registrierung UND beim Vertrag-Anlegen-Assistenten.
   Jeder .assistent-schritt ist ein eigener Abschnitt, nur einer ist
   per .aktiv gleichzeitig sichtbar. */
.assistent-fortschritt{display:flex;gap:6px;margin-bottom:26px;}
.assistent-fortschritt .punkt{flex:1;height:4px;border-radius:2px;background:var(--line);}
.assistent-fortschritt .punkt.erledigt{background:var(--gold);}
.assistent-fortschritt .punkt.aktiv{background:var(--ink);}
.assistent-schritt{display:none;}
.assistent-schritt.aktiv{display:block;animation:assistentEin .2s ease;}
@keyframes assistentEin{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.assistent-titel{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin-bottom:16px;}
.assistent-nav{display:flex;justify-content:space-between;margin-top:24px;}
.assistent-baustein-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}
.assistent-baustein-wahl label{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px;border:1.5px solid var(--line);border-radius:var(--radius);cursor:pointer;font-size:13px;text-align:center;}
.assistent-baustein-wahl input{position:absolute;opacity:0;pointer-events:none;}
.assistent-baustein-wahl input:checked + span{font-weight:600;}
.assistent-baustein-wahl label:has(input:checked){border-color:var(--gold);background:var(--paper-dim, #F0EDE5);}
.assistent-baustein-wahl .icon-gross{font-size:26px;}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:32px;}

/* NEU: Responsives Grid für "Meine Verträge" — zeigt auf breiten
   Bildschirmen mehrere Karten nebeneinander statt einer schmalen
   Spalte mit viel Leerraum, fällt auf schmalen Bildschirmen
   automatisch auf eine Spalte zurück. */
.vertraege-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px;align-items:start;}
.policy-card{padding:18px;border-radius:var(--radius);border:1px solid var(--line);border-top:4px solid var(--c,var(--ink));background:var(--paper);box-shadow:var(--shadow);}
.optiker-card{display:flex;gap:14px;align-items:center;padding:16px 18px;}
.optiker-logo{width:52px;height:52px;border-radius:6px;object-fit:contain;background:#fff;border:1px solid var(--line);flex-shrink:0;}

@media (max-width:860px){
  .sidebar{transform:translateX(-100%);transition:transform .18s ease;}
  .sidebar.open{transform:translateX(0);}
  main{margin-left:0;margin-right:0;max-width:none;padding:20px 18px 50px;}
}

/* NEU: (i)-Info-Symbol neben Leistungsnamen — klickbar, zeigt eine
   optionale Beschreibung an, falls eine hinterlegt ist. Global hier
   definiert, damit es auf jeder Seite gleich aussieht/funktioniert. */
.info-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--paper-dim, #F0EDE5);color:var(--slate);font-size:11px;cursor:pointer;margin-left:4px;vertical-align:middle;user-select:none;}
.info-icon:hover{background:var(--gold);color:var(--ink);}
.info-popover{display:none;background:var(--paper-dim, #F0EDE5);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-top:6px;font-size:12.5px;color:var(--ink-soft);line-height:1.5;}
.info-popover.show{display:block;}