:root{
  --blau:#007AFF; --gruen:#34C759; --rot:#FF3B30;
  --text:#000; --leise:#8E8E93; --trenn:#C6C6C8;
  --hintergrund:#fff; --gruppe:#F2F2F7; --karte:#fff;
  --schatten:0 1px 3px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root{ --text:#fff; --leise:#8E8E93; --trenn:#38383A;
         --hintergrund:#000; --gruppe:#1C1C1E; --karte:#1C1C1E; }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  background:var(--hintergrund); color:var(--text); font-size:17px; line-height:1.35;
  -webkit-font-smoothing:antialiased;
}
.versteckt{display:none !important}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:var(--blau)}

/* ── Anmeldung ── */
.anmeldung{height:100%;display:flex;align-items:center;justify-content:center;background:var(--gruppe);padding:24px}
.karte{background:var(--karte);border-radius:18px;padding:32px 24px;width:100%;max-width:380px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.08)}
.logo{width:64px;height:64px;border-radius:16px;margin:0 auto 14px;background:linear-gradient(160deg,#0A84FF,#0051D5);
  color:#fff;font-size:34px;font-weight:600;display:flex;align-items:center;justify-content:center}
.karte h1{font-size:26px;margin:0 0 2px;letter-spacing:-.4px}
.leise{color:var(--leise);font-size:15px;margin:0}
#anmeldeformular{margin-top:22px;display:flex;flex-direction:column;gap:10px}
#anmeldeformular input{background:var(--gruppe);border:1px solid transparent;border-radius:12px;padding:13px 14px;font-size:17px;color:var(--text)}
#anmeldeformular input:focus{outline:none;border-color:var(--blau);background:var(--karte)}
#anmeldeknopf{background:var(--blau);color:#fff;border-radius:12px;padding:14px;font-weight:600;margin-top:6px}
.fehler{color:var(--rot);font-size:14px;min-height:18px;margin:6px 0 0}

/* ── Kopf ── */
.app{height:100%;display:flex;flex-direction:column;padding-bottom:74px}
.kopf{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--hintergrund) 88%,transparent);backdrop-filter:blur(18px);
  border-bottom:.5px solid var(--trenn)}
.kopfzeile{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 4px}
.kopfzeile h1{font-size:32px;font-weight:700;letter-spacing:-.8px;margin:0}
.rund{width:34px;height:34px;border-radius:50%;background:var(--gruppe);color:var(--blau);font-size:17px;display:flex;align-items:center;justify-content:center}
.filter{display:flex;gap:8px;overflow-x:auto;padding:6px 16px 10px;scrollbar-width:none}
.filter::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;padding:6px 14px;border-radius:16px;background:var(--gruppe);color:var(--text);font-size:14px}
.chip.aktiv{background:var(--blau);color:#fff}
.punkt{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}

/* ── Liste ── */
.liste{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.zeile-mail{display:flex;gap:12px;padding:11px 16px;border-bottom:.5px solid var(--trenn);align-items:flex-start;position:relative}
.zeile-mail:active{background:var(--gruppe)}
.avatar{width:40px;height:40px;border-radius:50%;flex:0 0 40px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:16px}
.mitte{flex:1;min-width:0}
.obere{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.absender{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zeit{font-size:14px;color:var(--leise);white-space:nowrap}
.betreff{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.vorschau{font-size:14px;color:var(--leise);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ungelesen .betreff{font-weight:600}
.ungelesen::before{content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--blau)}
.ungelesen{padding-left:22px}
.anhang{color:var(--leise);font-size:13px;margin-left:6px}
.leer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--leise);gap:4px}
.leer-icon{font-size:44px;opacity:.35}

/* ── Tabs ── */
.tabs{position:fixed;bottom:0;left:0;right:0;height:74px;padding-bottom:env(safe-area-inset-bottom);
  display:flex;background:color-mix(in srgb,var(--hintergrund) 92%,transparent);backdrop-filter:blur(18px);
  border-top:.5px solid var(--trenn);z-index:10}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:var(--leise);position:relative}
.tab span{font-size:22px;line-height:1}
.tab.aktiv{color:var(--blau)}
#zaehler{position:absolute;top:6px;right:50%;transform:translateX(26px);background:var(--rot);color:#fff;font-style:normal;
  font-size:11px;border-radius:9px;padding:1px 6px;display:none}
#zaehler.an{display:block}

/* ── Detail ── */
.detail{position:fixed;inset:0;background:var(--hintergrund);z-index:20;display:flex;flex-direction:column;animation:rein .22s ease}
@keyframes rein{from{transform:translateX(18px);opacity:.4}to{transform:none;opacity:1}}
.detailkopf{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:.5px solid var(--trenn);position:sticky;top:0;background:var(--hintergrund);z-index:2}
.zurueck{color:var(--blau);font-size:17px;padding:8px}
.detailaktionen{display:flex;gap:8px}
.mail{padding:16px;overflow-y:auto}
.mail h2{font-size:21px;margin:0 0 16px;line-height:1.3}
.absender{display:flex;gap:10px;align-items:center;margin-bottom:18px}
.absender time{margin-left:auto;font-size:13px;color:var(--leise)}
.inhalt{white-space:pre-wrap;font-size:16px;line-height:1.5}

/* ── Konto ── */
.blatt{position:fixed;inset:0;background:var(--gruppe);z-index:25;overflow-y:auto}
.blattinhalt{padding:20px;max-width:520px;margin:0 auto}
.blattinhalt h2{font-size:28px;margin:0 0 2px;letter-spacing:-.5px}
.zeile{display:flex;justify-content:space-between;align-items:center;background:var(--karte);border-radius:12px;padding:14px 16px;margin-top:10px}
.zeile span{font-size:16px}
.blau{color:var(--blau);font-weight:500}
#pw-formular{display:flex;flex-direction:column;gap:8px;margin-top:10px}
#pw-formular input{background:var(--karte);border:1px solid var(--trenn);border-radius:12px;padding:13px;font-size:16px;color:var(--text)}
#pw-formular button{background:var(--blau);color:#fff;border-radius:12px;padding:12px;font-weight:600;margin-top:4px}

.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.82);color:#fff;
  padding:10px 18px;border-radius:20px;font-size:14px;z-index:40}

@media (min-width:760px){
  .app{max-width:560px;margin:0 auto;border-left:.5px solid var(--trenn);border-right:.5px solid var(--trenn)}
  .tabs{max-width:560px;left:50%;transform:translateX(-50%)}
  .detail{max-width:760px;left:50%;transform:translateX(-50%);box-shadow:0 0 40px rgba(0,0,0,.2)}
}

/* ── Benutzer-Menü (iOS-Einstellungen-Look) ── */
.kopfknopfreihe{display:flex;gap:8px;align-items:center}
.rund-benutzer{background:var(--blau);color:#fff;font-weight:600;font-size:15px}
.benutzerkopf{display:flex;gap:14px;align-items:center;margin:6px 0 22px}
.avatar.gross{width:64px;height:64px;flex:0 0 64px;font-size:24px}
.benutzerkopf h2{font-size:24px;margin:0;letter-spacing:-.4px}
.gruppe{background:var(--karte);border-radius:12px;overflow:hidden;margin-bottom:22px}
.gruppe .zeile{margin:0;border-radius:0;border-bottom:.5px solid var(--trenn);background:transparent}
.gruppe .zeile:last-child{border-bottom:none}
.gruppe .zeile:active{background:var(--gruppe)}
.zeile .pfeil{color:var(--leise);font-size:20px}
.abmelden-zeile{justify-content:center;color:var(--rot);font-weight:500}
.abmelden-zeile span{color:var(--rot)}
#pw-formular{padding:12px 16px 16px;margin:0}
.fussnote{text-align:center;font-size:13px;margin-top:26px}

/* ── Ziehen zum Aktualisieren (wie iOS) ── */
.ziehbereich{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
.ziehspinner{position:absolute;top:0;left:0;right:0;height:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;color:var(--leise);font-size:13px;gap:8px;transition:height .12s ease}
.ziehspinner.an{height:56px}
.ring{width:20px;height:20px;border:2px solid var(--trenn);border-top-color:var(--leise);border-radius:50%;display:inline-block}
.ziehspinner.laedt .ring{animation:dreh .8s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

/* ── Suche ── */
.suchfeld{display:flex;gap:8px;align-items:center;padding:4px 16px 8px}
.suchfeld input{flex:1;background:var(--gruppe);border:none;border-radius:10px;padding:9px 12px;font-size:16px;color:var(--text)}
.suchfeld input:focus{outline:none}

/* ── Verfassen ── */
.feld{display:flex;align-items:center;gap:10px;border-bottom:.5px solid var(--trenn);padding:10px 2px}
.feld label{color:var(--leise);width:64px;font-size:15px}
.feld input{flex:1;border:none;background:transparent;font-size:16px;color:var(--text);padding:4px 0}
.feld input:focus{outline:none}
.schreibfeld{margin-top:12px;width:100%;min-height:260px;border:none;background:var(--karte);border-radius:12px;padding:14px;
  font-size:16px;line-height:1.5;color:var(--text);font-family:inherit;resize:vertical}
.schreibfeld:focus{outline:1px solid var(--blau)}

/* ── Anhänge ── */
.anhangliste{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.anhangkarte{display:flex;gap:8px;align-items:center;background:var(--gruppe);border-radius:12px;padding:9px 12px;text-align:left;color:var(--text)}
.anhangkarte small{color:var(--leise);font-size:12px}
.anhangicon{font-size:20px}
.htmlmail{width:100%;border:none;background:#fff;border-radius:12px;min-height:120px;display:block}

/* ── Wischen ── */
.zeile-wrap{position:relative;overflow:hidden}
.zeile-wrap>.zeile-mail{position:relative;background:var(--hintergrund);z-index:2;transition:transform .18s ease;will-change:transform}
.wisch-links{position:absolute;right:0;top:0;bottom:0;display:flex;z-index:1}
.wisch-knopf{color:#fff;font-size:13px;font-weight:600;padding:0 16px;border-radius:0}
.wisch-knopf.archiv{background:#5B8DEF}
.wisch-knopf.loeschen{background:var(--rot)}
#sig-formular{padding:12px 16px 16px;margin:0}
#sig-text{width:100%;border:1px solid var(--trenn);border-radius:10px;padding:10px;font-family:inherit;font-size:15px;
  background:var(--gruppe);color:var(--text);resize:vertical}

/* Gummiband des Browsers beim Ziehen verhindern */
.liste, .ziehbereich { overscroll-behavior-y: contain; }
html, body { overscroll-behavior-y: none; }

/* ── Postfächer-Ansicht (wie iOS Mail) ── */
#zurueck-post{background:none;color:var(--blau);font-size:17px;padding:0 6px 0 0;margin-right:6px}
.postfachgruppe{margin:14px 16px 0;border-radius:12px;overflow:hidden}
.gruppenkopf{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--leise);
  padding:10px 14px 6px;display:flex;align-items:center;gap:6px}
.kdot{width:9px;height:9px;border-radius:50%;display:inline-block}
.postfachzeile{background:var(--karte);padding:12px 14px;display:flex;align-items:center;gap:10px;
  border-bottom:.5px solid var(--trenn)}
.postfachzeile:last-child{border-bottom:none}
.postfachzeile:active{background:var(--gruppe)}
.pficon{width:22px;color:var(--blau);font-size:16px}
.pfname{flex:1;font-size:16px}
.pfzahl{color:var(--leise);font-size:15px}
.pfzahl .neu{color:var(--blau);font-style:normal;font-weight:600}
.pfeil{color:var(--leise);font-size:18px}
.postfachzeile.blass .pfname,.postfachzeile.blass .pficon{opacity:.45}
.vipstern{color:#F5A623;margin-right:4px;font-size:13px}
.frageblatt{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35)}
.fragekarte{background:var(--karte);border-radius:16px;padding:20px;width:min(90%,380px);box-shadow:0 10px 40px rgba(0,0,0,.3)}
.fragekarte h3{margin:0 0 12px;font-size:17px}
.fragekarte input{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--trenn);font-size:16px;
  background:var(--gruppe);color:var(--text)}
.frageknoepfe{display:flex;justify-content:flex-end;gap:14px;margin-top:14px}
.frageknoepfe .fett{font-weight:600}

/* ── iOS-Mail-Zeile ohne Absenderkreis ── */
.punktspalte{width:12px;flex:0 0 12px;display:flex;align-items:center;justify-content:center}
.ungelesen .punktspalte::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--blau);display:block}
.zeile-mail{padding:10px 14px 11px 8px;gap:8px;align-items:flex-start}
.zeile-mail.ungelesen{padding-left:8px}
.ungelesen::before{display:none}
.absender{font-size:16px;font-weight:400}
.ungelesen .absender{font-weight:600}
.betreff{font-size:15px;margin-top:1px}
.vorschau{font-size:14px;margin-top:1px;line-height:1.28}

/* Datum im Mailkopf darf umbrechen statt abgeschnitten zu werden */
.absender time{white-space:normal;text-align:right;max-width:96px;line-height:1.2}
.htmlmail{min-height:60px;background:#fff}

/* Desktop-Zentrierung korrigieren: feste Panels mittig, ohne Verschiebung nach rechts */
@media (min-width:760px){
  .detail{left:0;right:0;margin:0 auto;transform:none;max-width:760px;border-left:.5px solid var(--trenn);border-right:.5px solid var(--trenn)}
  .tabs{left:0;right:0;margin:0 auto;transform:none;max-width:560px}
  .blatt{left:0;right:0;margin:0 auto;max-width:560px}
}
.absender.antippbar{cursor:pointer;border-radius:10px}
.absender.antippbar:active{background:var(--gruppe)}

/* ═══════════ iOS-Mail-Nachbau: Detail ═══════════ */
.detail{background:var(--hintergrund)}
.mailkopf{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:color-mix(in srgb,var(--hintergrund) 82%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.kreis{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(120,120,128,.18);color:var(--blau);font-size:18px;line-height:1;
  transition:transform .12s ease, background .12s ease}
.kreis:active{transform:scale(.94);background:rgba(120,120,128,.3)}
.kreis.gefüllt,.kreis.gefuellt{background:linear-gradient(160deg,#0A84FF,#0051D5);color:#fff;font-weight:600;font-size:15px}
.kreis .chev{font-size:22px;font-weight:500;margin-top:-2px}
.blaettern{display:flex;align-items:center;background:rgba(120,120,128,.18);border-radius:18px;height:36px;padding:0 2px}
.kreis.halb{width:36px;height:32px;background:transparent;font-size:16px;color:var(--blau)}
.blaettern .trenner{width:.5px;height:18px;background:rgba(120,120,128,.4)}
.fadenzeile{display:flex;align-items:center;justify-content:space-between;padding:0 16px 8px;font-size:13px;color:var(--leise)}
#zusammenfassen{font-size:13px;color:var(--blau)}
.mail{padding:0 0 104px;overflow-y:auto}
.absender{display:flex;gap:10px;align-items:flex-start;padding:6px 16px 12px}
.absenderbild{width:40px;height:40px;border-radius:10px;flex:0 0 40px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:17px;background:linear-gradient(160deg,#8E8E93,#636366)}
.absendertext{display:flex;flex-direction:column;min-width:0;flex:1}
.absendertext strong{font-size:17px;font-weight:600;line-height:1.2}
.absendertext span{font-size:14px;color:var(--leise);margin-top:1px}
.absender time{font-size:13px;color:var(--leise);white-space:nowrap;margin-left:8px}
.mail h2{font-size:23px;line-height:1.22;letter-spacing:-.4px;margin:0;padding:2px 16px 16px;font-weight:700}
.inhalt{background:#fff;border-radius:16px;margin:0 12px;padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.inhalt .htmlmail{border-radius:10px}
.anhangliste{padding:0 16px}
.werkzeugleiste{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;align-items:center;
  gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--hintergrund) 78%,transparent);
  backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);
  border-top:.5px solid rgba(120,120,128,.25);z-index:7}
.werkzeug{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;
  background:rgba(120,120,128,.16);color:var(--blau);transition:transform .12s ease}
.werkzeug:active{transform:scale(.92)}
.werkzeug.rot{color:var(--rot)}
@media (min-width:760px){
  .werkzeugleiste{max-width:760px;margin:0 auto}
}

/* Symbolfarben wie SF Symbols */
.werkzeug svg{display:block}
.werkzeug.rot svg{stroke:var(--rot)}
.kreis svg{display:block}
@media (max-width:420px){ .werkzeug{width:42px;height:42px} }
.werkzeug.gesetzt{background:var(--blau);color:#fff}
.werkzeug.gesetzt svg{stroke:#fff;fill:#fff}

/* Listen-Absender heißt jetzt .name (vorher Kollision mit dem Detail-.absender) */
.name{font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ungelesen .name{font-weight:600}
.obere{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.tab svg{display:block;margin-bottom:2px}
.tab span{display:none}
.textknopf{color:var(--blau);font-size:15px;padding:0 6px}
.zeile-mail{touch-action:pan-y}

/* ── Sammelleiste (Mehrfachauswahl) ── */
.sammelleiste{position:fixed;left:0;right:0;bottom:calc(74px + env(safe-area-inset-bottom));z-index:30;
  display:flex;gap:8px;align-items:center;padding:10px 14px;font-size:14px;flex-wrap:wrap;
  background:color-mix(in srgb,var(--hintergrund) 88%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid rgba(120,120,128,.25)}
.sammelleiste span{margin-right:auto;color:var(--leise)}
.sammelleiste button{background:rgba(120,120,128,.16);border-radius:12px;padding:8px 12px;font-size:14px;color:var(--blau)}
.sammelleiste button.rot{color:var(--rot)}
@media (min-width:760px){ .sammelleiste{max-width:560px;margin:0 auto} }

/* ── Kategorien, Threads, Auswahl-Häkchen ── */
.katfilter{padding-top:0}
.chip.klein{font-size:13px;padding:4px 11px}
.thread{color:var(--leise);font-size:13px}
.haken{width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(120,120,128,.5);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;flex:0 0 24px;align-self:center}
.haken.an{background:var(--blau);border-color:var(--blau)}
.sammelleiste{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sammelleiste::-webkit-scrollbar{display:none}
.sammelleiste button{white-space:nowrap}

/* ═══════════ Seitenmenü (Apple-Stil) ═══════════ */
.schleier{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:40;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:schleierEin .2s ease}
@keyframes schleierEin{from{opacity:0}to{opacity:1}}
.seitenmenue{position:fixed;top:0;bottom:0;left:0;width:290px;max-width:82vw;z-index:41;
  transform:translateX(-100%);transition:transform .34s cubic-bezier(.32,.72,0,1);
  background:color-mix(in srgb,var(--karte) 86%,transparent);
  backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);
  border-right:.5px solid rgba(120,120,128,.25);display:flex;flex-direction:column;
  padding:calc(18px + env(safe-area-inset-top)) 0 18px;box-shadow:4px 0 30px rgba(0,0,0,.12)}
.seitenmenue.offen{transform:translateX(0)}
.menuekopf{display:flex;gap:12px;align-items:center;padding:6px 18px 18px}
.logo.klein{width:42px;height:42px;border-radius:12px;font-size:22px;margin:0}
.menuekopf strong{display:block;font-size:17px}
.menuekopf span{font-size:12px}
.menuepunkte{display:flex;flex-direction:column;padding:0 10px;gap:2px;overflow-y:auto}
.menuepunkte button{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  font-size:16px;color:var(--text);text-align:left}
.menuepunkte button:active{background:rgba(120,120,128,.18)}
.menuepunkte button.aktiv{background:rgba(0,122,255,.14);color:var(--blau)}
.micon{width:22px;text-align:center;color:var(--blau)}
.menuefuss{margin-top:auto;padding:12px 18px 0;border-top:.5px solid rgba(120,120,128,.25)}
.menue-abmelden{color:var(--rot);font-size:16px;padding:12px 0;width:100%;text-align:left}
body.menue-offen{overflow:hidden}
.gutschein .gicon{width:40px;height:40px;flex:0 0 40px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;background:rgba(245,166,35,.18);font-size:19px}
.gcode{display:inline-block;background:rgba(0,122,255,.14);color:var(--blau);font-weight:600;
  border-radius:6px;padding:1px 6px;margin-right:6px;letter-spacing:.4px}
.gwert{color:var(--text);margin-right:6px;font-weight:500}
.gbis{color:var(--leise)}
.menue-stand{font-size:12px;color:var(--leise);margin:0 0 6px}

/* ═══ PWA-Fix: eigenes Scrollen statt Seiten-Scroll (iOS-Homescreen) ═══ */
html, body{height:100%;overflow:hidden;overscroll-behavior:none}
.app{height:100vh;height:100dvh;max-height:100dvh;overflow:hidden}
.ziehbereich{min-height:0}
.liste{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.detail{overscroll-behavior:contain}
.mail{overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ═══ Gutschein-Zustand und Kopieren ═══ */
.gcode{cursor:pointer;border-bottom:1px dashed rgba(0,122,255,.5)}
.statuspill{font-size:12px;padding:2px 8px;border-radius:999px;margin-left:6px;font-weight:600}
.statuspill.aktiv{background:rgba(52,199,89,.18);color:#1B8A3A}
.statuspill.abgelaufen{background:rgba(142,142,147,.2);color:var(--leise)}
.gfilter{display:flex;gap:8px;padding:0 16px 8px}
.gfilter button{font-size:13px;padding:5px 12px;border-radius:14px;background:var(--gruppe);color:var(--text)}
.gfilter button.aktiv{background:var(--blau);color:#fff}

/* ═══ iOS-Homescreen: Statusleiste und Home-Indikator freihalten ═══ */
.kopf{padding-top:calc(env(safe-area-inset-top, 0px) + 4px)}
.kopfzeile{padding-top:2px}
.tabs{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 2px);height:calc(74px + env(safe-area-inset-bottom, 0px))}
.app{padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px))}
.mailkopf{padding-top:calc(env(safe-area-inset-top, 0px) + 10px)}
.werkzeugleiste{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 10px)}
.seitenmenue{padding-top:calc(env(safe-area-inset-top, 0px) + 18px)}
.baustand{display:block;font-size:11px;font-weight:400;color:var(--leise);letter-spacing:0;margin-top:1px}