/* ==========================================================
   glas.css – gemeinsame Glas-Optik für alle Seiten des Portals.
   Wird nach den Seiten-Stilen geladen und überschreibt nur die
   Optik (Farben, Glas, Hintergrund), nicht den Aufbau.
   Aktiv nur, wenn <body class="glas"> gesetzt ist.
   Die Druckansicht (fragebogen_pdf.php) bleibt bewusst weiß.
   ========================================================== */

:root{--m:45}
body.glas{
  --ink:#f6f7f9;--text:#f6f7f9;--muted:rgba(236,238,244,.74);--faint:rgba(236,238,244,.56);
  --line:rgba(255,255,255,.12);--border:rgba(255,255,255,.16);--stroke:rgba(255,255,255,.16);
  --card:transparent;--bg:#11131a;
  --accent:#e3b45a;--accent-d:#d9a648;--accent-dark:#d9a648;
  --gold1:#f3d08a;--gold2:#d9a648;--green:#5ee59a;--amber:#ffc266;--blue:#8fbcff;--red:#ff8a80;
  --ok:#5ee59a;--ok-bg:rgba(94,229,154,.14);--ok-text:#5ee59a;
  --warn:#ffc266;--warn-bg:rgba(255,194,102,.14);
  --err:#ff8a80;--err-bg:rgba(255,110,100,.15);--err-text:#ff9d94;
  --glas-bg:linear-gradient(rgba(255,255,255,calc(var(--m) * .0006)),rgba(255,255,255,calc(var(--m) * .0006))),rgba(32,36,50,calc(.22 + var(--m) * .0078));
  --glas-blur:blur(calc(1px + var(--m) * .22px)) saturate(120%);
  background:#11131a !important;color:var(--ink) !important;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  position:relative;min-height:100vh;
}

/* ---------- Hintergrund ---------- */
body.glas::before{content:"";position:fixed;inset:-2%;z-index:0;pointer-events:none;
  background:url(hintergrund.jpg) center/cover no-repeat;animation:yoAtmen 40s ease-in-out infinite alternate}
body.glas::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,16,24,.05) 0%,rgba(12,16,24,.08) 40%,rgba(12,14,18,.22) 80%,rgba(10,12,16,.45) 100%)}
body.glas > *{position:relative;z-index:1}
@keyframes yoAtmen{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.025) translate3d(-.6%,-.4%,0)}}

/* Kopfbereich: Anthrazit mit weichem Übergang ins Bild */
body.glas .kopf{background:linear-gradient(180deg,rgba(43,47,54,.97) 0%,rgba(43,47,54,.90) 45%,rgba(43,47,54,.55) 75%,rgba(43,47,54,0) 100%) !important;padding-bottom:40px}
body.glas .knav{background:rgba(32,36,50,.55);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body.glas .knav a{color:var(--muted);transition:background .3s,color .3s}
body.glas .knav a:hover:not(.active){color:#fff;background:rgba(255,255,255,.10)}
body.glas .knav a.active{color:#1b1610 !important;background:linear-gradient(180deg,var(--gold1),var(--gold2));box-shadow:0 6px 18px rgba(227,180,90,.35)}
body.glas .kavatar,body.glas .avatar{background:linear-gradient(180deg,var(--gold1),var(--gold2)) !important;color:#1b1610 !important;box-shadow:0 0 0 2px rgba(255,255,255,.25)}

/* ---------- Glas-Flächen ---------- */
body.glas .card,body.glas .card2,body.glas .tile,body.glas .stat,body.glas .yearrow{
  background:var(--glas-bg) !important;border:1px solid rgba(255,255,255,.07) !important;
  backdrop-filter:var(--glas-blur);-webkit-backdrop-filter:var(--glas-blur);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 16px 40px rgba(0,0,0,.22) !important;color:var(--ink)}
body.glas .card,body.glas .card2,body.glas .tile{border-radius:22px}

/* Kacheln mit Schimmer beim Darüberfahren */
body.glas .tile,body.glas a.stat{position:relative;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s cubic-bezier(.2,.8,.2,1),border-color .45s}
body.glas .tile::after,body.glas a.stat::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12) 48%,transparent 66%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
body.glas .tile:hover,body.glas a.stat:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.26) !important;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 30px 70px rgba(0,0,0,.36) !important}
body.glas .tile:hover::after,body.glas a.stat:hover::after{transform:translateX(120%)}

/* Einblenden beim Laden */
body.glas .wrap > *,body.glas .mitte > .card,body.glas > .card{animation:yoRein .5s cubic-bezier(.2,.8,.2,1) both}
body.glas .wrap > *:nth-child(2){animation-delay:.04s}body.glas .wrap > *:nth-child(3){animation-delay:.08s}
body.glas .wrap > *:nth-child(4){animation-delay:.12s}body.glas .wrap > *:nth-child(5){animation-delay:.16s}
body.glas .wrap > *:nth-child(6){animation-delay:.2s}body.glas .wrap > *:nth-child(n+7){animation-delay:.24s}
body.glas .grid > *,body.glas .stats > *{animation:yoRein .5s cubic-bezier(.2,.8,.2,1) both}
body.glas .grid > *:nth-child(2),body.glas .stats > *:nth-child(2){animation-delay:.06s}
body.glas .grid > *:nth-child(3),body.glas .stats > *:nth-child(3){animation-delay:.12s}
body.glas .grid > *:nth-child(4),body.glas .stats > *:nth-child(4){animation-delay:.18s}
body.glas .grid > *:nth-child(n+5),body.glas .stats > *:nth-child(n+5){animation-delay:.24s}
@keyframes yoRein{from{opacity:0;transform:translateY(12px) scale(.99);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}

/* ---------- Schrift ---------- */
body.glas h1,body.glas h2,body.glas h3,body.glas .title,body.glas .tname,body.glas .zahl,body.glas .bname,body.glas .betrag,body.glas .kname{color:var(--ink) !important}
body.glas .card2 h2,body.glas .yearrow label{color:var(--ink) !important}
body.glas .kicker,body.glas .muted,body.glas .sub,body.glas .lead,body.glas .tdesc,body.glas .lab,body.glas .hint,body.glas .foot,
body.glas .empty,body.glas .leer,body.glas .fmeta,body.glas .qrhint,body.glas .brand span,body.glas .brand .hallo,body.glas .konvzeit,body.glas .konvprev{color:var(--muted) !important}
body.glas a{color:var(--gold1)}
body.glas a:hover{color:#ffe2a6}
body.glas a.back,body.glas .back,body.glas .zurueck{color:var(--muted) !important}
body.glas a.back:hover,body.glas .back:hover,body.glas .zurueck:hover{color:var(--ink) !important}
body.glas td a{color:var(--gold1) !important}
body.glas .tile,body.glas .tile:hover,body.glas .kname,body.glas .konv,body.glas .zeile{color:var(--ink)}
body.glas .kname:hover{color:var(--gold1) !important}
body.glas td .knr{background:none !important;padding:0 !important}
body.glas td .knr,body.glas .chosen,body.glas .feldzeile .wert{color:var(--ink) !important}
body.glas code{background:rgba(255,255,255,.10);padding:1px 6px;border-radius:6px;color:var(--ink)}
body.glas label{color:var(--muted)}
body.glas .check label,body.glas .confirm{color:var(--ink) !important}
body.glas legend{color:var(--gold1) !important}
body.glas summary{color:var(--muted)}
body.glas .txtblock p{color:var(--muted) !important}
body.glas .fertigtitel,body.glas .fertigzeile a{color:var(--green) !important}

/* ---------- Eingabefelder ---------- */
body.glas input[type=text],body.glas input[type=email],body.glas input[type=password],body.glas input[type=search],
body.glas input[type=number],body.glas input[type=date],body.glas input[type=tel],body.glas input:not([type]),
body.glas select,body.glas textarea{
  background:rgba(255,255,255,.08) !important;color:var(--ink) !important;border:1px solid rgba(255,255,255,.18) !important;
  border-radius:12px;font-family:inherit;transition:border-color .25s,background .25s,box-shadow .25s}
body.glas input::placeholder,body.glas textarea::placeholder{color:var(--faint)}
body.glas input:focus,body.glas select:focus,body.glas textarea:focus{outline:none;border-color:var(--gold1) !important;background:rgba(255,255,255,.12) !important;box-shadow:0 0 0 4px rgba(227,180,90,.18) !important}
body.glas input[readonly],body.glas select[disabled]{background:rgba(255,255,255,.04) !important;color:var(--muted) !important}
body.glas select option{background:#22252e;color:#f6f7f9}
body.glas input[type=checkbox],body.glas input[type=radio]{accent-color:#e3b45a}
body.glas fieldset{border-color:rgba(255,255,255,.14) !important;border-radius:16px}

/* ---------- Knöpfe ---------- */
body.glas button:where(:not(.stern):not(.del)),body.glas .btn{
  background:linear-gradient(180deg,var(--gold1),var(--gold2)) !important;color:#1b1610 !important;border:0;
  border-radius:999px !important;box-shadow:0 8px 22px rgba(227,180,90,.28);font-weight:600;transition:transform .25s,box-shadow .25s,background .25s}
body.glas button:where(:not(.stern):not(.del)):hover,body.glas .btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(227,180,90,.42)}
body.glas button:where(:not(.stern):not(.del)):active,body.glas .btn:active{transform:scale(.97)}
body.glas .btn.grau,body.glas button.grau{background:rgba(255,255,255,.12) !important;color:var(--ink) !important;box-shadow:none;border:1px solid var(--stroke)}
body.glas .btn.grau:hover{background:rgba(255,255,255,.2) !important;box-shadow:none}
body.glas .btn.rot,body.glas button.danger{background:linear-gradient(180deg,#ff8a7a,#e0514a) !important;color:#fff !important;box-shadow:0 8px 22px rgba(224,81,74,.28)}
body.glas .pdfbtn{background:rgba(94,229,154,.18) !important;color:var(--green) !important;border:1px solid rgba(94,229,154,.3);border-radius:999px}
body.glas .del{color:#ff9d94 !important}
body.glas .stern{color:rgba(255,255,255,.45)}
body.glas .stern.an{color:#f3c56a !important}
body.glas button:disabled{opacity:.6;transform:none}

/* ---------- Hinweise und Etiketten ---------- */
body.glas .msg{border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body.glas .msg.ok,body.glas .ok:not(.stat-ico):not(.pill):not(.punkt),body.glas .msg:not(.err):not(.warn){background:rgba(94,229,154,.14) !important;color:#7dedb0 !important}
body.glas .msg.err,body.glas .err:not(.pill){background:rgba(255,110,100,.15) !important;color:#ffa49b !important}
body.glas .msg.warn,body.glas .warn:not(.pill){background:rgba(255,194,102,.14) !important;color:#ffcf85 !important}
body.glas .pill.ok,body.glas .status.bezahlt{background:rgba(94,229,154,.16) !important;color:var(--green) !important}
body.glas .pill.warn,body.glas .status.offen{background:rgba(255,194,102,.16) !important;color:var(--amber) !important}
body.glas .pill.err,body.glas .pill.red{background:rgba(255,110,100,.18) !important;color:#ffa49b !important}
body.glas .pill.grau{background:rgba(255,255,255,.10) !important;color:var(--muted) !important}
body.glas .knr,body.glas .badge,body.glas .adminbanner{background:rgba(227,180,90,.16) !important;color:var(--gold1) !important;border-color:rgba(227,180,90,.25) !important}
body.glas .info,body.glas .confirm{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.12) !important;color:var(--ink) !important}
body.glas .ico{background:rgba(255,255,255,.10) !important}
body.glas .ico.blau{background:rgba(143,188,255,.16) !important}
body.glas .ico.gruen{background:rgba(94,229,154,.14) !important}
body.glas .ico.gelb{background:rgba(255,194,102,.16) !important}
body.glas .ico.lila{background:rgba(190,160,255,.16) !important}

/* ---------- Tabellen und Listen ---------- */
body.glas th{color:var(--faint) !important;border-bottom:1px solid rgba(255,255,255,.12) !important}
body.glas td{border-bottom:1px solid rgba(255,255,255,.07) !important;color:var(--ink)}
body.glas tbody tr,body.glas table tr{transition:background .25s}
body.glas .card table tr:hover td,body.glas .card2 table tr:hover td{background:rgba(255,255,255,.04)}
body.glas .check li,body.glas .wliste li,body.glas .konv{border-bottom-color:rgba(255,255,255,.08) !important}
body.glas .konv:hover{background:rgba(255,255,255,.06) !important}
body.glas .feldzeile{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.12) !important}
body.glas .drop{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.25) !important;color:var(--muted) !important;transition:background .25s,border-color .25s}
body.glas .drop.over,body.glas .drop:hover{background:rgba(227,180,90,.10) !important;border-color:var(--gold1) !important;color:var(--gold1) !important}

/* Chat */
body.glas .chatbox{background:rgba(0,0,0,.18) !important;border-color:rgba(255,255,255,.10) !important}
body.glas .bubble.me{background:linear-gradient(180deg,var(--gold1),var(--gold2)) !important;color:#1b1610 !important}
body.glas .bubble.them{background:rgba(255,255,255,.12) !important;color:var(--ink) !important}

/* Kunden-Navigation in den Kundenseiten */
body.glas .nav{background:rgba(32,36,50,.55) !important;border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body.glas .nav a{color:var(--muted) !important}
body.glas .nav a.active{background:linear-gradient(180deg,var(--gold1),var(--gold2)) !important;color:#1b1610 !important}

/* ---------- Akten ---------- */
body.glas .chips,body.glas .reiter{background:rgba(32,36,50,.55) !important;border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body.glas .chips a,body.glas .reiter a{color:var(--muted) !important;transition:background .3s,color .3s}
body.glas .chips a:hover:not(.active),body.glas .reiter a:hover:not(.active){color:var(--ink) !important;background:rgba(255,255,255,.08)}
body.glas .chips a.active{background:linear-gradient(180deg,var(--gold1),var(--gold2)) !important;color:#1b1610 !important}
body.glas .reiter a.active{background:rgba(255,255,255,.92) !important;color:#16181d !important}
body.glas .balken i{background:rgba(255,255,255,.14)}
body.glas .balken i.da{background:#8fbcff}
body.glas .balken.voll i.da{background:#5ee59a}
body.glas .balken i.fehlt{background:rgba(255,110,100,.22);box-shadow:inset 0 0 0 1px rgba(255,138,128,.7)}
body.glas a:hover .balken{background:rgba(255,255,255,.08)}
body.glas .keine{color:rgba(255,255,255,.25) !important}
body.glas .balken i{animation:yoWachsen .45s cubic-bezier(.2,.8,.2,1) both;transform-origin:bottom}
@keyframes yoWachsen{from{transform:scaleY(0)}to{transform:scaleY(1)}}
body.glas .avatar-g{background:linear-gradient(180deg,var(--gold1),var(--gold2)) !important;color:#1b1610 !important}
body.glas .beleg:hover{background:rgba(255,255,255,.07) !important}
body.glas .stat-ico.ok{background:rgba(94,229,154,.16) !important;color:var(--green) !important}
body.glas .stat-ico.fehlt{background:rgba(255,110,100,.18) !important;color:#ffa49b !important}
body.glas .stat-ico.leer{background:rgba(255,255,255,.10) !important;color:var(--faint) !important}
body.glas .ring circle:first-child{stroke:rgba(255,255,255,.14)}
body.glas .ring text{fill:#f6f7f9}
body.glas .stern.an:not(button){background:rgba(227,180,90,.16) !important}
body.glas button.stern{border-color:rgba(255,255,255,.18) !important}
body.glas button.stern.an{background:rgba(227,180,90,.16) !important;border-color:rgba(227,180,90,.4) !important}

/* ---------- Anmeldung / Einrichtung ---------- */
body.glas .mitte .card{border-radius:30px}
body.glas .mitte .logo-dunkel img{background:transparent}
body.glas .codefeld{font-size:28px !important}

/* ---------- Handy-Posteingang (Verwaltung): bleibt unverändert ---------- */
body.glas .phone .screen{color:#1f2430}
body.glas .phone{box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 0 0 2px #2a2e37 !important}

/* ---------- Regler „Milchigkeit“ ---------- */
body.glas .regler{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;cursor:pointer;
  background:linear-gradient(90deg,var(--gold1) 0%,var(--gold2) var(--p,45%),rgba(255,255,255,.18) var(--p,45%))}
body.glas .regler::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 10px rgba(0,0,0,.35),0 0 0 4px rgba(227,180,90,.25);transition:transform .2s}
body.glas .regler::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 10px rgba(0,0,0,.35),0 0 0 4px rgba(227,180,90,.25)}
body.glas .regler:hover::-webkit-slider-thumb{transform:scale(1.12)}

body.glas :focus-visible{outline:2px solid var(--gold1);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  body.glas::before,body.glas .wrap > *,body.glas .grid > *,body.glas .stats > *,body.glas .mitte > .card,body.glas > .card,body.glas .balken i{animation:none !important}
  body.glas .tile,body.glas .tile::after,body.glas a.stat,body.glas a.stat::after{transition:none}
}

/* ---------- Feinschliff ---------- */
/* Schrift direkt auf dem Bild etwas abheben */
body.glas .wrap > .title,body.glas .wrap > h1,body.glas .wrap > .kicker,body.glas .wrap > .lead,body.glas .wrap > p,
body.glas .kopfzeile,body.glas .akopf,body.glas .zurueck{text-shadow:0 1px 14px rgba(0,0,0,.5)}
/* Feste Beschriftungen in Tabellen (nur lesbar) gut lesbar halten */
body.glas table.rep input[readonly]{background:transparent !important;border-color:transparent !important;color:rgba(236,238,244,.85) !important}
/* Datei-Auswahl */
body.glas input[type=file]{color:var(--muted);font-family:inherit;font-size:13px}
body.glas input[type=file]::file-selector-button{font:inherit;font-weight:600;color:var(--ink);background:rgba(255,255,255,.12);border:1px solid var(--stroke);border-radius:999px;padding:7px 14px;margin-right:10px;cursor:pointer}
body.glas input[type=file]::file-selector-button:hover{background:rgba(255,255,255,.2)}

body.glas .balken i.sammel{background:rgba(255,194,102,.35);box-shadow:inset 0 0 0 1px rgba(255,194,102,.85)}
body.glas .stat-ico.sammel{background:rgba(255,194,102,.18) !important;color:var(--amber) !important}
body.glas a.stat.aktiv{outline:2px solid var(--gold1);outline-offset:2px}
body.glas th.j.gewaehlt{color:var(--gold1) !important}

body.glas .vorschlaege{background:rgba(28,31,42,.96) !important;border:1px solid rgba(255,255,255,.12) !important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 50px rgba(0,0,0,.45) !important}
body.glas .vorschlaege li{color:var(--ink)}
body.glas .vorschlaege li.aktiv,body.glas .vorschlaege li:hover{background:rgba(255,255,255,.10) !important}
body.glas .vorschlaege li mark{color:var(--gold1) !important;background:none}