/* ===================================================================== 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%; /* NEU (gefundene Lücke): .field ist ein Flex-Container — ohne min-width:0 verweigern manche Browser (v.a. bei type=date) das Schrumpfen auf 100% und behalten ihre eigene Mindestbreite, dadurch wirkte das Versicherungsbeginn-Feld breiter als die Textfelder daneben. */ min-width:0; } 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;} /* BUGFIX (gefunden): Der dunkle Overlay-Hintergrund fürs mobile Menü hatte z-index:40, die Sidebar selbst nur z-index:30 — das Overlay lag damit über der kompletten Sidebar (nicht nur über dem Hauptinhalt daneben) und fing JEDEN Klick auf einen Menüpunkt ab, bevor er den Link erreichte (schloss dadurch nur das Menü, statt zu navigieren). Sidebar jetzt über dem Overlay. */ .sidebar{background:var(--ink);color:#EDEFF4;display:flex;flex-direction:column;position:fixed;top:0;left:0;width:250px;height:100vh;z-index:50;} .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: Breiteres main für datenreiche Seiten (z.B. Tarifliste mit vielen Spalten) — main ist sonst überall bewusst auf 1080px begrenzt (lesefreundlich für Formulare/Text), aber Tabellen mit vielen Spalten wirken darin auf großen Bildschirmen schnell links zusammengequetscht mit viel Leerraum rechts. Opt-in per main.main-breit statt global, um die schmalere Standardbreite auf allen anderen Seiten nicht anzutasten. Nur ab 861px aktiv, damit die mobile main-Regel oben (max-width:none) auf schmalen Bildschirmen unangetastet bleibt. */ @media (min-width:861px){ main.main-breit{ --seiten-abstand: max(44px, calc((100vw - 250px - 1440px) / 2)); max-width:1440px; } } /* 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: Abgespeckte "App-Ansicht" — greift NUR, wenn das Portal als installierte PWA läuft (Klasse "pwa-app" auf , gesetzt in partials/head.php) UND auf schmalen Bildschirmen. Ersetzt das bisherige Seitenmenü (Hamburger + Overlay + volle Sidebar) durch eine schlanke obere Leiste (Portalname + Abmelden) und eine feste untere Tab-Leiste mit den 3 Kernbereichen — typische App-Optik statt einer verkleinerten Desktop-Ansicht. Im normalen mobilen Browser (nicht installiert) bleibt alles wie bisher unverändert. */ .app-topbar, .app-bottomnav{display:none;} /* NEU: "App installieren"-Button ausblenden, sobald das Portal bereits als installierte PWA läuft — unabhängig von der Bildschirmbreite, deshalb außerhalb der max-width-Media-Query unten. */ html.pwa-app .pwa-install-trigger{display:none!important;} @media (max-width:860px){ html.pwa-app .sidebar{display:none!important;} html.pwa-app #menuToggle{display:none!important;} html.pwa-app #overlay{display:none!important;} html.pwa-app .app-topbar{ display:flex;align-items:center;justify-content:space-between; position:fixed;top:0;left:0;right:0;z-index:50; padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 14px; background:var(--ink);color:#fff; } html.pwa-app .app-topbar-brand{display:flex;align-items:center;gap:8px;min-width:0;} html.pwa-app .app-topbar-brand img{max-height:26px;max-width:140px;width:auto;height:auto;object-fit:contain;} html.pwa-app .app-topbar-brand .brand-seal{width:26px;height:26px;border-radius:7px;background:#fff;color:var(--ink);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;} html.pwa-app .app-topbar .brand-name{font-family:'Fraunces',serif;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} html.pwa-app .app-topbar .logout-link{color:#C7CDDC;text-decoration:none;font-size:17px;line-height:1;flex-shrink:0;} /* NEU (Familiennutzung): kompakter Namens-Umschalter in der App-Topbar. */ html.pwa-app .app-topbar-kontext{flex:1;min-width:0;margin:0 10px;} html.pwa-app .app-topbar-kontext select{ width:100%;max-width:140px;background:rgba(255,255,255,.12);color:#fff; border:1px solid rgba(255,255,255,.25);border-radius:20px; padding:5px 10px;font-size:12px; } html.pwa-app .app-topbar-kontext select option{color:#1E2D4F;} html.pwa-app .app-bottomnav{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50; background:#fff;border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0px); } html.pwa-app .app-bottomnav a{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; padding:9px 0 7px;color:var(--slate);text-decoration:none;font-size:10.5px; } html.pwa-app .app-bottomnav a .icon{width:21px;height:21px;} html.pwa-app .app-bottomnav a.active{color:var(--ink);font-weight:600;} html.pwa-app main{ margin:0;max-width:none; padding:calc(env(safe-area-inset-top,0px) + 64px) 18px calc(env(safe-area-inset-bottom,0px) + 76px); } } /* 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;} /* NEU: Wiederverwendbares Modal/Popup-Muster — ersetzt einzelne "Formular-Kasten direkt auf der Seite"-Lösungen, die neben volle-Breite-Listen/Tabellen optisch unausgewogen wirkten (schmaler Kasten mit viel Leerraum daneben). Formular erscheint stattdessen nur bei Bedarf als zentriertes Overlay, die Liste bleibt alleiniger, voll nutzbarer Seiteninhalt. Gedacht für alle "Formular + Liste"- Kombinationen (Dokumente, Rechnung hochladen, Mitarbeiter/Kunde hinzufügen, ...). */ .page-header-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:24px;} .modal-overlay{display:none;position:fixed;inset:0;background:rgba(30,45,79,.45);z-index:100;align-items:center;justify-content:center;padding:20px;} .modal-overlay.open{display:flex;} .modal-box{background:#fff;border-radius:6px;padding:26px;max-width:480px;width:100%;box-shadow:var(--shadow);max-height:90vh;overflow-y:auto;} .modal-box-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;} .modal-box-header h2{margin:0;} .modal-close{background:none;border:none;cursor:pointer;color:var(--slate);font-size:20px;line-height:1;padding:4px;} .modal-close:hover{color:var(--ink);} /* NEU: Variante für Popups, deren Inhalt eine bestehende, eigenständige Formular-Seite per