/* ═══════════════════════════════════════════════════════════════════════
   GPTGenie · Fenster und Pop-ups wie in iOS (Einstellungen, App Store)

   Wird direkt nach liquid.css geladen und gibt allen Fenstern dasselbe ruhige iOS-Aussehen:
   · feste, deckende Fläche (kein Glas, keine Unschärfe: das spart Rechenzeit beim Öffnen)
   · runde Knöpfe zum Schließen und Zurück, oben im Fenster
   · gruppierte Listen (weiße bzw. dunkelgraue Karten mit feinen Trennlinien)
   · Knöpfe als volle Pille in der Akzentfarbe, Zweit-Knopf hell getönt

   Farben nur über Variablen. Die Werte für den hellen Modus stehen in css/light.css.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ios-sheet: #1c1c1e;
  --ios-group: #2c2c2e;
  --ios-group-press: #3a3a3c;
  --ios-sep: rgba(84,84,88,0.55);
  --ios-label: #ffffff;
  --ios-label2: rgba(235,235,245,0.6);   /* accent-keep: iOS-Grau */
  --ios-label3: rgba(235,235,245,0.3);   /* accent-keep: iOS-Grau */
  --ios-fill: rgba(118,118,128,0.24);
  --ios-circle: #3a3a3c;
  --ios-seg-on: #636366;
  --ios-circle-ink: rgba(255,255,255,0.88);
  --ios-scrim: rgba(0,0,0,0.5);
  --ios-tint: rgb(var(--a-a855f7,168,85,247));
  --ios-tint-ink: rgb(var(--a-c084fc,192,132,252));
  --ios-tint-fill: rgba(var(--a-a855f7,168,85,247),0.2);
  --ios-red: #ff453a;
  --ios-red-fill: rgba(255,69,58,0.18);
  --ios-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(255,255,255,0.08);
  --ios-circle-shadow: 0 1px 2px rgba(0,0,0,0.25);
  --ios-radius: 34px;
  --ios-group-radius: 22px;
}

/* ── Hintergrund hinter Fenstern: nur abdunkeln ── */
.auth-overlay,
.account-settings-dialog,
.modern-dialog-overlay,
.feedback-overlay,
#news-popup-overlay,
.presets-overlay,
.background-selection-overlay,
.slider-warning-overlay,
#history-overlay,
#pme-addpage-backdrop,
#pme-delete-backdrop,
#pme-at-overlay,
.pme-help {
  background: var(--ios-scrim) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Die Fenster: feste Fläche, große Rundung, weicher Schatten ── */
.auth-dialog,
.account-settings-content,
.modern-dialog-content,
.sd-wrap,
.feedback-container,
#news-popup,
.presets-panel,
.background-selection-dialog,
.slider-warning-dialog,
#history-panel,
#pme-addpage-box,
#pme-delete-box,
#pme-at-box,
.pme-help-box,
.preset-rename-dialog {
  background: var(--ios-sheet) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: var(--ios-shadow) !important;
  color: var(--ios-label);
}
.auth-dialog,
.account-settings-content,
.modern-dialog-content,
.sd-wrap,
#news-popup,
.presets-panel,
.background-selection-dialog,
.slider-warning-dialog,
#pme-addpage-box,
#pme-delete-box,
#pme-at-box,
.pme-help-box,
.preset-rename-dialog { border-radius: var(--ios-radius) !important; }
@media (min-width: 600px) { .feedback-container { border-radius: var(--ios-radius) !important; } }

/* ── Überschriften und Texte ── */
.settings-header h3,
.auth-header h2,
.sd-title,
.bg-dialog-header h3,
.presets-title-row h3,
.fb-write-title,
.fb-reviews-title,
.slider-warning-title,
.gl-title {
  color: var(--ios-label) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.gl-text { color: var(--ios-label2); }

/* ── Schließen-Knopf: runder Knopf oben rechts ── */
.auth-close-btn,
.settings-header .close-button,
.sd-close,
.fb-top-close,
.presets-close-btn,
.bg-close-btn,
.news-popup-close,
.fb-close-btn,
.gl-close {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  color: var(--ios-circle-ink) !important;
  background: var(--ios-circle) !important;
  border: 0 !important;
  box-shadow: var(--ios-circle-shadow) !important;
}
.auth-close-btn:hover, .settings-header .close-button:hover, .sd-close:hover, .fb-top-close:hover,
.presets-close-btn:hover, .bg-close-btn:hover, .news-popup-close:hover, .fb-close-btn:hover, .gl-close:hover {
  background: var(--ios-group-press) !important;
  color: var(--ios-label) !important;
  transform: none;
}

/* ── Knöpfe: Hauptaktion als volle Pille, Zweitaktion hell getönt ── */
.auth-button-primary,
.action-button.purple,
.sd-close-btn,
.btn-submit,
.slider-btn-confirm,
.news-dismiss-btn,
.presets-save-new-btn,
.gl-btn-primary {
  background: var(--ios-tint) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 650 !important;
}
.auth-button-primary:hover:not(:disabled), .action-button.purple:hover, .sd-close-btn:hover, .btn-submit:hover:not(:disabled),
.slider-btn-confirm:hover, .news-dismiss-btn:hover, .presets-save-new-btn:hover:not(:disabled), .gl-btn-primary:hover:not(:disabled) {
  filter: brightness(1.08) !important;
  transform: none;
}
.auth-button-primary:disabled, .btn-submit:disabled, .presets-save-new-btn:disabled, .gl-btn-primary:disabled {
  opacity: .4 !important;
  filter: none !important;
}

.auth-button-secondary,
.action-button.cancel,
.btn-cancel,
.slider-btn-cancel,
.pme-modal-cancel-btn,
.gl-btn {
  background: var(--ios-tint-fill) !important;
  color: var(--ios-tint-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 650 !important;
}
.auth-button-secondary:hover, .action-button.cancel:hover, .btn-cancel:hover, .slider-btn-cancel:hover,
.pme-modal-cancel-btn:hover, .gl-btn:hover {
  background: var(--ios-tint-fill) !important;
  color: var(--ios-tint-ink) !important;
  filter: brightness(1.12);
  transform: none;
}

.action-button.danger,
.gl-btn-danger {
  background: var(--ios-red) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ── Eingabefelder: ruhige Felder ohne Rand ── */
.auth-input,
.styled-input,
.language-select,
#feedback-text,
.preset-rename-dialog input,
.verification-box,
#pme-at-input {
  background: var(--ios-group) !important;
  border: 1px solid transparent !important;
  color: var(--ios-label) !important;
  box-shadow: none !important;
}
.auth-input:focus, .styled-input:focus, .language-select:focus, #feedback-text:focus,
.preset-rename-dialog input:focus, .verification-box:focus, #pme-at-input:focus {
  background: var(--ios-group) !important;
  border-color: var(--ios-tint) !important;
  box-shadow: 0 0 0 3px var(--ios-tint-fill) !important;
}
.auth-input::placeholder, .styled-input::placeholder, #feedback-text::placeholder { color: var(--ios-label3) !important; }

/* ── Gruppierte Listen ── */
.gl-group {
  background: var(--ios-group);
  border: 0;
  border-radius: var(--ios-group-radius);
}
.gl-row { color: var(--ios-label); font-weight: 500; min-height: 52px; padding: 10px 16px; }
.gl-row + .gl-row::before { background: var(--ios-sep); height: 1px; transform: scaleY(.5); transform-origin: top; left: 56px; }
button.gl-row:hover { background: var(--ios-group-press); }
button.gl-row:active { background: var(--ios-group-press); }
.gl-row-label { color: var(--ios-label2); font-weight: 500; }
.gl-row-value { color: var(--ios-label); }
.gl-row-chev { color: var(--ios-label3); }
.gl-row.gl-destructive { color: var(--ios-red); }
.gl-well {
  background: var(--ios-group) !important;
  border: 0 !important;
  border-radius: var(--ios-group-radius) !important;
}
/* Abschnitts-Überschrift über einer Gruppe, wie „Meine Netzwerke“ */
.gl-caption {
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ios-label2);
}
.gl-code { background: var(--ios-fill); border: 0; color: var(--ios-label); }

/* ═══════════════════════════════════════════════════════════════════════
   Download-Fenster (pdf-generator.js, getFileNameFromUser)
   Zwei Seiten im selben Fenster: Name + Format, dann die Format-Liste (schiebt von rechts herein)
   ═══════════════════════════════════════════════════════════════════════ */
.fn-dialog { width: calc(100% - 32px); max-width: 460px; position: relative; overflow: hidden; text-align: left; }
.fn-pages { position: relative; overflow: hidden; border-radius: inherit; }
.fn-pages.fn-anim { transition: height .32s cubic-bezier(.2,.8,.2,1); }
.fn-main, .fn-fmt { transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .22s ease; }
.fn-fmt { position: absolute; top: 0; left: 0; width: 100%; transform: translateX(100%); opacity: 0; visibility: hidden; }
.fn-pages.fn-on-fmt .fn-main { transform: translateX(-30%); opacity: 0; pointer-events: none; }
.fn-pages.fn-on-fmt .fn-fmt { transform: none; opacity: 1; visibility: visible; }
.fn-fmt.fn-leaving { visibility: visible; }

/* Kopfzeile: Titel und runde Knöpfe */
.fn-bar { position: relative; display: flex; align-items: center; min-height: 72px; padding: 18px 70px 10px 22px; }
.fn-bar.fn-center { justify-content: center; padding: 18px 70px 10px; }
.fn-bar-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ios-label); line-height: 1.2; }
.fn-center .fn-bar-title { font-size: 17px; font-weight: 650; }
.fn-circ {
  position: absolute; top: 18px; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: var(--ios-circle); color: var(--ios-circle-ink); border: 0; cursor: pointer;
  box-shadow: var(--ios-circle-shadow); font-family: inherit; -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, transform .15s ease;
}
.fn-circ:hover { background: var(--ios-group-press); }
.fn-circ:active { transform: scale(.92); }
.fn-circ:focus-visible { outline: 2px solid var(--ios-tint); outline-offset: 2px; }
.fn-circ svg { display: block; }
.fn-close { right: 18px; }
.fn-back { left: 18px; }

.fn-body { padding: 4px 18px 20px; }
.fn-sec { margin: 18px 0 7px 18px; color: var(--ios-label2); font-size: 13px; font-weight: 600; }
.fn-sec:first-child { margin-top: 4px; }
.fn-group { background: var(--ios-group); border-radius: var(--ios-group-radius); overflow: hidden; }
.fn-foot { color: var(--ios-label2); font-size: 13px; line-height: 1.4; margin: 7px 18px 0; text-align: left; }

/* Name-Feld als Zeile in der Gruppe */
.fn-name-row { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; cursor: text; }
.fn-name-row input {
  flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; outline: none; padding: 14px 0;
  color: var(--ios-label); font-size: 17px; font-family: inherit;
}
.fn-name-row input::placeholder { color: var(--ios-label3); }
.fn-ext { flex-shrink: 0; color: var(--ios-label2); font-size: 17px; }
.fn-name-row:focus-within { box-shadow: inset 0 0 0 2px var(--ios-tint); border-radius: var(--ios-group-radius); }

/* Listen-Zeilen */
.fn-row {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 8px 16px 8px 14px; background: transparent; border: 0; margin: 0; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--ios-label); -webkit-tap-highlight-color: transparent;
}
.fn-row + .fn-row::before { content: ''; position: absolute; top: 0; left: 58px; right: 0; height: 1px; transform: scaleY(.5);
  transform-origin: top; background: var(--ios-sep); }
.fn-row:hover { background: var(--ios-group-press); }
.fn-row:active { background: var(--ios-group-press); }
.fn-row:focus-visible { outline: 2px solid var(--ios-tint); outline-offset: -2px; border-radius: var(--ios-group-radius); }
.fn-tile { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; }
.fn-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fn-row-name { font-size: 17px; font-weight: 400; line-height: 1.25; }
.fn-row-ext { font-size: 13px; color: var(--ios-label2); line-height: 1.3; }
.fn-row-val { flex-shrink: 0; color: var(--ios-label2); font-size: 17px; }
.fn-chev { flex-shrink: 0; color: var(--ios-label3); }
.fn-check { flex-shrink: 0; color: var(--ios-tint-ink); opacity: 0; }
.fn-format-opt[aria-checked="true"] .fn-check { opacity: 1; }

/* Knöpfe unten */
.fn-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.fn-btn {
  width: 100%; min-height: 52px; padding: 14px 22px; border-radius: 100px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 650; line-height: 1.2; -webkit-tap-highlight-color: transparent;
  transition: filter .15s ease, transform .15s ease, opacity .15s ease;
}
.fn-btn:active:not(:disabled) { transform: scale(.98); }
.fn-btn:focus-visible { outline: 2px solid var(--ios-tint); outline-offset: 2px; }
.fn-btn-primary { background: var(--ios-tint); color: #fff; }
.fn-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.fn-btn-tinted { background: var(--ios-tint-fill); color: var(--ios-tint-ink); }
.fn-btn-tinted:hover { filter: brightness(1.12); }
.fn-btn-sub { display: block; font-size: 13px; font-weight: 500; opacity: .75; margin-top: 2px; overflow-wrap: anywhere; }

.fn-ios-hint { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--ios-group-radius); background: var(--ios-group);
  display: flex; gap: 10px; align-items: flex-start; color: var(--ios-label2); font-size: 13px; line-height: 1.45; }
.fn-ios-hint strong { display: block; color: var(--ios-label); margin-bottom: 2px; }
.fn-ios-hint svg { flex-shrink: 0; margin-top: 1px; color: #ff9f0a; }

@media (prefers-reduced-motion: reduce) { .fn-pages.fn-anim, .fn-main, .fn-fmt { transition: none; } }

/* Handy: als Blatt von unten */
@media (max-width: 560px) {
  .fn-overlay { align-items: flex-end !important; padding: 0 !important; }
  .fn-dialog { width: 100% !important; max-width: none !important; border-radius: 30px 30px 0 0 !important;
    max-height: 94vh; max-height: 94dvh; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
  .fn-bar { min-height: 66px; padding-top: 16px; }
  .fn-circ { top: 14px; }
  .fn-body { padding: 0 16px 16px; }
}

/* ── Umschalter (Segmente) in Fenstern, wie in iOS: graue Spur, helles Feld für die Auswahl ── */
.feedback-container .fb-tabs, .fb-top .fb-tabs, .background-selection-dialog .bgs-tabs {
  background: var(--ios-fill) !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* nur in Ruhe grau: beim Ziehen (.gl-lifted) bleibt das Liquid Glass aus glass26.css / glass-slider.js */
.feedback-container .fb-indicator:not(.gl-lifted), .background-selection-dialog .bgs-tabs-lens:not(.gl-lifted) {
  background: var(--ios-seg-on) !important;
  border: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.feedback-container .fb-tab, .feedback-container .fb-tab.active, .background-selection-dialog .bgs-tabs button {
  background: transparent !important;
  color: var(--ios-label) !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.background-selection-dialog .bgs-tabs .bgs-tabs-lens:not(.gl-lifted), .background-selection-dialog .bgs-tabs .bgs-tabs-lens.gl-js:not(.gl-lifted),
.feedback-container .fb-tabs .fb-indicator:not(.gl-lifted), .feedback-container .fb-tabs .fb-indicator.gl-js:not(.gl-lifted) {
  background: var(--ios-seg-on) !important; border: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.background-selection-dialog .bgs-tabs button.on { color: var(--ios-label) !important; }

/* Abfragen (showModernDialog): gleiche Knöpfe wie überall in Fenstern */
.modern-dialog-content .modern-dialog-btn.gl-btn { background: var(--ios-tint-fill) !important; color: var(--ios-tint-ink) !important; border: 0 !important; box-shadow: none !important; }
.modern-dialog-content .modern-dialog-btn.gl-btn-primary { background: var(--ios-tint) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
.modern-dialog-content .modern-dialog-btn.gl-btn-danger { background: var(--ios-red) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
.modern-dialog-content .modern-dialog-btn { min-height: 48px; font-size: 16px !important; }
.background-selection-dialog .bgs-btn-secondary, .preset-rename-dialog .preset-rename-cancel {
  background: var(--ios-tint-fill) !important; color: var(--ios-tint-ink) !important; border: 0 !important; box-shadow: none !important;
}
.background-selection-dialog .bgs-footer { border-top-color: var(--ios-sep); }

/* Einstellungen: Abmelden als getönte Pille, Auswahl-Knöpfe (Sprache, Leistungsmodus) als graue Kapsel */
.account-settings-content .gl-logout, .account-settings-content .gl-logout:hover {
  background: var(--ios-group) !important; color: var(--ios-red) !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: var(--ios-group-radius) !important; min-height: 52px;
}
.account-settings-content .gl-dd-btn, .account-settings-content .gl-dd-btn:hover, .account-settings-content .gl-dd-btn.gl-dd-active {
  background: var(--ios-fill) !important; border: 0 !important; box-shadow: none !important; color: var(--ios-label) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:is(.sd-wrap, .modern-dialog-content) :is(.gl-btn, .gl-btn-primary, .sd-close-btn) { border: 0 !important; box-shadow: none !important; }

/* Das Glas-Licht für Knöpfe (liquid.css, sehr genaue Auswahl mit vielen :not) gilt nicht in Fenstern. Die #id in der
   Liste und die beiden :not(#…) machen diese Regel stärker als die dortige (die durch :not(#presets-button) ein #id-Gewicht hat). */
:is(.auth-dialog, .account-settings-content, .modern-dialog-content, .sd-wrap, .feedback-container, #news-popup, .presets-panel,
    .background-selection-dialog, .slider-warning-dialog, #history-panel, #pme-addpage-box, #pme-delete-box, #pme-at-box,
    .pme-help-box, .preset-rename-dialog, #cookie-banner)
  :is(.gl-btn, .gl-btn-primary, .gl-btn-danger, .gl-dd-btn, .auth-button-secondary, .auth-button-primary, .action-button, .btn-cancel,
      .btn-submit, .slider-btn-cancel, .slider-btn-confirm, .preset-rename-cancel, .preset-rename-confirm, .presets-save-new-btn,
      .bgs-btn-secondary, .pme-modal-cancel-btn, .sd-close-btn, .news-dismiss-btn, .cb-btn, .modern-dialog-btn):not(#_ios):not(#_ios2) {
  box-shadow: none !important;
  border-color: transparent !important;
}
:is(.auth-dialog, .account-settings-content, .modern-dialog-content, .sd-wrap, .feedback-container, #news-popup, .presets-panel,
    .background-selection-dialog, .slider-warning-dialog, #history-panel, #pme-addpage-box, #pme-delete-box, #pme-at-box,
    .pme-help-box, .preset-rename-dialog)
  :is(.auth-close-btn, .settings-header .close-button, .sd-close, .fb-top-close, .presets-close-btn, .bg-close-btn,
      .news-popup-close, .fb-close-btn, .gl-close):not(#_ios):not(#_ios2) {
  box-shadow: var(--ios-circle-shadow) !important;
  border-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Knöpfe in Fenstern wie im App Store (Marflux' Bilder „App Updates“ und „Guthaben“)
   · große Knöpfe: 50 px hohe Pille, 17 px halbfett, volle Akzentfarbe oder hell getönt mit Akzent-Schrift
   · kleine Knöpfe in Zeilen (wie „Update“): graue Pille, Akzent-Schrift fett
   · Schließen/Zurück: 40 px Kreis, hell weiß mit weichem Schatten, dunkel grau
   Gilt dunkel und hell (Farben über die --ios-…-Variablen, helle Werte in light.css).
   ═══════════════════════════════════════════════════════════════════════ */
:root { --ios-pill-fill: rgba(118,118,128,0.24); }

:is(.auth-dialog, .account-settings-content, .modern-dialog-content, .sd-wrap, .feedback-container, #news-popup, .presets-panel,
    .background-selection-dialog, .slider-warning-dialog, #pme-addpage-box, #pme-delete-box, #pme-at-box, .preset-rename-dialog)
  :is(.modern-dialog-btn, .auth-button, .action-button, .btn-submit, .btn-cancel, .slider-btn-confirm, .slider-btn-cancel,
      .bgs-apply, .bgs-btn-secondary, .sd-close-btn, .news-dismiss-btn, .preset-rename-cancel, .preset-rename-confirm,
      .pme-modal-cancel-btn, .gl-btn-block, .gl-logout):not(#_ios):not(#_ios2) {
  min-height: 50px;
  padding: 13px 22px !important;
  border-radius: 100px !important;
  border: 0 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  line-height: 1.2 !important;
}
/* Abfragen: Knöpfe nebeneinander, gleich breit, wie die Betrag-Knöpfe im Bild */
.modern-dialog-content .modern-dialog-btn { flex: 1 1 0 !important; }
.modern-dialog-content > h3 { font-size: 21px !important; font-weight: 700 !important; letter-spacing: -0.01em; }

/* kleine Knöpfe in Zeilen und Kopfzeilen */
:is(.gg-fmt-apply, .presets-save-new-btn, .gl-btn-sm):not(#_ios) {
  background: var(--ios-pill-fill) !important;
  color: var(--ios-tint-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 7px 16px !important;
  min-height: 34px;
  border-radius: 100px !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.gg-fmt-row:hover .gg-fmt-apply, .presets-save-new-btn:hover { filter: brightness(1.08); }

/* Schließen / Zurück: 40 px Kreis */
:is(.auth-dialog, .account-settings-content, .modern-dialog-content, .sd-wrap, .feedback-container, #news-popup, .presets-panel,
    .background-selection-dialog, .slider-warning-dialog, .preset-rename-dialog)
  :is(.auth-close-btn, .settings-header .close-button, .sd-close, .fb-top-close, .presets-close-btn, .bg-close-btn,
      .news-popup-close, .fb-close-btn, .gl-close):not(#_ios):not(#_ios2):not(#_ios3) {
  width: 40px !important; height: 40px !important; min-width: 40px;
}

/* Tastatur-Fokus in Fenstern: ruhiger Ring in Akzentfarbe statt Doppelrand */
:is(.auth-dialog, .account-settings-content, .modern-dialog-content, .sd-wrap, .feedback-container, #news-popup, .presets-panel,
    .background-selection-dialog, .slider-warning-dialog, .preset-rename-dialog, .fn-dialog) :is(button, a):focus-visible {
  outline: 2.5px solid var(--ios-tint) !important;
  outline-offset: 2px !important;
}

/* Texte wie im App Store: Fließtext links, Abschnitts-Überschriften in Karten links und grau */
.modern-dialog-content .gl-text { text-align: left; font-size: 15px; color: var(--ios-label2); }
.modern-dialog-content .gl-well .gl-caption { text-align: left; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ios-label2); }

/* Feedback ohne Anmeldung: nur ein Reiter, dann ist es eine Überschrift statt eines Umschalters */
.feedback-container .fb-tabs.single { background: transparent !important; box-shadow: none !important; pointer-events: none; }
.feedback-container .fb-tabs.single .fb-indicator { display: none !important; }
.feedback-container .fb-tabs.single .fb-tab { justify-content: flex-start !important; font-size: 20px !important; font-weight: 700 !important; padding-left: 4px !important; }
.feedback-container .fb-tabs.single .fb-tab svg { display: none; }

/* Hintergrund-Fenster: Überschrift und Knöpfe in Fenster-Größe */
.background-selection-dialog .bg-dialog-header h3 { font-size: 20px !important; }
.background-selection-dialog .bgs-footer { gap: 12px; }
.background-selection-dialog .bgs-footer > button { min-width: 140px; }
@media (max-width: 560px) { .background-selection-dialog .bgs-footer > button { flex: 1 1 0; min-width: 0; } }

/* Geräte ohne Unschärfe (backdrop-detect.js setzt html.no-backdrop): dieselbe feste iOS-Fläche wie überall,
   sonst würde der alte lila Ersatz aus backdrop-fallback.css darüber liegen */
html.no-backdrop :is(.account-settings-dialog, #news-popup-overlay, .feedback-overlay, .background-selection-overlay,
  .auth-overlay, .modern-dialog-overlay, .slider-warning-overlay) { background: var(--ios-scrim) !important; }
html.no-backdrop :is(#news-popup, .account-settings-content, .feedback-container, .background-selection-dialog,
  #pme-addpage-box, #pme-delete-box) { background: var(--ios-sheet) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Die ganze Seite wie eine iOS-App (Einstellungen, App Store): ruhige, feste Flächen statt Glas und Leuchten.
   · Hintergrund: dunkel schwarz, hell iOS-Grau
   · Karten (Schritte 1–3, Ratgeber, FAQ …): dunkel #1c1c1e, hell weiß, große Rundung, kein Rand, kein Schatten
   · Flächen in Karten (Buchstaben-Raster, Zeichenfeld, Textfeld, Einstellungs-Gruppen): eine Stufe heller/grauer
   · Knöpfe: Hauptaktion volle Akzent-Pille, Nebenaktion graue Pille mit Akzent-Schrift (wie „Update“ im App Store),
     Reiter/Chips graue Pille mit normaler Schrift. Glas bleibt nur in der Navbar (wie die iOS-Tab-Leiste).
   Helle Werte der Variablen in css/light.css.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --ios-page: #000000;
  --ios-card: #1c1c1e;
  --ios-inner: #2c2c2e;
  --ios-inner-press: #3a3a3c;
}
html body#gg-tabnav-page { background: var(--ios-page) !important; }
html body#gg-tabnav-page::before { background: var(--ios-page) !important; }
html body#gg-tabnav-page::after { display: none !important; }

/* Karten */
:is(#app-section, #pdf-section, #settings-section, .faq-list, .how-step, .guide-card, .stat-item, .feature-pill):not(#_ios) {
  background: var(--ios-card) !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:is(#app-section, #pdf-section, #settings-section):not(#_ios) { border-radius: 26px !important; }
.how-step, .guide-card { border-radius: 22px !important; }

/* Flächen in Karten */
:is(.lp-shell, #app-section .canvas-section, .settings-group, .settings-preview, .fs-cta, #userText, .pdf-preview-section .pdf-preview,
    #pdf-section .pdf-container > div:last-child):not(#_ios) {
  background: var(--ios-inner) !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
#userText:focus { box-shadow: 0 0 0 2px var(--ios-tint) !important; }
/* Fast Scan: Hinweiskarte wie eine iOS-Zeile mit farbigem Symbol */
.fs-cta .fs-cta-icon { background: var(--ios-tint) !important; box-shadow: none !important; border: 0 !important; }

/* Schritt-Nummer: volle Akzentfarbe */
.gg-step-num, .how-num { background: var(--ios-tint) !important; color: #fff !important; box-shadow: none !important; border: 0 !important; text-shadow: none !important; }

/* Hauptaktionen */
:is(.cta-button.primary, .pdf-btn-generate, .canvas-btn-save, .fast-scan-btn, #presets-button):not(#_a):not(#_b):not(#_c) {
  background: var(--ios-tint) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  font-weight: 650 !important;
}
/* Nebenaktionen: graue Pille, Akzent-Schrift */
:is(.cta-button.secondary, .pdf-btn:not(.pdf-btn-generate), .canvas-btn:not(.canvas-btn-save):not(.canvas-btn-clear), .guide-all, .redirect-button,
    .settings-btn-item:not(#presets-button)):not(#_a):not(#_b):not(#_c) {
  background: var(--ios-pill-fill) !important;
  color: var(--ios-tint-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.canvas-btn.canvas-btn-clear:not(#_a):not(#_b):not(#_c) {
  background: var(--ios-red-fill) !important; color: var(--ios-red) !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
/* Chips und Auswahl-Knöpfe: graue Pille, normale Schrift */
:is(.gg-chip, .btn-clear-text, .lp-lang-btn, .page-nav-btn, .settings-preview-zoom):not(#_a):not(#_b):not(#_c) {
  background: var(--ios-pill-fill) !important;
  color: var(--ios-label) !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:is(.pdf-btn, .canvas-btn, .gg-chip, .btn-clear-text, .settings-btn-item, .cta-button):disabled { opacity: .4 !important; }

/* Buchstaben-Tasten: wie Tasten der iOS-Tastatur, gewählte in Akzentfarbe */
.lp-pill:not(#_a):not(#_b) {
  background: var(--ios-card) !important; color: var(--ios-label) !important;
  border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.lp-pill.lp-selected:not(#_a):not(#_b) { background: var(--ios-tint) !important; color: #fff !important; }
.lp-preview { background: var(--ios-card) !important; border: 0 !important; box-shadow: none !important; }
.lp-preview-letter { text-shadow: none !important; }

/* Umschalter-Leisten auf der Seite (Buchstaben-Reiter): graue Spur, Auswahl in Kartenfarbe (in Ruhe) */
.lp-tabs:not(#_a) { background: var(--ios-fill) !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.lp-tabs .lp-tab-indicator:not(.gl-lifted) { background: var(--ios-seg-on) !important; border: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important; }
.lp-tab { color: var(--ios-label) !important; text-shadow: none !important; }

/* Hero: ruhige Pillen, Text ohne Leuchten */
.hero-badge { background: var(--ios-pill-fill) !important; border: 0 !important; box-shadow: none !important; color: var(--ios-tint-ink) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Ausklapp-Menüs wie in iOS (Marflux' Video: Sortieren-Menü in der Dateien-App)
   · feste, helle bzw. dunkelgraue Fläche, große Rundung, weicher Schatten, kein Glas
   · Auswahl nur mit Häkchen links (Akzentfarbe), kein farbiger Kasten
   · Antippen: Zeile kurz grau hinterlegt
   Das Aufziehen aus dem Knopf (js/dropdown-glass.js) bleibt.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --ios-menu: #2c2c2e; --ios-menu-press: rgba(255,255,255,0.1); --ios-menu-sep: rgba(84,84,88,0.6); }
:is(.gl-dd-pop, .lp-lang-pop):not(#_a):not(#_b) {
  background: var(--ios-menu) !important;
  border: 0 !important;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.gl-dd-pop .gl-dd-head { color: var(--ios-label2); font-size: 13px; font-weight: 600; letter-spacing: 0; text-align: left; padding: 8px 14px 6px; }
.gl-dd-pop .gl-dd-lens { display: none !important; }
.gl-dd-pop .gl-dd-item { color: var(--ios-label) !important; border-radius: 12px; padding: 11px 14px 11px 10px; font-size: 17px; }
.gl-dd-pop .gl-dd-item:hover, .gl-dd-pop .gl-dd-item.gl-dd-press { background: var(--ios-menu-press); transform: none; }
.gl-dd-pop .gl-dd-label, .gl-dd-pop .gl-dd-item.gl-dd-on .gl-dd-label { font-weight: 400; }
.gl-dd-pop .gl-dd-sub { color: var(--ios-label2); font-size: 13px; }
.gl-dd-pop .gl-dd-check { color: var(--ios-label); }
.gl-dd-pop .gl-dd-tag, .gl-dd-pop .gl-dd-item.gl-dd-on .gl-dd-tag { background: var(--ios-fill); border: 0; color: var(--ios-label2); }

/* Sprachliste im Buchstaben-Raster */
.lp-lang-pop .lp-lang-search-wrap:not(#_a) { background: var(--ios-fill) !important; border: 0 !important; box-shadow: none !important; border-radius: 12px !important; }
.lp-lang-pop .lp-lang-search-wrap:focus-within { box-shadow: 0 0 0 2px var(--ios-tint) !important; }
.lp-lang-pop .lp-lang-group { color: var(--ios-label2) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  border-top: 6px solid var(--ios-menu-sep); margin: 4px -6px 0; padding: 12px 16px 5px !important; }
.lp-lang-pop .lp-lang-group:first-child { border-top: 0; margin-top: 0; }
.lp-lang-pop .lp-lang-item:not(#_a) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--ios-label) !important; border-radius: 12px; }
.lp-lang-pop .lp-lang-item:hover { background: var(--ios-menu-press) !important; }
.lp-lang-pop .lp-lang-item.active .lp-li-name::before { content: '✓'; color: var(--ios-tint-ink); font-weight: 700; margin-right: 8px; }
.lp-lang-pop .lp-li-name { font-weight: 500 !important; font-size: 16px !important; }
.lp-lang-pop .lp-li-sub, .lp-lang-pop .lp-li-sample { color: var(--ios-label2) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Antippen wie in iOS (Marflux' Videos: „Update“ im App Store, Zeilen in den Einstellungen)
   · Pillen-Knöpfe werden beim Drücken kurz dunkler/blasser statt zu hüpfen
   · Listen-Zeilen bekommen eine graue Fläche
   ═══════════════════════════════════════════════════════════════════════ */
:is(.fn-btn, .modern-dialog-btn, .gg-fmt-apply, .presets-save-new-btn, .pdf-btn, .canvas-btn, .gg-chip, .cta-button, .settings-btn-item, .fast-scan-btn, .auth-button, .bgs-apply, .bgs-btn-secondary):active:not(:disabled) {
  filter: brightness(0.82) !important;
  transition: filter 0s !important;
}
html[data-theme="light"] :is(.fn-btn, .modern-dialog-btn, .gg-fmt-apply, .presets-save-new-btn, .pdf-btn, .canvas-btn, .gg-chip, .cta-button, .settings-btn-item, .fast-scan-btn, .auth-button, .bgs-apply, .bgs-btn-secondary):active:not(:disabled) {
  filter: brightness(0.9) !important;
}
:is(.gl-row, .fn-row):active { background: var(--ios-group-press) !important; transition: background 0s !important; }

/* ═══════════════════════════════════════════════════════════════════════
   iOS-Feinschliff der Startseite (Marflux' Bilder: Einstellungen Wi-Fi/Allgemein, Apple-Account)
   1. Systemschrift (auf iPhone/iPad/Mac SF Pro, auf Android Roboto, auf Windows Segoe UI). Das Logo bleibt in der Markenschrift.
   2. Flacher Aufbau: die Schritte 1–3 sind keine Karte mehr, ihre Gruppen liegen direkt auf dem Grund (wie iOS-Listen).
   3. Schritt-Kopf wie der Kopf einer Einstellungs-Seite: farbige Kachel, großer fetter Titel, grauer Text.
   4. Gruppen-Überschriften grau und in normaler Schreibweise, Werte als graue Schrift statt lila Pillen.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
html body#gg-tabnav-page, html body#gg-tabnav-page :is(button, input, textarea, select, h1, h2, h3, h4, h5, p, a, span, div, label, li) {
  font-family: var(--ios-font);
}
html body#gg-tabnav-page :is(.nav-logo, .nav-logo *, .ls-wordmark, .ls-wordmark *) { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', var(--ios-font) !important; }
html body#gg-tabnav-page code, html body#gg-tabnav-page .gl-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body#gg-tabnav-page { -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }

/* 2. Schritte ohne äußere Karte */
:is(#app-section, #pdf-section, #settings-section):not(#_ios):not(#_b) {
  background: transparent !important;
  padding: 8px 0 4px !important;
  border-radius: 0 !important;
}
/* die Flächen darin bekommen jetzt die Karten-Farbe (eine Stufe über dem Grund) */
:is(.lp-shell, #app-section .canvas-section, .settings-group, .settings-preview, .fs-cta, #userText,
    #pdf-section .pdf-container > div:last-child):not(#_ios):not(#_b) {
  background: var(--ios-card) !important;
  border-radius: 22px !important;
}
/* was vorher in diesen Flächen lag, eine Stufe darüber */
:is(.lp-preview, #saved-letters-container, .pdf-preview-section .pdf-preview):not(#_a):not(#_b),
#app-section .canvas-side > div:not(.canvas-buttons):not(.canvas-info) {
  background: var(--ios-inner) !important;
}
.lp-pill:not(.lp-selected):not(#_a):not(#_b) { background: var(--ios-inner) !important; }
.lp-pill.lp-selected:not(#_a):not(#_b) { background: var(--ios-tint) !important; }

/* 3. Schritt-Kopf als iOS-Kopfkarte (wie „WLAN“ oder „Allgemein“ in den iPad-Einstellungen, Bilder von Marflux):
   eigene Karte mit großem App-Symbol statt der lila Zahl, darüber klein „Schritt 1“, dann Titel und grauer Text.
   Knöpfe (Format, Verlauf, Einklappen) oben rechts wie „Bearbeiten“ in iOS. */
.gg-step-head:not(#_a) {
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon . tools" "text text text";
  align-items: start; gap: 14px 12px !important; margin: 0 0 14px !important; padding: 20px 22px 22px;
  background: var(--ios-card); border-radius: 26px;
}
.gg-step-head > .gg-step-num { grid-area: icon; }
.gg-step-head > .gg-step-text { grid-area: text; }
.gg-step-head > :is(.gg-step-tools, .gg-hw-toggle) { grid-area: tools; justify-self: end; align-self: start; }
.gg-step-num:not(#_a) {
  position: relative; width: 60px !important; height: 60px !important; border-radius: 14px !important;
  font-size: 0 !important; color: transparent !important; border: 0 !important; text-shadow: none !important;
  background: var(--gg-step-bg) !important;
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.18), 0 4px 12px -6px rgba(0,0,0,0.45) !important;
}
.gg-step-num:not(#_a)::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; background: #fff;
  -webkit-mask: var(--gg-step-ic) center / contain no-repeat; mask: var(--gg-step-ic) center / contain no-repeat;
}
/* Farben und Symbole wie die iOS-App-Symbole: Stift orange, Text blau, Einstellungen grau */
#app-section .gg-step-num { --gg-step-bg: linear-gradient(180deg, #ffb340, #ff8a00);   /* accent-keep: iOS-Orange */
  --gg-step-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4z'/%3E%3Cpath d='M14.5 5.5l3 3'/%3E%3Cpath d='M4 22c3-1.5 6 1 9-0.5s4-2 7-1' stroke-width='1.8'/%3E%3C/svg%3E"); }
#pdf-section .gg-step-num { --gg-step-bg: linear-gradient(180deg, #3ea2ff, #0a6cff);   /* accent-keep: iOS-Blau */
  --gg-step-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M8.5 13c1.2-1.4 2.2-1.4 3 0s1.8 1.4 3 0M8.5 17h5'/%3E%3C/svg%3E"); }
#settings-section .gg-step-num { --gg-step-bg: linear-gradient(180deg, #a2a2a8, #6e6e75);   /* accent-keep: iOS-Grau */
  --gg-step-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E"); }
.gg-step-text h2, .gg-step-text h3 { font-size: 30px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--ios-label) !important; }
.gg-step-text h2::before, .gg-step-text h3::before {
  display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ios-label2);
}
#app-section .gg-step-text h2::before { content: 'Schritt 1 von 3'; }
#pdf-section .gg-step-text h2::before { content: 'Schritt 2 von 3'; }
#settings-section .gg-step-text h3::before { content: 'Schritt 3 von 3'; }
html[lang="en"] #app-section .gg-step-text h2::before { content: 'Step 1 of 3'; }
html[lang="en"] #pdf-section .gg-step-text h2::before { content: 'Step 2 of 3'; }
html[lang="en"] #settings-section .gg-step-text h3::before { content: 'Step 3 of 3'; }
.gg-step-text p { font-size: 16px !important; color: var(--ios-label2) !important; margin-top: 6px !important; line-height: 1.4 !important; }
/* Knöpfe im Kopf eine Stufe heller als die Karte */
.gg-step-head :is(.gg-chip, .gg-hw-toggle):not(#_a):not(#_b):not(#_c):not(#_d) { background: var(--ios-inner) !important; }
/* Handschrift eingeklappt: Karte bleibt klickbar */
#app-section.gg-hw-collapsed .gg-step-head:not(#_a) { margin-bottom: 0 !important; }
@media (max-width: 600px) {
  .gg-step-head:not(#_a) { padding: 16px 16px 18px; border-radius: 22px; gap: 12px 10px !important; }
  .gg-step-num:not(#_a) { width: 52px !important; height: 52px !important; border-radius: 12px !important; }
  .gg-step-num:not(#_a)::after { width: 30px; height: 30px; }
  .gg-step-text h2, .gg-step-text h3 { font-size: 26px !important; }
  .gg-step-text p { font-size: 15px !important; }
  /* zwei Knöpfe (Format, Verlauf) neben dem Symbol kompakt */
  .gg-step-head .gg-step-tools { gap: 6px !important; }
}

/* 4. Überschriften und Werte */
:is(.settings-group-title, .lp-progress-label, #saved-letters-container h2, .canvas-header-label, .pme-sec-title):not(#_a) {
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 15px !important; font-weight: 600 !important; color: var(--ios-label2) !important;
}
.slider-value:not(#_a) {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: var(--ios-label2) !important; font-size: 16px !important; font-weight: 400 !important; padding: 2px 4px !important;
}
:is(.slider-label-text, .slider-container label):not(#_a) { font-size: 16px !important; color: var(--ios-label) !important; font-weight: 400 !important; }
.gg-fine-btn:not(#_a) { background: var(--ios-pill-fill) !important; border: 0 !important; box-shadow: none !important; color: var(--ios-label) !important; }

/* Zeichenfeld: ruhig, ohne Leuchtrahmen */
#app-section .canvas-wrapper:not(#_a) { box-shadow: none !important; border: 0 !important; }
#app-section .canvas-buttons:not(#_a) { background: transparent !important; box-shadow: none !important; border: 0 !important; }
#app-section .canvas-wrapper:not(#_a):not(#_b) { background: var(--ios-inner) !important; }
/* Regler-Knopf wie iOS: weiß mit weichem Schatten (hell sonst unsichtbar) */
html[data-theme="light"] input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0.5px 4px rgba(0,0,0,0.12), 0 6px 13px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.04) !important; background: #fff !important; }
html[data-theme="light"] input[type="range"]::-moz-range-thumb { box-shadow: 0 0.5px 4px rgba(0,0,0,0.12), 0 6px 13px rgba(0,0,0,0.12) !important; background: #fff !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Schließen-X wie in iOS (Symbol „xmark“): kräftiger, runder Strich genau in der Mitte des Kreises,
   statt des Schrift-Zeichens „ד (das war dünn, je nach Schrift schief und nicht mittig).
   ═══════════════════════════════════════════════════════════════════════ */
:is(.auth-close-btn, .settings-header .close-button, .sd-close, .fb-top-close, .presets-close-btn, .bg-close-btn,
    .news-popup-close, .fb-close-btn, .gl-close, .fn-close):not(#_x1):not(#_x2):not(#_x3) { display: inline-grid !important; }
/* .pme-sheet-close nur am Handy sichtbar (pdf-editor-v2.css), darum hier keine feste Anzeige */
.pme-sheet-close:not(#_x1):not(#_x2):not(#_x3) { place-content: center; }
:is(.auth-close-btn, .settings-header .close-button, .sd-close, .fb-top-close, .presets-close-btn, .bg-close-btn,
    .news-popup-close, .fb-close-btn, .gl-close, .fn-close, .pme-sheet-close):not(#_x1):not(#_x2):not(#_x3) {
  /* keine eigene position: einige X sind absolut oben rechts angeheftet (Download-Fenster, Anmelden), das bleibt so */
  place-items: center;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  border-radius: 50% !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), background-color .15s !important;
}
:is(.auth-close-btn, .settings-header .close-button, .sd-close, .fb-top-close, .presets-close-btn, .bg-close-btn,
    .news-popup-close, .fb-close-btn, .gl-close, .fn-close, .pme-sheet-close) > svg { display: none !important; }
:is(.auth-close-btn, .settings-header .close-button, .sd-close, .fb-top-close, .presets-close-btn, .bg-close-btn,
    .news-popup-close, .fb-close-btn, .gl-close, .fn-close, .pme-sheet-close)::before {
  content: '';
  width: 17px; height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13' stroke='black' stroke-width='2.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13' stroke='black' stroke-width='2.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.presets-close-btn::after { display: none !important; }
:is(.auth-close-btn, .settings-header .close-button, .sd-close, .fb-top-close, .presets-close-btn, .bg-close-btn,
    .news-popup-close, .fb-close-btn, .gl-close, .fn-close, .pme-sheet-close):not(#_x1):not(#_x2):not(#_x3):active {
  transform: scale(.88) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Meldungen oben rechts (js/app/toast.js) wie ein iOS-Hinweis:
   ruhige, fast deckende Fläche (hell weiß, dunkel grau), Schrift in Textfarbe, vorne ein kleines farbiges Symbol.
   Vorher: dunkler Verlauf mit Farbe, der im hellen Modus schwärzlich aussah.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --ios-toast: rgba(44,44,46,0.97); --ios-toast-shadow: 0 12px 34px -8px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.1); }
html[data-theme="light"] { --ios-toast: rgba(255,255,255,0.97); --ios-toast-shadow: 0 12px 34px -10px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(0,0,0,0.06); }
.toast-container .toast:is(.success, .error, .info):not(#_t1) {
  background: var(--ios-toast) !important;
  color: var(--ios-label) !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: var(--ios-toast-shadow) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  font-family: var(--ios-font, inherit);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 12px 12px 12px 14px;
  gap: 11px;
  justify-content: flex-start;
}
.toast-container .toast:not(#_t1) > span:first-child { flex: 1 1 auto; min-width: 0; text-align: left; }
.toast-container .toast:is(.success, .error, .info):not(#_t1)::before {
  content: '';
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--tt-c) var(--tt-i) center / 14px no-repeat;
}
.toast-container .toast.success:not(#_t1) { --tt-c: #34c759; --tt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.toast-container .toast.error:not(#_t1)   { --tt-c: #ff3b30; --tt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v7.5' stroke='white' stroke-width='3.2' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='12' cy='18' r='1.9' fill='white'/%3E%3C/svg%3E"); }
.toast-container .toast.info:not(#_t1)    { --tt-c: #0a84ff; --tt-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.5' r='1.9' fill='white'/%3E%3Cpath d='M12 11v7' stroke='white' stroke-width='3.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); }
.toast-container .toast .toast-close:not(#_t1) {
  position: relative; width: 26px; height: 26px; border: 0; font-size: 0;
  background: var(--ios-fill); color: var(--ios-label2);
}
.toast-container .toast .toast-close:not(#_t1)::before {
  content: ''; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13' stroke='black' stroke-width='3.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13' stroke='black' stroke-width='3.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.toast-container .toast .toast-action:not(#_t1) { background: var(--ios-fill); border: 0; color: var(--ios-tint-ink); }

/* Format-Fenster: Tabellen- und Mathe-Teil erst berechnen, wenn sie in Sicht kommen (spart beim Öffnen viel Zeit) */
#text-formatting-info-dialog :is(.gg-fmt-table, .gg-fmt-math) { content-visibility: auto; contain-intrinsic-size: auto 420px; }

/* ═══════════════════════════════════════════════════════════════════════
   Fast Scan im iOS-Stil (Marflux: „update das Fast-Scan-Popup, dass es auch zu dem neuen iOS-Stil passt“)
   Feste Fläche wie die anderen Fenster (vorher durchsichtiges lila Glas, man sah die Seite dahinter),
   Optionen als gruppierte Zeilen mit dem Schalter rechts, „Weiter“ als volle Pille, „Zurück“ grau,
   „Fertig“ wie in iOS fett in der Akzentfarbe, Überschriften der Felder grau statt lila Großbuchstaben.
   Maße und Aufteilung bleiben (fast-scan.css), damit die Zeichenfelder gleich groß bleiben.
   ═══════════════════════════════════════════════════════════════════════ */
#fast-scan-ui:not(#_f) { background: var(--ios-scrim) !important; }
#fast-scan-ui:not(#_f) .fast-scan-container {
  background: var(--ios-sheet) !important;
  border: 0 !important;
  box-shadow: var(--ios-shadow) !important;
  border-radius: var(--ios-radius) !important;
  color: var(--ios-label) !important;
  font-family: var(--ios-font, inherit);
}
#fast-scan-ui:not(#_f) .fast-scan-title { color: var(--ios-label) !important; font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
#fast-scan-ui:not(#_f) .fs-head-sub { color: var(--ios-label2) !important; font-size: 14px; font-weight: 500; }
#fast-scan-ui:not(#_f) .fs-lang { color: var(--ios-label2) !important; }
#fast-scan-ui:not(#_f) .fs-done-btn {
  background: var(--ios-pill-fill) !important; color: var(--ios-tint-ink) !important;
  border: 0 !important; box-shadow: none !important; text-shadow: none !important;
  height: 36px; padding: 0 18px; font-size: 16px !important; font-weight: 700 !important;
}
#fast-scan-ui:not(#_f) .fs-progress { height: 4px; background: var(--ios-fill) !important; box-shadow: none !important; }
#fast-scan-ui:not(#_f) .progress-bar-fill { background: var(--ios-tint) !important; box-shadow: none !important; }
#fast-scan-ui:not(#_f) .fast-scan-subtitle { color: var(--ios-label2) !important; font-size: 14px; }
/* Optionen: eine Gruppe, zwei Zellen nebeneinander, Text links, Schalter rechts */
#fast-scan-ui:not(#_f) .fs-options { margin: 12px 0; }
#fast-scan-ui:not(#_f) .fs-toggles {
  flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--ios-group); border-radius: 14px; overflow: hidden;
}
#fast-scan-ui:not(#_f) .fs-toggle {
  display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 6px 12px 6px 16px; margin: 0; box-sizing: border-box;
  color: var(--ios-label) !important; font-size: 16px; font-weight: 400; cursor: pointer;
}
#fast-scan-ui:not(#_f) .fs-toggle + .fs-toggle { box-shadow: inset 0.5px 0 0 var(--ios-sep); }
@media (max-width: 420px) {
  #fast-scan-ui:not(#_f) .fs-toggles { grid-template-columns: 1fr; }
  #fast-scan-ui:not(#_f) .fs-toggle { min-height: 44px; }
  #fast-scan-ui:not(#_f) .fs-toggle + .fs-toggle { box-shadow: inset 16px 0.5px 0 -16px var(--ios-sep); box-shadow: none; border-top: 0.5px solid var(--ios-sep); margin-left: 16px; padding-left: 0; }
}
/* Zurück / Weiter */
#fast-scan-ui:not(#_f) .nav-button {
  background: var(--ios-tint) !important; color: #fff !important;
  border: 0 !important; box-shadow: none !important; filter: none;
  font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.01em;
}
#fast-scan-ui:not(#_f) .nav-button.secondary { background: var(--ios-pill-fill) !important; color: var(--ios-label) !important; }
#fast-scan-ui:not(#_f) .nav-button:hover { filter: brightness(1.06); }
/* Stifte und Pinselbreite: eine graue Zeile */
#fast-scan-ui:not(#_f) .fs-controls { background: var(--ios-group) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px; }
#fast-scan-ui:not(#_f) .fs-brush-val { color: var(--ios-label2) !important; font-size: 14px; }
/* Zeichenfelder */
#fast-scan-ui:not(#_f) .fs-tile-label {
  text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--ios-label2) !important;
}
#fast-scan-ui:not(#_f) :is(.letter-guide-container, .canvas-wrapper) {
  background: var(--ios-group) !important; border: 0 !important; border-radius: 22px;
  box-shadow: 0 0 0 0.5px var(--ios-sep) !important;
}
#fast-scan-ui:not(#_f) .canvas-wrapper { box-shadow: 0 0 0 2px var(--ios-tint) !important; }
#fast-scan-ui:not(#_f) .fs-clear-btn {
  background: var(--ios-red-fill) !important; color: var(--ios-red) !important; border: 0 !important; box-shadow: none !important;
}
#fast-scan-ui:not(#_f) .fs-hint { color: var(--ios-label3) !important; }
#fast-scan-ui:not(#_f) .fs-hint kbd { border: 0; background: var(--ios-fill); color: var(--ios-label2); }
#fast-scan-ui:not(#_f) .fs-brush-dot { background: var(--ios-label) !important; box-shadow: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Sterne zum Bewerten (Feedback, Reiter „Bewerten“) wie im App Store:
   gezeichnete, abgerundete Sterne statt des Schrift-Zeichens ★. Leer: feiner grauer Umriss, gewählt: Gold
   (im hellen Modus vorher dunkelbraun). Beim Wählen füllen sie sich nacheinander von links mit leichtem Federn,
   der angetippte hüpft kurz und sendet einen kleinen Lichtring aus.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --fb-star-empty: rgba(235,235,245,0.32); --fb-star-on: #ffcc00; }   /* accent-keep: iOS-Grau */
html[data-theme="light"] { --fb-star-empty: rgba(60,60,67,0.45); --fb-star-on: #ffb800; }
.fb-stars:not(#_s1) { gap: 6px !important; margin: 16px 0 6px !important; }
.fb-star:not(#_s1):not(#_s2) {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.6 5.5 6 .8-4.4 4.2 1.1 6L12 16.8l-5.3 2.9 1.1-6L3.4 9.5l6-.8z' fill='black' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --star-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.6 5.5 6 .8-4.4 4.2 1.1 6L12 16.8l-5.3 2.9 1.1-6L3.4 9.5l6-.8z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  position: relative; display: inline-block; width: 48px; height: 48px; padding: 0 !important;
  font-size: 0 !important; line-height: 0; color: transparent !important; text-shadow: none !important; filter: none !important;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1) !important;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.fb-star:not(#_s1):not(#_s2)::before, .fb-star:not(#_s1):not(#_s2)::after {
  content: ''; position: absolute; inset: 3px; pointer-events: none;
  -webkit-mask: var(--star-o) center / contain no-repeat; mask: var(--star-o) center / contain no-repeat;
  background: var(--fb-star-empty);
}
.fb-star:not(#_s1):not(#_s2)::after {
  -webkit-mask-image: var(--star); mask-image: var(--star);
  background: var(--fb-star-on);
  transform: scale(0); opacity: 0;
  transition: transform .42s cubic-bezier(.3, 1.7, .45, 1), opacity .12s ease;
  transition-delay: calc(var(--i, 0) * 45ms);
}
.fb-star:nth-child(2) { --i: 1; } .fb-star:nth-child(3) { --i: 2; } .fb-star:nth-child(4) { --i: 3; } .fb-star:nth-child(5) { --i: 4; }
.fb-star.active:not(#_s1):not(#_s2)::after { transform: scale(1); opacity: 1; }
.fb-stars:hover .fb-star::after { transition-delay: 0ms; }                 /* Maus: sofort, ohne Nachlauf */
@media (hover: hover) { .fb-star:not(#_s1):not(#_s2):hover { transform: scale(1.14); } }
.fb-star.pop:not(#_s1):not(#_s2) { animation: fbStarHop .5s cubic-bezier(.3, 1.4, .5, 1) !important; }
@keyframes fbStarHop {
  0% { transform: scale(1); } 30% { transform: scale(.82); } 65% { transform: scale(1.22) rotate(-6deg); } 100% { transform: scale(1); }
}
/* Lichtring beim Antippen */
.fb-star.pop:not(#_s1):not(#_s2)::before {
  -webkit-mask: none; mask: none; inset: 0; border-radius: 50%; background: none;
  box-shadow: 0 0 0 2px var(--fb-star-on); animation: fbStarRing .55s ease-out forwards;
}
@keyframes fbStarRing { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.fb-star-hint:not(#_s1) { color: var(--ios-label2) !important; font-size: 15px; font-weight: 600; transition: color .2s; }
.fb-star-hint.on:not(#_s1) { color: var(--ios-label) !important; animation: fbHintIn .3s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes fbHintIn { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fb-star:not(#_s1):not(#_s2)::after { transition: opacity .15s; transform: none; transition-delay: 0ms; }
  .fb-star.pop:not(#_s1):not(#_s2), .fb-star.pop:not(#_s1):not(#_s2)::before, .fb-star-hint.on:not(#_s1) { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Hintergrund-Fenster neu (Marflux: „mache das Background-Select-Popup schöner, sei kreativ, iOS-Stil“)
   Wie ein iOS-Auswahlblatt (Hintergrundbild am iPhone, Fotos-Auswahl):
   · Kopfzeile: „Abbrechen“ links, Titel in der Mitte, „Fertig“ fett rechts (statt × oben und zwei Knöpfen unten)
   · Bühne: das Blatt liegt groß und schwebend auf einer hellen Fläche mit sanftem Licht von oben
   · Muster als Seiten-Kacheln mit Häkchen, Papierfarben als runde Farbtupfer, Auswahl mit Ring in der Akzentfarbe
   ═══════════════════════════════════════════════════════════════════════ */
.background-selection-dialog.bgs:not(#_b1) {
  max-width: 820px; padding: 0 !important; gap: 0;
}
.bgs:not(#_b1) .bgs-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  min-height: 58px; padding: 6px 10px; flex: none;
}
.bgs:not(#_b1) .bgs-nav h3 { margin: 0; font-size: 17px !important; font-weight: 600 !important; color: var(--ios-label); text-align: center; letter-spacing: -0.01em; }
.bgs:not(#_b1) .bgs-nav-btn {
  -webkit-appearance: none; appearance: none; border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 17px; font-weight: 400; color: var(--ios-tint-ink); padding: 8px 12px; border-radius: 100px;
  justify-self: start; min-height: 0 !important; box-shadow: none !important; transition: background-color .15s, transform .2s cubic-bezier(.3,1.5,.5,1);
  -webkit-tap-highlight-color: transparent;
}
.bgs:not(#_b1) .bgs-nav-btn.bgs-apply { justify-self: end; font-weight: 700; color: var(--ios-tint-ink) !important; background: none !important; }
.bgs:not(#_b1) .bgs-nav-btn:hover { background: var(--ios-fill) !important; }
.bgs:not(#_b1) .bgs-nav-btn:active { transform: scale(.94); }
.bgs:not(#_b1) .bgs-tabs { margin: 2px 20px 16px; flex: none; }
.bgs:not(#_b1) .bgs-body { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; padding: 0 20px 22px; }

/* Bühne mit dem schwebenden Blatt */
.bgs:not(#_b1) .bgs-preview { gap: 12px; }
.bgs:not(#_b1) .bgs-stage {
  position: relative; display: grid; place-items: center; padding: 26px 0 30px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.09), transparent 60%), var(--ios-group);
}
html[data-theme="light"] .bgs:not(#_b1) .bgs-stage { background: radial-gradient(120% 80% at 50% 0%, #ffffff, transparent 70%), #e9e9ee; }   /* accent-keep: iOS-Grau */
.bgs:not(#_b1) .bgs-stage::after {   /* weicher Schatten unter dem Blatt, wie auf einem Tisch */
  content: ''; position: absolute; left: 22%; right: 22%; bottom: 14px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,0.35); filter: blur(12px); pointer-events: none;
}
.bgs:not(#_b1) .bgs-sheet {
  width: 72%; border-radius: 5px; z-index: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 18px 36px -18px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(0,0,0,0.12) !important;
}
.bgs:not(#_b1) .bgs-name { text-align: center; font-size: 15px; font-weight: 600; color: var(--ios-label); }
.bgs:not(#_b1) .bgs-cur { background: var(--ios-tint-fill); color: var(--ios-tint-ink); font-weight: 600; }

/* Überschriften */
.bgs:not(#_b1) .bgs-label { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--ios-label2); margin: 2px 4px 10px; }

/* Muster: Seiten-Kacheln */
.bgs:not(#_b1) .bgs-kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.bgs:not(#_b1) :is(.bgs-kinds, .bgs-tones) > .bgs-lens { display: none !important; }
.bgs:not(#_b1) .bgs-kind {
  flex-direction: column; align-items: center; gap: 8px; padding: 0 !important; text-align: center;
  background: none !important; border: 0 !important; box-shadow: none !important; transform: none;
}
.bgs:not(#_b1) .bgs-kind-img {
  position: relative; width: 100% !important; height: auto !important; aspect-ratio: 3 / 4; border-radius: 12px;
  background-size: cover; background-position: center top;
  box-shadow: 0 0 0 0.5px var(--ios-sep), 0 6px 14px -8px rgba(0,0,0,0.4);
  transition: box-shadow .2s ease, transform .3s cubic-bezier(.3,1.5,.5,1);
}
.bgs:not(#_b1) .bgs-kind:hover .bgs-kind-img { transform: translateY(-2px); }
.bgs:not(#_b1) .bgs-kind:active .bgs-kind-img { transform: scale(.95); }
.bgs:not(#_b1) .bgs-kind.on .bgs-kind-img { box-shadow: 0 0 0 2.5px var(--ios-sheet), 0 0 0 5px var(--ios-tint), 0 8px 18px -8px rgba(0,0,0,0.4); }
.bgs:not(#_b1) .bgs-kind-txt b { font-size: 14px; font-weight: 600; color: var(--ios-label); }
.bgs:not(#_b1) .bgs-kind-txt small { font-size: 12px; color: var(--ios-label2); white-space: normal; line-height: 1.25; }
.bgs-tick {
  position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ios-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,0.3);
  opacity: 0; transform: scale(.4); transition: opacity .15s ease, transform .35s cubic-bezier(.3,1.7,.45,1);
}
.bgs-kind.on .bgs-tick { opacity: 1; transform: none; }

/* Papierfarbe: runde Farbtupfer */
.bgs:not(#_b1) .bgs-tones { gap: 20px; }
.bgs:not(#_b1) .bgs-tone {
  flex-direction: column; gap: 7px; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  font-size: 13px !important; font-weight: 500 !important; color: var(--ios-label2) !important;
}
.bgs:not(#_b1) .bgs-dot {
  width: 46px; height: 46px; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.2), 0 3px 8px -4px rgba(0,0,0,0.4);
  transition: box-shadow .2s ease, transform .3s cubic-bezier(.3,1.5,.5,1);
}
.bgs:not(#_b1) .bgs-tone:active .bgs-dot { transform: scale(.9); }
.bgs:not(#_b1) .bgs-tone.on { color: var(--ios-label) !important; font-weight: 600 !important; }
.bgs:not(#_b1) .bgs-tone.on .bgs-dot { box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.2), 0 0 0 2.5px var(--ios-sheet), 0 0 0 5px var(--ios-tint); }

/* Eigene Bilder: wie die Fotos-Auswahl */
.bgs:not(#_b1) .bgs-cust-item { border-radius: 12px; box-shadow: 0 0 0 0.5px var(--ios-sep); }
.bgs:not(#_b1) .bgs-cust-item.on { box-shadow: 0 0 0 2.5px var(--ios-sheet), 0 0 0 5px var(--ios-tint); }
.bgs:not(#_b1) .bgs-check { left: auto; top: auto; right: 6px; bottom: 6px; width: 24px; height: 24px; background: var(--ios-tint); box-shadow: 0 0 0 2px #fff; }
.bgs:not(#_b1) .bgs-upload { background: var(--ios-group) !important; border: 1.5px dashed var(--ios-sep) !important; border-radius: 12px !important; color: var(--ios-label) !important; }
.bgs:not(#_b1) .bgs-upload small, .bgs:not(#_b1) .bgs-hint { color: var(--ios-label2) !important; }
.bgs:not(#_b1) .bgs-upload-ic { background: var(--ios-tint-fill); color: var(--ios-tint-ink); }
.bgs:not(#_b1) .bgs-guest { background: var(--ios-group); border: 0; }
.bgs:not(#_b1) .bgs-guest-title { color: var(--ios-label); }
.bgs:not(#_b1) .bgs-guest p { color: var(--ios-label2); }

/* Handy: Blatt von unten mit Griff, Bühne oben, alles untereinander */
@media (max-width: 600px) {
  .background-selection-dialog.bgs:not(#_b1) { padding: 0 !important; }
  .bgs:not(#_b1) .bgs-nav { padding-top: 14px; position: relative; }
  .bgs:not(#_b1) .bgs-nav::before {
    content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--ios-label3);
  }
  .bgs:not(#_b1) .bgs-tabs { margin: 0 16px 14px; }
  .bgs:not(#_b1) .bgs-body { grid-template-columns: 1fr; gap: 18px; padding: 0 16px calc(20px + env(safe-area-inset-bottom)); }
  .bgs:not(#_b1) .bgs-preview { flex-direction: column; align-items: stretch; }
  .bgs:not(#_b1) .bgs-stage { padding: 18px 0 22px; }
  .bgs:not(#_b1) .bgs-sheet { width: 34%; }
  .bgs:not(#_b1) .bgs-kinds { gap: 10px; }
  .bgs:not(#_b1) .bgs-kind-txt small { display: none; }
  .bgs:not(#_b1) .bgs-tones { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .bgs-tick, .bgs:not(#_b1) .bgs-kind-img, .bgs:not(#_b1) .bgs-dot { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   PDF-Editor im iOS-Stil (wie eine iPad-App: Freenotes, Notizen, Dateien)
   · ruhiger Grund statt lila Glas, Leisten und Seitenteile als feste graue Flächen
   · Werkzeuge in einer Pille, das gewählte hell hinterlegt; Stift, Textmarker und Radierer als 3D-Modelle
     (js/app/pen-models.js, js/pdf-editor-pens.js), das gewählte ist ein Stück herausgezogen
   · Eigenschaften als gruppierte iOS-Zeilen, Schalter rechts, „Löschen“ rot
   ═══════════════════════════════════════════════════════════════════════ */
#pdf-editor-overlay:not(#_e) {
  --pme-text: var(--ios-label); --pme-text-2: var(--ios-label2); --pme-text-3: var(--ios-label3); --pme-line: var(--ios-sep);
  background: var(--ios-page, #000) !important; color: var(--ios-label);
  font-family: var(--ios-font, inherit);
}
#pdf-editor-overlay:not(#_e) :is(#pme-toolbar, #pme-page-panel, #pme-props) {
  background: var(--ios-sheet) !important; border: 0 !important; box-shadow: none !important;
}
#pdf-editor-overlay:not(#_e) #pme-toolbar { border-radius: 22px; }
#pdf-editor-overlay:not(#_e) #pme-viewport { background: transparent !important; }
#pdf-editor-overlay:not(#_e) #pme-page, #pdf-editor-overlay:not(#_e) .pme-slot {
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 20px 50px -20px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(0,0,0,0.15) !important;
}
#pdf-editor-overlay:not(#_e) .pme-slot.active { box-shadow: none !important; }
#pdf-editor-overlay:not(#_e) .pme-slot + .pme-slot::before { color: var(--ios-label3); }
#pdf-editor-overlay:not(#_e) .pme-title-main { color: var(--ios-label); font-size: 16px; font-weight: 700; }
#pdf-editor-overlay:not(#_e) .pme-title-sub { color: var(--ios-label2); font-size: 12px; font-weight: 500; }

/* Runde Knöpfe, Gruppen, Exportieren */
#pdf-editor-overlay:not(#_e) .pme-icon-btn {
  width: 38px !important; height: 38px !important; border-radius: 50% !important;
  background: var(--ios-pill-fill) !important; border: 0 !important; box-shadow: none !important; color: var(--ios-label) !important;
}
#pdf-editor-overlay:not(#_e) .pme-icon-btn:disabled { opacity: .35 !important; }
#pdf-editor-overlay:not(#_e) .pme-btn-group { background: var(--ios-pill-fill) !important; border: 0 !important; box-shadow: none !important; border-radius: 100px; padding: 2px; }
#pdf-editor-overlay:not(#_e) .pme-btn-group .pme-icon-btn { background: transparent !important; }
#pdf-editor-overlay:not(#_e) .pme-zoom-label { color: var(--ios-label); font-weight: 600; }
#pdf-editor-overlay:not(#_e) .pme-export-btn {
  background: var(--ios-tint) !important; color: #fff !important; border: 0 !important; box-shadow: none !important;
  height: 38px !important; border-radius: 100px !important; font-size: 15px !important; font-weight: 600 !important; padding: 0 18px !important;
}
#pdf-editor-overlay:not(#_e) .pme-export-btn:hover { filter: brightness(1.07); transform: none; }

/* Werkzeuge */
#pdf-editor-overlay:not(#_e) .pme-tools {
  background: var(--ios-group) !important; border: 0 !important; box-shadow: none !important; border-radius: 100px; padding: 4px 6px; gap: 2px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#pdf-editor-overlay:not(#_e) .pme-tools-sep { background: var(--ios-sep); }
#pdf-editor-overlay:not(#_e) .pme-tool {
  border: 0 !important; border-radius: 100px !important; color: var(--ios-label) !important; font-size: 14px !important; font-weight: 500 !important;
  background: transparent !important; box-shadow: none !important;
}
#pdf-editor-overlay:not(#_e) .pme-tool:hover { background: var(--ios-fill) !important; }
#pdf-editor-overlay:not(#_e) .pme-tool.active:not(.pme-tool-3d) { background: var(--ios-tint-fill) !important; color: var(--ios-tint-ink) !important; font-weight: 600 !important; }
/* 3D-Werkzeuge: Stift steckt in der Leiste, nur die Spitze und der obere Teil sind zu sehen */
#pdf-editor-overlay:not(#_e) .pme-tool-3d {
  position: relative; width: 40px; height: 44px; padding: 0 !important; overflow: hidden; justify-content: center;
  border-radius: 12px !important; align-self: stretch; margin: -4px 0;
}
#pdf-editor-overlay:not(#_e) .pme-tool-3d > :is(svg:not(.ggpm), span:not(.pme-3d)) { display: none !important; }
#pdf-editor-overlay:not(#_e) .pme-tool-3d:hover { background: transparent !important; }
.pme-3d { position: absolute; left: 50%; top: 12px; width: 24px; height: 75px; margin-left: -12px; pointer-events: none;
  transition: transform .45s cubic-bezier(.3, 1.45, .5, 1); filter: drop-shadow(0 2px 2px rgba(0,0,0,0.28)); }
.pme-3d .ggpm { display: block; width: 100%; height: 100%; }
.pme-tool-3d:hover .pme-3d { transform: translateY(-3px); }
.pme-tool-3d.active .pme-3d { transform: translateY(-10px); }
.pme-tool-3d:active .pme-3d { transform: translateY(-6px) scale(.96); }
/* kleiner Punkt unter dem gewählten Werkzeug */
#pdf-editor-overlay:not(#_e) .pme-tool-3d.active::after {
  content: '' !important; display: block !important; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--ios-tint); z-index: 2;
}

/* Seitenleiste */
#pdf-editor-overlay:not(#_e) #pme-page-panel { border-radius: 22px; }
#pdf-editor-overlay:not(#_e) .pme-page-thumb canvas { border-radius: 6px; box-shadow: 0 0 0 0.5px var(--ios-sep), 0 4px 12px -6px rgba(0,0,0,0.5); }
#pdf-editor-overlay:not(#_e) .pme-page-thumb.active canvas { box-shadow: 0 0 0 2.5px var(--ios-sheet), 0 0 0 5px var(--ios-tint); }
#pdf-editor-overlay:not(#_e) #pme-add-page-btn { background: var(--ios-group) !important; border: 1.5px dashed var(--ios-sep) !important; color: var(--ios-tint-ink) !important; }

/* Eigenschaften */
#pdf-editor-overlay:not(#_e) #pme-props { border-radius: 22px; }
#pdf-editor-overlay:not(#_e) .pme-props-head { color: var(--ios-label2); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
#pdf-editor-overlay:not(#_e) .pme-sec { background: var(--ios-group) !important; border: 0 !important; box-shadow: none !important; border-radius: 14px !important; }
#pdf-editor-overlay:not(#_e) .pme-sec-title { color: var(--ios-label) !important; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; }
#pdf-editor-overlay:not(#_e) :is(.pme-val, .pme-hex, .pme-note, .pme-empty-sub) { color: var(--ios-label2) !important; }
#pdf-editor-overlay:not(#_e) .pme-check {
  flex-direction: row-reverse; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 10px 12px 10px 14px;
  background: var(--ios-group); border-radius: 14px; color: var(--ios-label) !important; font-size: 14px;
}
#pdf-editor-overlay:not(#_e) .pme-check small { color: var(--ios-label2); }
#pdf-editor-overlay:not(#_e) .pme-danger-btn {
  background: var(--ios-group) !important; color: var(--ios-red) !important; border: 0 !important; box-shadow: none !important;
  border-radius: 14px !important; font-weight: 500; font-size: 15px;
}
#pdf-editor-overlay:not(#_e) :is(.pme-action, .pme-mini, .pme-lock, .pme-prop-input) {
  background: var(--ios-fill) !important; border: 0 !important; box-shadow: none !important; color: var(--ios-label) !important;
}
#pdf-editor-overlay:not(#_e) .pme-action-danger { color: var(--ios-red) !important; }
#pdf-editor-overlay:not(#_e) .pme-preview-box { background: var(--ios-sheet) !important; box-shadow: none; border: 0; }
#pdf-editor-overlay:not(#_e) .pme-swatch.active, #pdf-editor-overlay:not(#_e) .pme-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--ios-group), 0 0 0 4.5px var(--ios-tint) !important; }

/* Stiftart: fünf Stifte nebeneinander in einer Ablage */
#pdf-editor-overlay:not(#_e) .pme-pens-3d .gg-pen-lens { display: none !important; }
#pdf-editor-overlay:not(#_e) .pme-pens-3d .gg-pen-btns { display: flex; gap: 4px; justify-content: space-between; width: 100%;
  border-bottom: 0.5px solid var(--ios-sep); }
#pdf-editor-overlay:not(#_e) .pme-pens-3d .gg-pen-tool {
  position: relative; flex: 1 1 0; height: 64px; width: auto; min-width: 0; padding: 0; overflow: hidden; border-radius: 10px 10px 0 0;
  background: transparent !important;
}
#pdf-editor-overlay:not(#_e) .pme-pens-3d .gg-pen-tool > svg:not(.ggpm) { display: none; }
#pdf-editor-overlay:not(#_e) .pme-pens-3d .pme-3d { top: 22px; width: 26px; height: 82px; margin-left: -13px; }
#pdf-editor-overlay:not(#_e) .pme-pens-3d .gg-pen-tool.active .pme-3d { transform: translateY(-16px); }
#pdf-editor-overlay:not(#_e) .pme-pens-3d .gg-pen-tool:hover:not(.active) .pme-3d { transform: translateY(-4px); }
#pdf-editor-overlay:not(#_e) .pme-pens-3d .gg-pen-name { display: block; margin-top: 8px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ios-label2); }

/* Schwebendes über der Seite */
#pdf-editor-overlay:not(#_e) :is(.pme-selbar, .pme-tool-hint) {
  background: var(--ios-menu) !important; border: 0 !important; color: var(--ios-label) !important;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.5), 0 0 0 0.5px var(--ios-sep) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#pdf-editor-overlay:not(#_e) .pme-selbar { border-radius: 100px; padding: 4px; }
#pdf-editor-overlay:not(#_e) .pme-selbar button { color: var(--ios-label); border-radius: 100px; }

/* Handy: Dock unten wie eine iOS-Werkzeugleiste, Eigenschaften als Blatt */
@media (max-width: 700px) {
  #pdf-editor-overlay:not(#_e) .pme-tools {
    background: var(--ios-menu) !important; border-radius: 26px; padding: 4px 8px;
    box-shadow: 0 12px 34px -10px rgba(0,0,0,0.55), 0 0 0 0.5px var(--ios-sep) !important;
  }
  #pdf-editor-overlay:not(#_e) .pme-tool { height: 46px; }
  #pdf-editor-overlay:not(#_e) .pme-tool-3d { height: 54px; width: 42px; }
  #pdf-editor-overlay:not(#_e) .pme-tool-3d .pme-3d { top: 16px; }
  #pdf-editor-overlay:not(#_e) #pme-props { background: var(--ios-sheet) !important; border-radius: 26px 26px 0 0 !important;
    box-shadow: 0 -12px 40px -10px rgba(0,0,0,0.5) !important; }
  #pdf-editor-overlay:not(#_e) #pme-props::before { background: var(--ios-label3); }
  #pdf-editor-overlay:not(#_e) #pme-page-panel { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .pme-3d { transition: none; } }
/* Nachbesserung: schmale Bildschirme blenden alle <span> in Werkzeugen aus (pdf-editor-v2.css), die Modelle nicht */
#pdf-editor-overlay:not(#_e) .pme-tool-3d { position: relative !important; }
#pdf-editor-overlay:not(#_e) .pme-tool .pme-3d, #pdf-editor-overlay:not(#_e) .gg-pen-tool .pme-3d { display: block !important; }
#pdf-editor-overlay:not(#_e) .pme-tool-3d.active::after { top: auto !important; bottom: 2px !important; }
#pdf-editor-overlay:not(#_e) .pme-tool-3d .pme-3d { width: 28px; margin-left: -14px; height: 88px; }
#pdf-editor-overlay:not(#_e) .pme-tool-3d.active::after { display: none !important; }
#pdf-editor-overlay:not(#_e) .pme-pens-3d .gg-pen-tool { height: 76px; }
#pdf-editor-overlay:not(#_e) .pme-pens-3d .pme-3d { top: 24px; width: 30px; height: 96px; margin-left: -15px; }
#pdf-editor-overlay:not(#_e) .pme-pens-3d .gg-pen-tool.active .pme-3d { transform: translateY(-18px); }

/* ═══════════════════════════════════════════════════════════════════════
   PDF-Vorschau (js/app/pdf-lightbox.js) im iOS-Stil
   · kleine Vorschau: runder grauer „Vergrößern“-Knopf wie in Fotos
   · große Ansicht: fester Grund (kein durchscheinendes Glas), Kopfzeile wie eine iOS-Leiste,
     runde graue Knöpfe, „Download“ volle Pille mit weißer Schrift, „Bearbeiten“ graue Pille
   ═══════════════════════════════════════════════════════════════════════ */
.pv-expand-btn:not(#_p) {
  background: rgba(28,28,30,0.72) !important; color: #fff !important; border: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html.gg-perf .pv-expand-btn:not(#_p) { background: rgba(28,28,30,0.9) !important; }
.pv-lightbox:not(#_p) { background: var(--ios-page) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--ios-label); font-family: var(--ios-font, inherit); }
.pv-lightbox:not(#_p) .pv-toolbar { background: var(--ios-sheet) !important; border: 0 !important; box-shadow: 0 0.5px 0 var(--ios-sep) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pv-lightbox:not(#_p) .pv-title strong { color: var(--ios-label); font-size: 17px; font-weight: 600; }
.pv-lightbox:not(#_p) .pv-page { color: var(--ios-label2); font-size: 14px; }
.pv-lightbox:not(#_p) .pv-group { background: var(--ios-pill-fill) !important; border: 0 !important; box-shadow: none !important; border-radius: 100px; }
.pv-lightbox:not(#_p) .pv-btn { color: var(--ios-label) !important; font-weight: 600; border-radius: 100px; }
.pv-lightbox:not(#_p) .pv-btn:hover:not(:disabled) { background: var(--ios-fill) !important; }
.pv-lightbox:not(#_p) :is(.pv-btn-edit, .pv-close) { background: var(--ios-pill-fill) !important; border: 0 !important; box-shadow: none !important; }
.pv-lightbox:not(#_p) .pv-btn-edit { color: var(--ios-tint-ink) !important; }
.pv-lightbox:not(#_p) .pv-close { width: 38px; height: 38px; padding: 0; border-radius: 50% !important; display: inline-grid; place-items: center; }
.pv-lightbox:not(#_p) .pv-btn-primary { background: var(--ios-tint) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
.pv-lightbox:not(#_p) .pv-btn-primary:hover { filter: brightness(1.07); }
.pv-lightbox:not(#_p) .pv-thumbs { background: var(--ios-sheet) !important; border: 0 !important; box-shadow: 0.5px 0 0 var(--ios-sep) !important; }
.pv-lightbox:not(#_p) .pv-thumb { color: var(--ios-label2); }
.pv-lightbox:not(#_p) .pv-thumb-img { box-shadow: 0 0 0 0.5px var(--ios-sep), 0 4px 12px -6px rgba(0,0,0,0.5) !important; border-radius: 6px; }
.pv-lightbox:not(#_p) .pv-thumb.pv-active .pv-thumb-img { box-shadow: 0 0 0 2.5px var(--ios-sheet), 0 0 0 5px var(--ios-tint) !important; }
.pv-lightbox:not(#_p) .pv-sheet { box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 22px 50px -20px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(0,0,0,0.12) !important; }
.pv-lightbox:not(#_p) .pv-sheet-num { color: var(--ios-label3); }
.pv-lightbox:not(#_p) .pv-hint { background: var(--ios-toast, rgba(44,44,46,0.97)) !important; color: var(--ios-label) !important; border: 0 !important;
  box-shadow: var(--ios-toast-shadow) !important; -webkit-backdrop-filter: none; backdrop-filter: none; font-weight: 600; }
/* X im Eigenschaften-Blatt des Editors (Handy) bleibt oben rechts angeheftet */
.pme-sheet-close:not(#_x1):not(#_x2):not(#_x3) { position: absolute !important; top: 10px; right: 12px; left: auto; width: 34px; height: 34px;
  background: var(--ios-circle) !important; color: var(--ios-circle-ink) !important; border: 0 !important; }

/* X so groß wie in iOS-Fenstern (App Store: 44-pt-Kreis), hell weiß mit Schatten, dunkel grau */
:is(.auth-close-btn, .settings-header .close-button, .sd-close, .fb-top-close, .presets-close-btn, .bg-close-btn,
    .news-popup-close, .fb-close-btn, .gl-close, .fn-close):not(#_x1):not(#_x2):not(#_x3):not(#_x4) {
  width: 44px !important; height: 44px !important; min-width: 44px !important;
  color: var(--ios-label) !important;
}
.fn-close { top: 14px !important; right: 14px !important; }
/* Zweitknöpfe direkt auf dem Grund (z. B. „Standard“ bei Schritt 3): dunkel eine Stufe heller, hell weiß wie eine Karte */
.settings-button-group .settings-btn-item:not(#presets-button):not(#_a):not(#_b):not(#_c) { background: var(--ios-inner) !important; }

/* „So funktioniert's“ (Startseite für Gäste): App-Symbole statt lila Zahlen-Kreise, wie die Schritt-Karten */
.how-num:not(#_a):not(#_b) {
  position: relative; width: 38px; height: 38px; border-radius: 9px; font-size: 0; color: transparent !important;
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.18), 0 3px 8px -4px rgba(0,0,0,0.4) !important;
}
.how-num:not(#_a):not(#_b)::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; background: #fff;
  -webkit-mask: var(--gg-step-ic) center / contain no-repeat; mask: var(--gg-step-ic) center / contain no-repeat;
}
.how-step:nth-child(1) .how-num:not(#_a):not(#_b) { background: linear-gradient(180deg, #ffb340, #ff8a00) !important;   /* accent-keep: iOS-Orange */
  --gg-step-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4z'/%3E%3Cpath d='M14.5 5.5l3 3'/%3E%3Cpath d='M4 22c3-1.5 6 1 9-0.5s4-2 7-1' stroke-width='1.8'/%3E%3C/svg%3E"); }
.how-step:nth-child(2) .how-num:not(#_a):not(#_b) { background: linear-gradient(180deg, #3ea2ff, #0a6cff) !important;   /* accent-keep: iOS-Blau */
  --gg-step-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M8.5 13c1.2-1.4 2.2-1.4 3 0s1.8 1.4 3 0M8.5 17h5'/%3E%3C/svg%3E"); }
.how-step:nth-child(3) .how-num:not(#_a):not(#_b) { background: linear-gradient(180deg, #4cd964, #28a745) !important;   /* accent-keep: iOS-Grün */
  --gg-step-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E"); }
@media (max-width: 700px) { .how-step span:not(.how-num) { padding-left: 50px !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   Aufbau wie die iPad-Einstellungen und der App Store (Bilder von Marflux):
   schwarzer bzw. hellgrauer Grund → graue Karten darauf → Felder und Nebenknöpfe eine Stufe heller in den Karten.
   Nichts zum Anfassen liegt mehr direkt auf dem schwarzen Grund (vorher: Textfeld, „PDF erstellen“, Download,
   Presets/Standard). Hell: Grund rgb(var(--a-f2f2f7,242,242,247)), Karten weiß, Felder hellgrau.
   ═══════════════════════════════════════════════════════════════════════ */
/* Schritt 2: Eingabe und Vorschau je eine Karte */
#pdf-section .text-input-section:not(#_a):not(#_b):not(#_c) {
  background: var(--ios-card) !important; border-radius: 26px !important; padding: 14px !important; box-sizing: border-box;
  border: 0 !important; box-shadow: none !important;
}
#pdf-section .pdf-container > div:last-child:not(#_a):not(#_b):not(#_c) {
  background: var(--ios-card) !important; border-radius: 26px !important; padding: 14px !important; border: 0 !important; box-sizing: border-box;
}
#pdf-section #userText:not(#_a):not(#_b):not(#_c), #pdf-section .tm-mirror { border-radius: 18px !important; }
#pdf-section #userText:not(#_a):not(#_b):not(#_c) { background: var(--ios-inner) !important; }
#pdf-section .pdf-placeholder:not(#_a):not(#_b) { background: var(--ios-inner) !important; border: 0 !important; border-radius: 18px !important; }
/* Nebenknöpfe in der Karte: eine Stufe heller, Hauptknopf bleibt volle Akzent-Pille */
#pdf-section :is(.pdf-btn-bg, .pdf-btn-download, .pdf-btn-edit, .btn-clear-text, .page-nav-btn):not(#_a):not(#_b):not(#_c):not(#_d) {
  background: var(--ios-inner) !important; border: 0 !important; box-shadow: none !important;
}
#pdf-section :is(.pdf-btn-download, .pdf-btn-edit):disabled:not(#_a):not(#_b):not(#_c):not(#_d) { opacity: .45; }
/* Schritt 3: Presets / Standard in einer Karte wie die Knöpfe im App Store */
.settings-button-group:not(#_a):not(#_b) { background: var(--ios-card) !important; border-radius: 26px !important; padding: 12px !important; box-sizing: border-box; }
.settings-button-group .settings-btn-item:not(#presets-button):not(#_a):not(#_b):not(#_c) { background: var(--ios-inner) !important; }

/* Zeichenfelder neutral grau wie ein iOS-Feld (vorher lila Hilfsbild und kräftiger lila Rand im Fast Scan) */
:is(#guideImage, #fast-scan-ui .guide-image, #fast-scan-ui #fastScanGuideImage) { filter: grayscale(1) contrast(.9); }
/* hell: das Hilfsbild wird dort umgedreht (css/light.css), das Grau kommt dazu */
html[data-theme="light"] :is(#guideImage, #fast-scan-ui .guide-image, #fast-scan-ui #fastScanGuideImage) { filter: invert(1) hue-rotate(180deg) grayscale(1) brightness(1.12) contrast(.95); }
html[data-theme="light"] #fast-scan-ui:not(#_f) :is(.letter-guide-container, .canvas-wrapper) { background: #fbfbfd !important; }   /* accent-keep: iOS-Weiß */
#fast-scan-ui:not(#_f) .canvas-wrapper { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ios-tint) 55%, transparent) !important; }
#fast-scan-ui:not(#_f) :is(.letter-guide-container, .canvas-wrapper) { background: var(--ios-inner) !important; }

/* Radierer: an = volle Akzent-Pille mit weißem Symbol (vorher sah man es gar nicht), Zeichenfeld mit Ring */
.gg-eraser-btn.on:not(#_a):not(#_b):not(#_c):not(#_d) {
  background: var(--ios-tint) !important; color: #fff !important; border: 0 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ios-tint) 30%, transparent) !important;
}
body.gg-eraser-on :is(#app-section .canvas-wrapper, #fast-scan-ui .canvas-wrapper):not(#_a):not(#_b) {
  box-shadow: 0 0 0 2.5px var(--ios-tint) !important;
}
/* kleiner Hinweis im Zeichenfeld, solange der Radierer an ist */
body.gg-eraser-on #app-section .canvas-wrapper::after, body.gg-eraser-on #fast-scan-ui .canvas-wrapper::after {
  content: 'Radierer'; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 6; pointer-events: none;
  padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; color: #fff; background: var(--ios-tint);
}
html[lang="en"] body.gg-eraser-on #app-section .canvas-wrapper::after, html[lang="en"] body.gg-eraser-on #fast-scan-ui .canvas-wrapper::after { content: 'Eraser'; }

/* weißer Strich oben auf „Löschen“/„Speichern“ (alter Glanz-Streifen) weg */
:is(.canvas-btn-clear, .canvas-btn-save)::before { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Fast Scan, Kopf wie ein iOS-Blatt (Marflux: „sieht nicht schön aus, auch mit dem Titel“):
   Titel mittig, darunter klein Sprache und Fortschritt, rechts „Fertig“ als Pille wie „Bearbeiten“ in iOS,
   darunter ein feiner Fortschrittsbalken über die ganze Breite. Bleibt überall ein Popup in der Mitte
   (Marflux: kein Blatt von unten, sonst sitzt das Zeichenfeld zu weit unten).
   ═══════════════════════════════════════════════════════════════════════ */
#fast-scan-ui:not(#_f) .fs-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: -2px 0 12px;
}
#fast-scan-ui:not(#_f) .fs-head::before { content: ''; }
#fast-scan-ui:not(#_f) .fs-head-text { grid-column: 2; text-align: center; min-width: 0; }
#fast-scan-ui:not(#_f) .fast-scan-title { font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.01em; line-height: 1.25; }
#fast-scan-ui:not(#_f) .fs-head-sub { justify-content: center; margin-top: 1px; font-size: 13px !important; font-weight: 500 !important; }
#fast-scan-ui:not(#_f) .fs-done-btn { grid-column: 3; justify-self: end; height: 36px; padding: 0 16px; font-size: 16px !important; font-weight: 600 !important; }
#fast-scan-ui:not(#_f) .fs-progress { height: 4px; margin: 0 0 4px; }
#fast-scan-ui:not(#_f) .fast-scan-subtitle { text-align: center; font-size: 14px !important; line-height: 1.4; margin: 12px auto 0; max-width: 52ch; }
/* Reihenfolge: alles zum Drücken über dem Zeichenfeld, darunter nur Text (Marflux: der Handballen liegt beim
   Zeichnen unter dem Feld und darf dort nichts auslösen). Damit das Feld trotzdem weit oben steht, kommt der
   Hinweistext nach unten und die zwei Schalter stehen auch am Handy nebeneinander in einer Zeile. */
#fast-scan-ui:not(#_f) .fast-scan-container { flex-direction: column; }
#fast-scan-ui:not(#_f) .fs-options { order: 1; margin: 12px 0 0; }
#fast-scan-ui:not(#_f) .nav-buttons { order: 2; margin-top: 12px !important; margin-bottom: 0 !important; }
#fast-scan-ui:not(#_f) .fs-controls { order: 3; margin-top: 12px; }
#fast-scan-ui:not(#_f) .canvas-section { order: 4; }
#fast-scan-ui:not(#_f) #fs-width-hint { order: 5; }
#fast-scan-ui:not(#_f) .fast-scan-subtitle { order: 6; }
#fast-scan-ui:not(#_f) .fs-hint { order: 7; }
@media (max-width: 420px) {
  #fast-scan-ui:not(#_f) .fs-toggles { grid-template-columns: 1fr 1fr; }
  #fast-scan-ui:not(#_f) .fs-toggle { min-height: 46px; padding: 6px 8px 6px 12px; gap: 6px !important; font-size: 14px; line-height: 1.2; text-align: left; }
  #fast-scan-ui:not(#_f) .fs-toggle + .fs-toggle { border-top: 0; margin-left: 0; padding-left: 12px; box-shadow: inset 0.5px 0 0 var(--ios-sep); }
}
/* Felder-Überschriften ruhiger, Abstand wie zwischen iOS-Gruppen */
#fast-scan-ui:not(#_f) .fs-tile-label { font-size: 13px; font-weight: 600; }
#fast-scan-ui:not(#_f) .canvas-section { margin-top: 6px; }
#fast-scan-ui:not(#_f) .fs-controls { padding: 6px 14px 6px 8px; }


/* ═══════════════════════════════════════════════════════════════════════
   Ein Schritt = eine Karte (Marflux: „der Schritt-Container und der jeweilige Schritt sollen zusammen sein“),
   wie „Wi-Fi“ in den iPad-Einstellungen: oben Symbol, Titel, Text, darunter die Inhalte als hellere Gruppen.
   Innen rücken alle Flächen eine Stufe auf: dafür werden die Farb-Variablen nur im Schritt umgestellt
   (Karte → Gruppe, Feld → noch eine Stufe heller). Hell: Schritt weiß, Gruppen hellgrau, Felder weiß.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --ios-step: #1c1c1e; --ios-step-l2: #2c2c2e; --ios-step-l3: #3a3a3c; }
html[data-theme="light"] { --ios-step: #ffffff; --ios-step-l2: #f2f2f7; --ios-step-l3: #ffffff; }   /* accent-keep: iOS-Grau */
:is(#app-section, #pdf-section, #settings-section):not(#_ios):not(#_b):not(#_c) {
  background: var(--ios-step) !important;
  border-radius: 30px !important;
  padding: 22px !important;
  margin-bottom: 18px;
  --ios-card: var(--ios-step-l2);
  --ios-inner: var(--ios-step-l3);
  --ios-inner-press: var(--ios-step-l3);
}
/* Kopf ist keine eigene Karte mehr, sondern der obere Teil der Schritt-Karte */
.gg-step-head:not(#_a):not(#_b) { background: transparent !important; padding: 0 !important; border-radius: 0 !important; margin: 0 0 18px !important; }
/* Format und Verlauf gehören zum Textfeld: kleine Leiste direkt darüber */
#pdf-section .text-top-tools { display: flex; gap: 8px; margin: 0 0 10px; justify-content: flex-start; width: auto; }
#pdf-section .text-top-tools .gg-chip { flex: 0 0 auto; }
@media (max-width: 600px) {
  :is(#app-section, #pdf-section, #settings-section):not(#_ios):not(#_b):not(#_c) { padding: 16px !important; border-radius: 26px !important; }
  #pdf-section .text-top-tools .gg-chip { flex: 1 1 0; justify-content: center; }
}
/* Einstellungs-Gruppen nie breiter als die Schritt-Karte (Inhalt der Regler-Zeilen drückte sie am Handy hinaus) */
#settings-section .settings-body > * { min-width: 0; max-width: 100%; }
@media (max-width: 760px) { #settings-section .settings-body { grid-template-columns: minmax(0, 1fr) !important; } }
#settings-section .settings-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { #settings-section .settings-groups { grid-template-columns: minmax(0, 1fr) !important; } }
#settings-section .settings-group { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   Sprachliste ohne Lila (Marflux: „auf dem Handy immer noch stark mit der Akzentfarbe“):
   Das lila getönte Glas hinter der Liste und am Suchfeld wird zur grauen iOS-Menü-Fläche wie bei den anderen
   Auswahllisten, das Suchfeld ein graues iOS-Suchfeld. Lila bleibt nur am Haken der gewählten Sprache.
   ═══════════════════════════════════════════════════════════════════════ */
.lp-lang-pop:not(#_a):not(#_b):not(#_c) { background: var(--ios-menu) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.lp-lang-pop > .gl-dd-bg:not(#_a):not(#_b) { display: none !important; }
.lp-lang-pop .lp-lang-search-wrap:not(#_a):not(#_b):not(#_c) {
  /* deckend (graue Fläche auf der Menüfarbe), damit beim Scrollen keine Zeilen durchscheinen */
  background: linear-gradient(var(--ios-fill), var(--ios-fill)), var(--ios-menu) !important; border: 0 !important; box-shadow: 0 0 0 10px var(--ios-menu) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-radius: 12px !important; height: 40px; min-height: 40px; color: var(--ios-label2) !important;
}
.lp-lang-pop .lp-lang-search-wrap:focus-within:not(#_a):not(#_b):not(#_c) { box-shadow: 0 0 0 10px var(--ios-menu) !important; }
.lp-lang-pop .lp-lang-search:not(#_a) { color: var(--ios-label) !important; font-weight: 400 !important; font-size: 17px !important; }
.lp-lang-pop .lp-lang-search::placeholder { color: var(--ios-label2) !important; }
.lp-lang-pop .lp-lang-list:not(#_a) { padding-top: 58px !important; scroll-padding-top: 58px; }
.lp-lang-pop .lp-lang-group:not(#_a) { background: transparent !important; }
.lp-lang-pop .lp-lang-item:not(#_a):not(#_b) { background: transparent !important; }
.lp-lang-pop .lp-lang-item:not(#_a):not(#_b):is(:hover, :active, .gl-dd-press) { background: var(--ios-menu-press) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Schritt-Kopf ohne Leerraum (Marflux, iPad: „oben rechts so viel ungenutzter Platz“):
   Symbol links neben „Schritt N von 3“, Titel und Text statt allein in einer eigenen Zeile.
   Einklapp-Knopf (Schritt 1) bleibt rechts.
   ═══════════════════════════════════════════════════════════════════════ */
.gg-step-head:not(#_a):not(#_b) {
  grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-areas: "icon text tools" !important;
  align-items: center !important; gap: 0 18px !important;
}
.gg-step-head > .gg-step-text { margin: 0 !important; }
/* Handy: nur „Schritt N“ und Titel neben dem Symbol, der Beschreibungstext darunter über die volle Breite
   (sonst wird er neben Symbol und Einklapp-Knopf zu einer schmalen Spalte) */
@media (max-width: 600px) {
  .gg-step-head:not(#_a):not(#_b) { grid-template-areas: "icon title tools" "sub sub sub" !important; gap: 12px 14px !important; }
  .gg-step-head > .gg-step-text { display: contents; }
  .gg-step-head > .gg-step-text > :is(h2, h3) { grid-area: title; margin: 0 !important; align-self: center; }
  .gg-step-head > .gg-step-text > p { grid-column: 1 / -1; margin: 0 !important; }
  .gg-step-head > .gg-step-text > p:empty, .gg-step-head > .gg-step-text > p[hidden] { display: none; }
  .gg-step-head > :is(.gg-step-tools, .gg-hw-toggle) { align-self: center; }
  .gg-step-text h2, .gg-step-text h3 { font-size: 24px !important; line-height: 1.15 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Kopfzeile wie im Hintergrund-Fenster für weitere Fenster (Marflux: „das Fertig und Abbrechen ist perfekt,
   wende diesen Stil überall an“): „Abbrechen“ links, Titel mittig, Bestätigen fett rechts, ohne Kasten.
   PDF-Editor: „Neue Seite“ als iOS-Liste mit farbigen Symbolen (wie die Einstellungen), „Text einfügen“.
   Fast Scan: „Fertig“ als fettes Wort wie im Hintergrund-Fenster.
   ═══════════════════════════════════════════════════════════════════════ */
.pme-ios-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  min-height: 56px; padding: 6px 8px; flex: none;
}
.pme-ios-nav h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ios-label); text-align: center; letter-spacing: -0.01em; }
.pme-ios-nav-btn {
  -webkit-appearance: none; appearance: none; border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 17px; font-weight: 400; color: var(--ios-tint-ink); padding: 8px 12px; border-radius: 100px;
  justify-self: start; box-shadow: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, transform .2s cubic-bezier(.3,1.5,.5,1);
}
.pme-ios-nav-btn.pme-ios-nav-done { justify-self: end; font-weight: 700; }
.pme-ios-nav-btn:hover { background: var(--ios-fill); }
.pme-ios-nav-btn:active { transform: scale(.94); }
.pme-ios-nav-btn:disabled { color: var(--ios-label3); background: none; transform: none; cursor: default; }
.pme-ios-nav-btn:focus-visible { outline: 2px solid var(--ios-tint); outline-offset: 1px; }

/* Neue Seite */
#pdf-editor-overlay #pme-addpage-box:not(#_a) {
  width: 400px; max-width: calc(100vw - 32px); max-height: calc(100% - 32px); padding: 0 !important;
  border-radius: 22px !important; overflow: hidden auto; display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
#pme-addpage-box .pme-ap-body { padding: 0 16px 18px; }
#pme-addpage-box .pme-ap-label { font-size: 13px; font-weight: 600; color: var(--ios-label2); margin: 2px 4px 8px; }
#pme-addpage-box .pme-ap-list { background: var(--ios-group); border-radius: 14px; overflow: hidden; }
#pme-addpage-box .pme-addpage-opt:not(#_a) {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; margin: 0;
  padding: 9px 14px 9px 12px; border: 0 !important; border-radius: 0; box-shadow: none !important; transform: none !important;
  background-color: transparent; color: var(--ios-label); -webkit-tap-highlight-color: transparent;
  transition: background-color .15s;
}
/* Trennlinie ab dem Text (wie in iOS), nicht unter dem Symbol */
#pme-addpage-box .pme-ap-list > :not(:first-child) {
  background-image: linear-gradient(var(--ios-sep), var(--ios-sep)); background-repeat: no-repeat;
  background-size: calc(100% - 54px) 0.5px; background-position: 54px 0;
}
#pme-addpage-box .pme-addpage-opt::before { display: none !important; }
#pme-addpage-box .pme-addpage-opt:hover, #pme-addpage-box .pme-addpage-opt:active { background-color: var(--ios-menu-press); }
#pme-addpage-box .pme-addpage-opt-icon:not(#_a) {
  width: 30px; height: 30px; border-radius: 7px; border: 0; flex: none;
  display: grid; place-items: center; box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.12);
}
#pme-addpage-box .pme-apo-blank { background: linear-gradient(180deg, #a2a2a8, #7c7c82); }   /* accent-keep: iOS-Grau */
#pme-addpage-box .pme-apo-same  { background: var(--ios-tint); }
#pme-addpage-box .pme-apo-bg    { background: linear-gradient(180deg, #3ea2ff, #0a6cff); }   /* accent-keep: iOS-Blau */
#pme-addpage-box .pme-apo-photo { background: linear-gradient(180deg, #4cd964, #28b446); }   /* accent-keep: iOS-Grün */
#pme-addpage-box .pme-ap-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: left; }
#pme-addpage-box .pme-addpage-opt-title:not(#_a) { font-size: 16px; font-weight: 400; color: var(--ios-label) !important; line-height: 1.25; }
#pme-addpage-box .pme-addpage-opt-sub:not(#_a) { font-size: 13px; font-weight: 400; color: var(--ios-label2); margin-top: 1px; }
#pme-addpage-box .pme-ap-chev { color: var(--ios-label3); flex: none; display: block; transition: transform .25s cubic-bezier(.3,1.3,.5,1); }
#pme-addpage-box .pme-opt-arrow:not(#_a) { margin-left: 0; color: inherit; transform: none !important; display: block; }
#pme-addpage-box .pme-opt-arrow.open .pme-ap-chev { transform: rotate(90deg); }
#pme-addpage-box #pme-inline-bgpicker:not(#_a) {
  border: 0; border-radius: 0; background: transparent; padding: 4px 14px 14px 54px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#pme-addpage-box #pme-inline-bg-grid { gap: 10px; }
#pme-addpage-box .pme-bg-thumb-item:not(#_a) {
  border: 0; border-radius: 8px; transform: none; box-shadow: 0 0 0 0.5px var(--ios-sep), 0 3px 8px -4px rgba(0,0,0,0.4);
  transition: box-shadow .2s ease, transform .3s cubic-bezier(.3,1.5,.5,1);
}
#pme-addpage-box .pme-bg-thumb-item:active { transform: scale(.94); }
#pme-addpage-box .pme-bg-thumb-item.pme-bg-selected:not(#_a) { box-shadow: 0 0 0 2px var(--ios-group), 0 0 0 4.5px var(--ios-tint); }
#pme-addpage-box .pme-bg-thumb-item .pme-bg-check { background: transparent; font-size: 0; }
@media (max-width: 600px) {
  /* Handy: Blatt von unten mit Griff (wie das Hintergrund-Fenster) */
  #pme-addpage-modal { align-items: flex-end !important; }
  #pdf-editor-overlay #pme-addpage-box:not(#_a) {
    width: 100%; max-width: none; max-height: 88%; border-radius: 28px 28px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    transform: translateY(100%); transition: transform .42s cubic-bezier(.32,.72,0,1);
  }
  #pme-addpage-modal.pme-modal-visible #pme-addpage-box:not(#_a) { transform: none; }
  #pme-addpage-box .pme-ios-nav { padding-top: 14px; position: relative; }
  #pme-addpage-box .pme-ios-nav::before {
    content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--ios-label3);
  }
}

/* Text einfügen */
#pme-at-overlay #pme-at-box:not(#_a) { width: 100%; max-width: 440px; padding: 0 !important; border-radius: 22px !important; overflow: hidden; }
#pme-at-box .pme-at-body { padding: 0 16px 16px; }
#pme-at-box #pme-at-input {
  display: block; width: 100%; box-sizing: border-box; min-height: 124px; resize: none; outline: none; -webkit-appearance: none;
  background: var(--ios-group); border: 0; border-radius: 12px; color: var(--ios-label);
  font-family: inherit; font-size: 17px; line-height: 1.4; padding: 12px 14px;
}
#pme-at-box #pme-at-input::placeholder { color: var(--ios-label3); }
#pme-at-box #pme-at-input:focus { box-shadow: 0 0 0 2px var(--ios-tint); }
#pme-at-box #pme-at-hint { font-size: 13px; color: var(--ios-label2); line-height: 1.4; margin: 8px 4px 0; }

/* Fast Scan: „Fertig“ wie im Hintergrund-Fenster (fettes Wort in der Akzentfarbe, ohne Kasten) */
#fast-scan-ui:not(#_f) .fs-done-btn:not(#_a):not(#_b) {
  background: none !important; border: 0 !important; box-shadow: none !important; color: var(--ios-tint-ink) !important;
  font-size: 17px !important; font-weight: 700 !important; padding: 8px 12px; height: auto; border-radius: 100px;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#fast-scan-ui:not(#_f) .fs-done-btn:hover { background: var(--ios-fill) !important; }
#fast-scan-ui:not(#_f) .fs-done-btn:active { transform: scale(.94); }
/* alte Glas-Knöpfe (pdf-editor-v2.css) im Text-Fenster aus: hier sind es Wörter in der Kopfzeile */
#pme-at-box :is(#pme-at-ok, #pme-at-cancel):not(#_a):not(#_b) {
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 100px !important;
  color: var(--ios-tint-ink) !important; padding: 8px 12px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#pme-at-box :is(#pme-at-ok, #pme-at-cancel):not(#_a):not(#_b):hover { background: var(--ios-fill) !important; }
#pme-at-box #pme-at-ok:not(#_a):not(#_b):disabled { color: var(--ios-label3) !important; background: none !important; }
#pme-addpage-box .pme-ap-label { text-align: left; }
#pme-addpage-box .pme-ios-nav-btn:not(#_a) { background: none; border: 0; box-shadow: none; }
#pme-at-box #pme-at-hint { text-align: left; }

/* PDF-Editor „Seite löschen?“ wie die Rückfrage in iOS 26 (Video von Marflux, Notizen-App): Titel und Text
   linksbündig, darunter zwei graue Pillen nebeneinander, „Abbrechen“ in Schriftfarbe, „Löschen“ rot */
#pdf-editor-overlay #pme-delete-box:not(#_a) { width: 300px; max-width: calc(100vw - 48px); padding: 22px 16px 16px !important; border-radius: 30px !important; overflow: hidden; text-align: left; }
#pme-delete-box > div:last-child { padding: 0 !important; }
#pme-delete-box > div:last-child > div:first-child { display: block !important; padding: 0 8px; margin: 0 !important; }
#pme-delete-box .pme-modal-icon, #pme-delete-box .pme-modal-shimmer, #pme-delete-box .pme-modal-sheen { display: none !important; }
#pme-delete-box #pme-delete-title { font-size: 17px !important; font-weight: 600 !important; color: var(--ios-label) !important; letter-spacing: -0.01em; }
#pme-delete-box #pme-delete-msg:not(#_a) { background: none !important; border: 0 !important; padding: 0 8px !important; margin: 6px 0 18px !important; font-size: 15px !important; line-height: 1.35 !important; color: var(--ios-label2) !important; }
#pme-delete-box #pme-delete-msg:empty { display: none; }
#pme-delete-box > div:last-child > div:last-child { gap: 10px !important; }
#pme-delete-box > div:last-child > div:last-child > button:not(#_a) {
  flex: 1; margin: 0 !important; padding: 12px 8px !important; min-height: 48px; border: 0 !important; border-radius: 100px !important;
  background: var(--ios-fill) !important; box-shadow: none !important; font-size: 17px !important; font-family: inherit;
  color: var(--ios-label) !important; font-weight: 500 !important; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .2s cubic-bezier(.3,1.5,.5,1), filter .15s;
}
#pme-delete-box #pme-delete-confirm-btn:not(#_a) { color: #ff453a !important; }   /* accent-keep: iOS-Rot */
html[data-theme="light"] #pme-delete-box #pme-delete-confirm-btn:not(#_a) { color: #ff3b30 !important; }   /* accent-keep: iOS-Rot */
#pme-delete-box > div:last-child > div:last-child > button:not(#_a):active { transform: scale(.96); filter: brightness(1.15); }
#pme-delete-box #pme-delete-sub[hidden] { display: none !important; }

/* Lösch-Rückfragen der Seite (showModernDialog mit Gefahr-Knopf) wie in iOS 26 */
.modern-dialog-content.gg-ios-alert:not(#_a):not(#_b) { max-width: 320px !important; padding: 22px 16px 16px !important; border-radius: 30px !important; text-align: left !important; }
.gg-ios-alert .md-icon, .gg-ios-alert .gl-shimmer { display: none !important; }
.gg-ios-alert > h3:not(#_a) { font-size: 17px !important; font-weight: 600 !important; margin: 0 8px 6px !important; text-align: left !important; color: var(--ios-label) !important; }
.gg-ios-alert > h3 + div { margin: 0 8px 18px !important; text-align: left !important; font-size: 15px !important; line-height: 1.35 !important; color: var(--ios-label2) !important; }
.gg-ios-alert > div:last-child { gap: 10px !important; flex-wrap: nowrap !important; }
.gg-ios-alert .modern-dialog-btn:not(#_a):not(#_b) {
  background: var(--ios-fill) !important; color: var(--ios-label) !important; border: 0 !important; box-shadow: none !important;
  font-size: 17px !important; font-weight: 500 !important; min-height: 48px; min-width: 0 !important; padding: 12px 10px !important; transform: none;
}
.gg-ios-alert .modern-dialog-btn.gl-btn-danger:not(#_a):not(#_b) { color: #ff453a !important; }   /* accent-keep: iOS-Rot */
html[data-theme="light"] .gg-ios-alert .modern-dialog-btn.gl-btn-danger:not(#_a):not(#_b) { color: #ff3b30 !important; }   /* accent-keep: iOS-Rot */
.gg-ios-alert .modern-dialog-btn:not(#_a):not(#_b):active { transform: scale(.96) !important; filter: brightness(1.15); }
.gg-ios-alert .modern-dialog-btn:not(#_a):not(#_b):focus, #pme-delete-box button:not(#_a):focus { outline: none !important; box-shadow: none !important; }
#pme-delete-box > div:last-child > div:last-child > button:not(#_a), .gg-ios-alert .modern-dialog-btn:not(#_a):not(#_b) { flex: 1 1 0 !important; min-width: 0 !important; }

/* Weiß als Schrift-/Stiftfarbe (Wunsch von Marflux, direkt nach Schwarz): feiner Rand, damit der Kreis auch auf
   hellem Grund zu sehen ist */
.gg-ink-swatch.gg-ink-white:not(.active), .pme-swatch.pme-swatch-white:not(.active) { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Presets wie die aktuellen iOS-Fenster (Marflux: „hat oben noch einen Akzent-Strich, soll aussehen wie die
   aktuellen iOS-Popups“): ohne Leuchtstrich und Glas, Titel mittig, „Fertig“ rechts wie im Hintergrund-Fenster,
   Presets als graue iOS-Gruppen, Werte als ruhige Pillen. Handy: Blatt von unten mit Griff.
   ═══════════════════════════════════════════════════════════════════════ */
#presets-panel:not(#_a) { padding: 0 !important; border-radius: 22px !important; width: min(500px, calc(100vw - 32px)); }
#presets-panel::before, #presets-panel::after { display: none !important; }
#presets-panel .presets-header:not(#_a) {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 56px; padding: 6px 8px !important;
}
#presets-panel .presets-title-row { grid-column: 2; justify-content: center; }
#presets-panel .presets-title-row svg { display: none; }
#presets-panel .presets-title-row h3:not(#_a) { font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; color: var(--ios-label) !important; text-align: center; }
#presets-panel .presets-done {
  grid-column: 3; justify-self: end; -webkit-appearance: none; appearance: none; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 700; color: var(--ios-tint-ink); padding: 8px 12px; border-radius: 100px;
  -webkit-tap-highlight-color: transparent; transition: background-color .15s, transform .2s cubic-bezier(.3,1.5,.5,1);
}
#presets-panel .presets-done:hover { background: var(--ios-fill); }
#presets-panel .presets-done:active { transform: scale(.94); }
#presets-panel .presets-subheader:not(#_a) { padding: 2px 20px 12px !important; border: 0 !important; }
#presets-panel .presets-count:not(#_a) { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ios-label2) !important; }
#presets-panel .presets-save-new-btn:not(#_a):not(#_b) {
  background: var(--ios-tint-fill) !important; color: var(--ios-tint-ink) !important; border: 0 !important; box-shadow: none !important;
  font-size: 15px !important; font-weight: 600 !important; padding: 8px 14px !important; border-radius: 100px !important;
}
#presets-panel .presets-save-new-btn::before, #presets-panel .presets-save-new-btn::after { display: none !important; }
#presets-panel .presets-save-new-btn:disabled { opacity: .45; }
#presets-panel .presets-list:not(#_a) { padding: 0 16px 18px !important; gap: 12px; }
#presets-panel .preset-card:not(#_a):not(#_b) {
  background: var(--ios-group) !important; border: 0 !important; box-shadow: none !important; border-radius: 16px !important;
  padding: 14px 14px 14px 16px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important;
}
#presets-panel .preset-card::before, #presets-panel .preset-card::after { display: none !important; }
#presets-panel .preset-card-top { gap: 10px; }
#presets-panel .preset-card-name:not(#_a) { font-size: 17px !important; font-weight: 600 !important; color: var(--ios-label) !important; text-align: left !important; flex: 1; min-width: 0; }
#presets-panel .preset-action-btn:not(#_a):not(#_b) {
  border: 0 !important; box-shadow: none !important; background: var(--ios-fill) !important; color: var(--ios-label) !important;
  min-height: 34px; min-width: 34px; border-radius: 100px !important; font-size: 15px !important; font-weight: 600 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#presets-panel .preset-action-btn.load:not(#_a):not(#_b) { background: var(--ios-tint) !important; color: #fff !important; padding: 0 14px !important; }
#presets-panel .preset-action-btn.del:not(#_a):not(#_b) { color: #ff453a !important; }   /* accent-keep: iOS-Rot */
html[data-theme="light"] #presets-panel .preset-action-btn.del:not(#_a):not(#_b) { color: #ff3b30 !important; }   /* accent-keep: iOS-Rot */
#presets-panel .preset-action-btn::before, #presets-panel .preset-action-btn::after { display: none !important; }
#presets-panel .preset-action-btn svg { width: 14px; height: 14px; }
#presets-panel .preset-action-btn:active { transform: scale(.94); }
#presets-panel .preset-card-values { gap: 6px; margin-top: 12px; }
#presets-panel .preset-chip:not(#_a) {
  background: var(--ios-fill) !important; border: 0 !important; box-shadow: none !important; color: var(--ios-label2) !important;
  font-size: 13px !important; font-weight: 500 !important; padding: 4px 10px !important; border-radius: 100px !important;
}
#presets-panel .preset-chip span:not(#_a) { color: var(--ios-label) !important; font-weight: 600 !important; }
#presets-panel .presets-empty:not(#_a) p { color: var(--ios-label) !important; }
#presets-panel .presets-empty:not(#_a) span { color: var(--ios-label2) !important; }
#presets-panel .presets-empty svg { stroke: var(--ios-label3) !important; }
@media (max-width: 600px) {
  .presets-overlay:has(#presets-panel) { align-items: flex-end !important; padding: 0 !important; }
  #presets-panel:not(#_a) {
    width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 28px 28px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    transform: translateY(100%) !important; transition: transform .42s cubic-bezier(.32,.72,0,1) !important;
  }
  .presets-overlay.active #presets-panel:not(#_a) { transform: none !important; }
  #presets-panel .presets-header { position: relative; padding-top: 14px !important; }
  #presets-panel .presets-header::before {
    content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--ios-label3);
  }
}