/* =====================================================================
   Apple-Look (heller Modus, Glas-Effekt) – Gestaltungsschicht über style.css
   Nur Optik: Farben, Rundungen, Schatten, Glas. Keine Funktionen, kein Layout.
   Wird als letztes Stylesheet in index.html geladen und überschreibt deshalb
   die bisherigen Regeln. Zum Abschalten: diese Datei einfach nicht einbinden.

   Regeln aus Apples Human Interface Guidelines („Materials“, „Adopting Liquid Glass“, „Color“):
   1. Glas („Liquid Glass“) nur für die Bedien-Ebene: Seitenleiste, Kopfleiste, Tab-Leiste,
      Menüs, Fenster, Meldungen. NICHT für Inhalte (Karten, Listen, Tabellen) – die bleiben deckend.
   2. Sparsam: nur die wichtigsten Bedienelemente, kein Glas auf Glas stapeln.
   3. Variante „regular“ (verwischt + Helligkeit angepasst) für textreiche Flächen wie Seitenleisten,
      Fenster und Menüs; Seitenleisten etwas deckender.
   4. Scroll-Kante: Inhalt, der unter eine Leiste läuft, wird zur Leiste hin verwischt/abgeschwächt –
      statt einer harten Trennlinie.
   5. Farbe sparsam: Glas hat keine eigene Farbe; Beschriftungen in Leisten einfarbig; Farbe nur
      für die eine Hauptaktion (hervorgehobener Knopf), höchstens ein bis zwei je Ansicht.
   6. Rundungen konzentrisch (innere Rundung = äußere Rundung − Abstand), Kapseln für Knöpfe,
      Druckzustand bei jedem Knopf, Treffbereich mindestens 44 px.
   7. „Transparenz reduzieren“ / fehlende Glas-Unterstützung: deckende Flächen.
   ===================================================================== */

:root{
  --ink:#1d1d1f; --ink-2:#2c2c30; --muted:#6e6e73; --icon-col:#515158;
  --line:#e4e4e9; --bg:#f4f5f8; --nav-active-bg:rgba(27,45,91,.10);
  --amber-bg:#fdf1dc; --amber-text:#7a4b0c;
  /* Glas */
  --ap-glass:rgba(255,255,255,.62);
  --ap-glass-2:rgba(255,255,255,.80);
  --ap-blur:blur(26px) saturate(190%);
  --ap-edge:inset 0 1px 0 rgba(255,255,255,.92),inset 0 0 0 1px rgba(255,255,255,.45);
  --ap-hair:rgba(0,0,0,.065);
  --ap-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 30px rgba(16,24,40,.07);
  --ap-shadow-lg:0 2px 6px rgba(16,24,40,.05),0 24px 60px rgba(16,24,40,.14);
  --ap-r:20px; --ap-rs:12px;
  background:#f4f5f8;
}
html{background:#f4f5f8}
body{background:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* Zarter Farbhauch im Hintergrund – das Glas hat so etwas zum Verwischen */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 620px at 6% -8%,rgba(27,45,91,.11),transparent 62%),
    radial-gradient(820px 560px at 102% -2%,rgba(176,127,60,.13),transparent 60%),
    radial-gradient(760px 540px at 58% 112%,rgba(27,45,91,.07),transparent 60%),
    #f4f5f8}
*{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.22) transparent}

/* ---------- Schrift ----------
   Ausgenommen: die goldenen Schriftzüge der Studio-Begrüßung (.jw-title, studio-welcome.css) und die Portal-Begrüßung (.pw-title) –
   sonst wurde „Auf Wiedersehen“ beim Wechsel Studio → Portal dunkel auf dunkelblau (18.10.2026). */
h1:not(.jw-title):not(.pw-title),.greeting h1,.ov-greeting h1{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--ink);-webkit-text-fill-color:var(--ink);font-weight:700;letter-spacing:-.035em}
h2,.sectionhead h2,.customer-group h2{color:var(--ink);letter-spacing:-.02em;font-weight:650}
.eyebrow,.ov-dateline{color:var(--muted);letter-spacing:.12em;font-weight:600}
.greeting p,.ov-greeting p,.sub{color:var(--muted)}
.greeting:after{display:none}

/* ---------- Fokus ---------- */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.account-button:focus-visible{outline:3px solid rgba(27,45,91,.38);outline-offset:3px}

/* ---------- Seitenleiste: Glas ---------- */
.shell>.sidebar{background:rgba(255,255,255,.78)!important;-webkit-backdrop-filter:var(--ap-blur);backdrop-filter:var(--ap-blur);
  border-right:1px solid var(--ap-hair)!important;box-shadow:var(--ap-edge)!important}
.shell>.sidebar .navitem{border-radius:12px!important;height:40px!important;padding:0 12px!important;color:#3a3a3c!important;font-weight:500!important;margin-bottom:2px}
.shell>.sidebar .navitem .nav-icon{color:#515158!important}
.shell>.sidebar .navitem:hover{background:rgba(0,0,0,.05)!important;color:var(--ink)!important}
.shell>.sidebar .navitem:hover .nav-icon{color:var(--primary)!important}
.shell>.sidebar .navitem.active,.shell>.sidebar .navitem[aria-current="page"]{background:rgba(27,45,91,.10)!important;color:var(--primary)!important;font-weight:600!important;box-shadow:none!important}
.shell>.sidebar .navitem.active .nav-icon{color:var(--primary)!important}
.navgroup-items::before,.navsub::before{border-color:rgba(0,0,0,.12)}
.navbadge{border-radius:999px!important;font-weight:700}
.account-button.is-current{background:rgba(27,45,91,.10);box-shadow:none;border-radius:12px}
.avatar{background:linear-gradient(145deg,#e4c58f,#b98540);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.08)}
.sidebar-promo{border-radius:18px!important;background:linear-gradient(160deg,#223a6d,#16264d)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px rgba(22,38,77,.22)!important}
.sidebar-legal a{color:var(--muted)}

/* ---------- Kopfleiste: schwebendes Glas ---------- */
.topbar{background:rgba(255,255,255,.66)!important;-webkit-backdrop-filter:var(--ap-blur);backdrop-filter:var(--ap-blur);
  border-bottom:0!important;box-shadow:none!important;color:var(--muted);position:sticky}
/* Scroll-Kante: der Inhalt wird zur Leiste hin weich abgeschwächt (Apple: „scroll edge effect“) */
.topbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,245,248,.92),rgba(244,245,248,0))}
@media(min-width:901px){.topbar{height:72px}}
.topbar-bc-page{color:var(--ink);letter-spacing:-.01em}
.topbar-tour{background:rgba(0,0,0,.05)!important;border:0!important;border-radius:999px!important;padding:8px 14px!important;color:var(--ink)!important}
.topbar-tour:hover{background:rgba(0,0,0,.09)!important}
.topbar-logout{border-radius:999px!important;padding:8px 12px!important}
.topbar-logout:hover{background:rgba(0,0,0,.05)!important}
.session-pill{border-radius:999px;font-weight:600}
.mobile-toggle{border-radius:12px;background:rgba(0,0,0,.05);border:0}

/* ---------- Knöpfe: Kapseln ---------- */
.primary{border-radius:999px!important;border:0!important;font-weight:600;letter-spacing:-.005em;
  background:linear-gradient(180deg,#24407a 0%,#16264d 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(16,24,40,.12),0 8px 20px rgba(22,38,77,.22);
  transition:filter .18s,transform .18s,box-shadow .18s!important}
/* Knöpfe auf dunklen Flächen (Tipp-Fenster, Hinweiskarte) behalten ihre helle Farbe – darum oben kein !important */
.primary:hover{filter:brightness(1.08)}
.primary:active{transform:scale(.985)}
.primary:disabled{filter:none}
.secondary{border-radius:999px!important;border:0!important;background:rgba(120,120,128,.13);color:var(--ink);font-weight:500;box-shadow:none}
.secondary:hover{background:rgba(120,120,128,.21)}
.secondary:active{transform:scale(.985)}
.compact{min-height:40px;padding:9px 16px}
.link{color:var(--primary)}
.more-actions>summary{border-radius:999px}
.more-actions-menu{border-radius:16px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:var(--ap-blur);backdrop-filter:var(--ap-blur);
  border:1px solid rgba(255,255,255,.7);box-shadow:var(--ap-shadow-lg);padding:6px}
.more-actions-menu button{border-radius:10px}
.more-actions-menu button:hover,.more-actions-menu button:focus-visible{background:rgba(0,0,0,.06)}
/* Reiter auf der Anmeldeseite: segmentierter Schalter */
.tabs{background:rgba(120,120,128,.13);border:0;border-radius:12px;padding:3px;box-shadow:none}
.tabs button{border-radius:9px}
.tabs button.active{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.06)}

button:not(:disabled):active,.navitem:active,.ov-stat:active{transform:scale(.985)}

/* ---------- Eingabefelder ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea{
  border-radius:12px!important;border:1px solid rgba(0,0,0,.11)!important;background:rgba(255,255,255,.86)!important;
  box-shadow:none!important;color:var(--ink)!important;transition:border-color .15s,box-shadow .15s}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):focus,select:focus,textarea:focus{
  border-color:var(--primary)!important;box-shadow:0 0 0 4px rgba(27,45,91,.14)!important;outline:none}
input::placeholder,textarea::placeholder{color:#9a9aa0}
input[type=checkbox],input[type=radio]{accent-color:var(--primary)}
label{color:var(--ink-2)}

/* ---------- Karten ---------- */
.settingsbox,.ov-bottom-files,.ov-side-card,.customer-card,.customertable,.pc-card,.approvalcard,.approval-decision-card,
.sig-card,.project-file-card,.paybox,.overview-tile,.pa-tile,.profil-contact-card,.context-help-card,.tour-card,.filetable,
.pc-news-card,.pc-news-related-card,.bundle-peek-tile,.ov-contract-alert{
  border-radius:var(--ap-r)!important;border-color:var(--ap-hair)!important;box-shadow:var(--ap-shadow)!important}
/* Inhaltsebene: deckendes Weiß, kein Glas (Apple-Regel 1) */
.settingsbox,.ov-bottom-files,.ov-side-card,.customer-card,.customertable,.pc-card,.approvalcard,.approval-decision-card,
.sig-card,.project-file-card,.paybox,.profil-contact-card,.pc-news-card{background:#fff!important}
.customer-card:hover{transform:translateY(-2px);box-shadow:0 2px 6px rgba(16,24,40,.05),0 18px 40px rgba(16,24,40,.11)!important}
.customer-card-open .customeravatar{border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(22,38,77,.18)}
.customeravatar{background:linear-gradient(145deg,#24407a,#16264d)}
.customer-card-actions{border-top-color:var(--ap-hair)}
.customer-card-actions .secondary{background:rgba(120,120,128,.13)!important;border:0!important;border-radius:999px!important}
.customer-row{border-radius:16px;background:#fff;border-color:var(--ap-hair)}
.customer-group{border-top-color:var(--ap-hair)}
th{background:rgba(0,0,0,.025);color:var(--muted);font-weight:600;letter-spacing:.02em}
.customertable tbody tr:hover{background:rgba(27,45,91,.04)}
.status,.customerstatus,.customer-push,.ov-file-badge{border-radius:999px;font-weight:600}
.customerstatus.active{background:rgba(27,45,91,.09);color:var(--primary)}

/* Übersicht: Kennzahlen und Hinweiskarte */
.ov-stats{gap:14px}
.ov-stat{border-radius:18px;border-color:var(--ap-hair);box-shadow:var(--ap-shadow);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.ov-stat:hover{transform:translateY(-2px);box-shadow:0 2px 6px rgba(16,24,40,.05),0 16px 36px rgba(16,24,40,.10)}
.ov-stat-icon{border-radius:11px}
.ov-hero{border-radius:24px;background:linear-gradient(135deg,#1b2d5b 0%,#22386c 55%,#2d4a86 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 20px 50px rgba(22,38,77,.26)}
.ov-hero-preview{border-radius:12px;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.ov-hero-aside{border-left-color:rgba(255,255,255,.14)}
.ov-aside-item{border-radius:14px;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.16)}
.ov-aside-item:hover{background:rgba(255,255,255,.18)}
.ov-hero-actions .primary.compact{box-shadow:0 1px 2px rgba(0,0,0,.12),0 6px 18px rgba(0,0,0,.18)!important}
.ov-hero-actions .secondary.compact{border:1px solid rgba(255,255,255,.28)!important;background:rgba(255,255,255,.12)!important;color:#fff!important}
.ov-file-row{border-radius:12px}
.ov-file-row:hover{background:rgba(27,45,91,.05)}
.ov-contract-alert{background:rgba(255,247,232,.85)!important;border-color:rgba(176,127,60,.25)!important}
.customer-switcher select{background:rgba(255,255,255,.86)!important}

/* ---------- Hinweise, Fenster ---------- */
.toast{background:rgba(29,29,31,.84)!important;color:#fff;-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important;box-shadow:0 20px 50px rgba(0,0,0,.28)!important}
dialog{border:1px solid rgba(255,255,255,.72);border-radius:24px;background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:var(--ap-shadow-lg)}
dialog::backdrop{background:rgba(20,24,40,.32);-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%)}
.message-notice{border-radius:22px;background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.8);box-shadow:var(--ap-shadow-lg)}
.dialogclose{border-radius:999px}

/* ---------- Untere Leiste am Handy: schwebende Glas-Kapsel ---------- */
@media(max-width:900px){
  .bottomnav{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));border-radius:26px;border:1px solid rgba(255,255,255,.75);
    background:var(--ap-glass-2);-webkit-backdrop-filter:var(--ap-blur);backdrop-filter:var(--ap-blur);box-shadow:var(--ap-shadow-lg);padding:6px}
  .bottomnav-item{border-radius:16px}
  .bottomnav-item.is-active{background:rgba(27,45,91,.10);color:var(--primary)}
  .maincontent{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  #mobile-menu{border-radius:24px}
}

/* ---------- Testversions-Leiste ---------- */
.prototype-banner{background:rgba(255,243,205,.72);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid rgba(0,0,0,.06)}
.prototype-banner button{border-radius:999px;background:rgba(27,45,91,.10);border:0;color:var(--primary);font-weight:600;padding:8px 14px}
.prototype-banner select{border-radius:999px!important;padding:7px 30px 7px 12px}

/* ---------- JP-Assistent: Sprechblase als dunkles Glas ---------- */
.jpa-bubble{background:rgba(29,29,31,.84);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.12);border-radius:20px}
.jpa-bubble:hover{background:rgba(44,44,48,.9)}
.jpa-panel{border-radius:26px;border:1px solid rgba(255,255,255,.12)}

/* ---------- Weitere Bereiche (Runde 2, 18.10.) ---------- */
/* Filter-Reihen (Freigaben, Dateien, Verträge, Verlauf, Unterschrift): Kapseln, gewählte Kapsel dunkel */
.approval-tabs .secondary,.file-tabs .secondary,.document-tabs .secondary,.pa-gallery-filter .secondary,.history-filter .secondary,.sig-tabs .secondary{border-radius:999px!important}
.secondary.selected,.document-tabs .selected{background:var(--ink)!important;color:#fff!important}
.invoice-view-toggle{border:0;background:rgba(120,120,128,.13);padding:3px;border-radius:999px}
/* Nachrichten: Karte deckend, Blasen weicher, Eingabe als Kapsel */
.chat-panel{background:#fff;border-color:var(--ap-hair);border-radius:22px;box-shadow:var(--ap-shadow)}
.chat-message{border-radius:18px 18px 18px 6px;border-color:transparent;background:#f0f1f5}
.chat-message.mine{border-radius:18px 18px 6px 18px;background:#e1e9f7}
.chat-compose .chat-inputbar{border-radius:26px;border-color:rgba(0,0,0,.1);background:#fff}
/* Termine */
.appointment-banner,.appointment-upcoming{border-radius:22px;border-color:var(--ap-hair);box-shadow:var(--ap-shadow);background:#fff}
.appointment-row{border-radius:16px;border-color:var(--ap-hair)}
.appointment-date,.appointment-row-date{border-radius:14px;background:linear-gradient(180deg,#24407a,#16264d)}
/* Freigaben & Feedback */
.approval-row{border-radius:16px;border-color:var(--ap-hair)}
.approval-row.selected{background:rgba(27,45,91,.07);border-color:rgba(27,45,91,.35);box-shadow:none}
.approval-detail-pane{border-radius:22px;border-color:var(--ap-hair);box-shadow:var(--ap-shadow)}
.approval-detail-preview{border-radius:16px}
.approval-bundle{border-radius:18px}
/* Projekt-Dateien */
.project-file-card{border-radius:18px;border-color:var(--ap-hair);box-shadow:var(--ap-shadow);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.project-file-card:hover{transform:translateY(-2px);box-shadow:0 2px 6px rgba(16,24,40,.05),0 16px 36px rgba(16,24,40,.10)}
/* Fenster und Menüs öffnen mit leichtem Aufzoomen (wie Apple-Sheets) */
dialog[open]{animation:ap-sheet .28s cubic-bezier(.2,.9,.3,1.1)}
.more-actions-menu{animation:ap-pop .18s cubic-bezier(.2,.9,.3,1.1);transform-origin:top right}
@keyframes ap-sheet{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ap-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ---------- Ohne Glas-Unterstützung oder bei „Transparenz reduzieren“: deckende Flächen ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .shell>.sidebar,.topbar{background:rgba(255,255,255,.97)!important}
  dialog,.more-actions-menu{background:#fff}
}
@media(prefers-reduced-transparency:reduce){
  .shell>.sidebar,.topbar{background:rgba(255,255,255,.98)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
  dialog{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .toast,.jpa-bubble{background:#1d1d1f!important}
}
@media(prefers-reduced-motion:reduce){
  .primary,.secondary,.ov-stat,.customer-card,.project-file-card{transition:none!important;transform:none!important}
  dialog[open],.more-actions-menu{animation:none!important}
}

/* Anmeldeseite: Hinweis, wenn ein Vorlagen-/Design-Link aus dem Studio gewartet hat (app.js studioLinkHint) */
.auth-linkhint{margin:4px 0 14px;padding:10px 14px;border-radius:14px;background:rgba(27,45,91,.07);color:#1b2d5b;font-size:.9rem;font-weight:600;line-height:1.4}

/* Dateibündel-Vorschau (Freigaben & Feedback, Projekt-Dateien): kleine Fotos im 4:5-Format mit abgerundeten Ecken statt
   Kreisen (20.10.2026, Johannes). Die allgemeine Karten-Rundung (--ap-r 20px) machte aus 40-px-Kacheln Kreise. */
.shell .workspace .approval-bundle-peek .bundle-peek-tile.file-thumbnail.file-thumbnail,
.shell .workspace .file-bundle.file-bundle.file-bundle .bundle-peek-tile.file-thumbnail{
  width:40px;height:50px;flex:0 0 40px;max-width:40px;aspect-ratio:auto;border-radius:9px!important}

/* Kontrast-Durchsicht 21.10.2026 (Wunsch Johannes): Reste des früheren dunklen Portal-Designs (helle Schrift), die im
   hellen Apple-Look fast unsichtbar waren. Gemessen mit einem Kontrast-Prüflauf über alle Seiten. */
.profil-contact-card{color:var(--ink)!important}
.profil-contact-card strong{color:var(--ink)!important}
.profil-contact-card p{color:var(--muted)!important}
.shell .customer-group.empty .helper{color:var(--muted)}
.zugang-aktiv{background:rgba(22,128,61,.12);color:#166534}
.shell .chat-empty,.shell .thread-title small,.shell .thread-text small,.shell .file-customer small,.chat-compose small.chat-keyhint{color:var(--muted)!important}
.shell .chat-attach{color:#8a5f27}
#portal-tour .tour-card .link,#portal-tour .tour-actions-row .link{color:var(--primary,#1b2d5b)!important}
.sidebar-legal,.legal-links,.legal-links .legal-link{color:var(--muted)}
.passkey-or{color:var(--muted)}
.cockpit-empty{color:var(--muted)}
.tab-count{opacity:.85}
.nav-new{background:linear-gradient(135deg,#b07f3c,#8a5f27)}