/* ═══════════════════════════════════════════════════════════════════════
   GPTGenie · Liquid Glass (angelehnt an iOS 26)
   Wird als letzte Stylesheet-Datei geladen und vereinheitlicht Karten,
   Knöpfe und Regler.

   Performance-Regel: Echte Unschärfe (backdrop-filter) gibt es nur bei
   schwebenden Elementen (Navbar, Dialoge, Fast Scan). Die großen Karten auf
   der Seite sind durchscheinend über einem weichen, festen Farbverlauf –
   ein weicher Verlauf sieht geblurrt genauso aus, kostet aber beim Scrollen
   und Zoomen nichts.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --lg-radius-xl: 32px;
  --lg-radius-lg: 24px;
  --lg-radius: 18px;

  /* Oberflächen */
  --lg-card:
    linear-gradient(180deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.018) 18%, rgba(255,255,255,0) 40%, rgba(var(--a-a855f7,168,85,247),0) 80%, rgba(var(--a-a855f7,168,85,247),0.08) 100%),
    linear-gradient(160deg, rgba(var(--a-2e1e52,46,30,82),0.52) 0%, rgba(var(--a-140f26,20,15,38),0.58) 45%, rgba(var(--a-0e0b1c,14,11,28),0.62) 100%);
  --lg-panel:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 40%, rgba(255,255,255,0.01) 100%);
  --lg-rim: rgba(255,255,255,0.10);
  --lg-rim-top: rgba(255,255,255,0.26);
  --lg-edge:
    inset 0 1px 1px rgba(255,255,255,0.16),
    inset 0 -1px 1px rgba(255,255,255,0.03);
  --lg-card-shadow:
    inset 0 1px 1px rgba(255,255,255,0.14),
    inset 0 -1px 1px rgba(255,255,255,0.03),
    0 14px 30px -18px rgba(0,0,0,0.75),
    0 0 0 0.5px rgba(var(--a-a855f7,168,85,247),0.18);

  /* Knöpfe */
  --lg-btn:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0.04) 100%);
  --lg-btn-hover:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.09) 55%, rgba(255,255,255,0.06) 100%);
  --lg-btn-shadow:
    inset 0 1px 1px rgba(255,255,255,0.22),
    inset 0 -1px 2px rgba(0,0,0,0.18),
    0 6px 16px -8px rgba(0,0,0,0.6);
  --lg-primary:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(135deg, rgb(var(--a-a855f7,168,85,247)) 0%, rgb(var(--a-c026d3,192,38,211)) 100%);
  --lg-primary-shadow:
    inset 0 1px 1px rgba(255,255,255,0.42),
    inset 0 -2px 6px rgba(var(--a-581c87,88,28,135),0.45),
    0 10px 26px -10px rgba(var(--a-c026d3,192,38,211),0.43);
  --lg-ease: cubic-bezier(.3,1.25,.55,1);
}

/* ── Hintergrund: weiche, feste Farbflächen (ein einziger fester Layer) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* vorgerechnetes, kleines Bild statt 4 Verläufen: wird beim Zoomen nicht teuer neu berechnet */
  background: rgb(var(--a-07060f,7,6,15)) var(--gg-ambient, url("/assets/ambient.png")) center / 100% 100% no-repeat;
}
body { background: rgb(var(--a-07060f,7,6,15)); isolation: isolate; }

/* ═══ Navbar ═══ */
.navbar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.02) 100%),
    rgba(var(--a-140e26,20,14,38),0.42) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-top-color: rgba(255,255,255,0.28) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.20),
    inset 0 -1px 1px rgba(255,255,255,0.04),
    0 12px 36px -12px rgba(0,0,0,0.65),
    0 0 0 0.5px rgba(var(--a-a855f7,168,85,247),0.2) !important;
}
.nav-links {
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-indicator {
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06)), rgba(var(--a-a855f7,168,85,247),0.35) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-top-color: rgba(255,255,255,0.4) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 4px 14px -4px rgba(var(--a-a855f7,168,85,247),0.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.navbar .nav-button {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--lg-btn) !important;
  border: 1px solid var(--lg-rim) !important;
  border-top-color: var(--lg-rim-top) !important;
  box-shadow: var(--lg-btn-shadow) !important;
  color: var(--text) !important;
  transition: transform .18s var(--lg-ease), background .15s !important;
}
.navbar .nav-button:hover { background: var(--lg-btn-hover) !important; transform: none !important; }
.navbar .nav-button:active { transform: scale(.95) !important; }
.navbar .nav-button.register-btn {
  background: var(--lg-primary) !important;
  border-color: rgba(var(--a-e9d5ff,233,213,255),0.35) !important;
  border-top-color: rgba(255,255,255,0.55) !important;
  box-shadow: var(--lg-primary-shadow) !important;
  color: #fff !important;
}
@media (max-width: 768px) {
  .nav-content { gap: 8px; }
  .nav-logo { margin-right: auto; }
  .nav-auth { order: 4; }
  .hamburger-menu { order: 5; }
  .nav-links {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 40%),
      rgba(var(--a-160f2a,22,15,42),0.96) !important;
    border-top-color: rgba(255,255,255,0.24) !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.14), 0 24px 50px -16px rgba(0,0,0,0.7) !important;
  }
}

/* ═══ Hero ═══ */
.hero-badge {
  background: var(--lg-btn) !important;
  border: 1px solid var(--lg-rim) !important;
  border-top-color: var(--lg-rim-top) !important;
  box-shadow: var(--lg-btn-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.cta-button {
  transition: transform .2s var(--lg-ease), filter .15s, background .15s !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.cta-button.primary {
  background: var(--lg-primary) !important;
  border: 1px solid rgba(var(--a-e9d5ff,233,213,255),0.35) !important;
  border-top-color: rgba(255,255,255,0.55) !important;
  box-shadow: var(--lg-primary-shadow), 0 0 40px -10px rgba(var(--a-d946ef,217,70,239),0.3) !important;
}
.cta-button.primary:hover { transform: translateY(-1px) !important; filter: brightness(1.08); }
.cta-button.secondary {
  background: var(--lg-btn) !important;
  border: 1px solid var(--lg-rim) !important;
  border-top-color: var(--lg-rim-top) !important;
  box-shadow: var(--lg-btn-shadow) !important;
  color: var(--text) !important;
}
.cta-button.secondary:hover { background: var(--lg-btn-hover) !important; transform: translateY(-1px) !important; }
.cta-button:active { transform: scale(.97) !important; }
.feature-pill {
  background: var(--lg-panel) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top-color: rgba(255,255,255,0.18) !important;
  box-shadow: var(--lg-edge) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Statistik-Kacheln: gleich breit, auf dem Handy 2 × 2 */
.stats-container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px !important;
  max-width: 860px;
  margin: 0 auto;
}
.stat-item {
  min-width: 0 !important;
  width: auto !important;
  background: var(--lg-card) !important;
  border: 1px solid var(--lg-rim) !important;
  border-top-color: var(--lg-rim-top) !important;
  box-shadow: var(--lg-card-shadow) !important;
  border-radius: var(--lg-radius-lg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@media (max-width: 640px) {
  .stats-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; padding: 0 16px; }
  .stat-item { padding: 18px 10px !important; }
  .stat-number { font-size: 26px !important; }
  .stat-label { font-size: 12px !important; }
}

/* ═══ Große Karten (Schritt 1–3) ═══ */
#app-section, #pdf-section, #settings-section {
  background: var(--lg-card) !important;
  border: 1px solid var(--lg-rim) !important;
  border-top-color: var(--lg-rim-top) !important;
  border-radius: var(--lg-radius-xl) !important;
  box-shadow: var(--lg-card-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 26px 26px 26px !important;
  text-align: left;
  overflow: visible !important;
}
#app-section::before, #pdf-section::before, #settings-section::before { display: none !important; }
@media (max-width: 600px) {
  #app-section, #pdf-section, #settings-section { padding: 18px 14px 16px !important; border-radius: 28px !important; }
}

/* Schritt-Überschriften */
.gg-step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  text-align: left;
}
.gg-step-num {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 16px; font-weight: 800; color: #fff;
  background: var(--lg-primary);
  border: 1px solid rgba(var(--a-e9d5ff,233,213,255),0.35);
  border-top-color: rgba(255,255,255,0.55);
  box-shadow: var(--lg-primary-shadow);
}
.gg-step-text { flex: 1; min-width: 0; }
.gg-step-text h2, .gg-step-text h3 {
  margin: 0 !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: left !important;
  color: var(--text);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.gg-step-text p {
  margin: 3px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.45;
  color: var(--text-3) !important;
  text-align: left;
}
.gg-step-tools { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 600px) {
  .gg-step-head { gap: 11px; margin-bottom: 14px; flex-wrap: wrap; }
  .gg-step-num { width: 32px; height: 32px; font-size: 14px; }
  .gg-step-text h2, .gg-step-text h3 { font-size: 18px !important; }
  .gg-step-text p { font-size: 12px !important; }
  .gg-step-tools { width: 100%; }
  .gg-step-tools .gg-chip { flex: 1; justify-content: center; }
}

/* Kleine Glas-Chips (Format, Verlauf …) */
.gg-chip,
#text-info-button.gg-chip, #history-button.gg-chip {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  width: auto !important; height: 36px !important;
  display: inline-flex !important; align-items: center; gap: 6px;
  padding: 0 14px !important;
  border-radius: 100px !important;
  font: 600 13px/1 inherit; font-family: inherit;
  color: var(--text-2) !important;
  cursor: pointer;
  background: var(--lg-btn) !important;
  border: 1px solid var(--lg-rim) !important;
  border-top-color: var(--lg-rim-top) !important;
  box-shadow: var(--lg-btn-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform .18s var(--lg-ease), background .15s, color .15s !important;
}
.gg-chip:hover { background: var(--lg-btn-hover) !important; color: var(--text) !important; transform: none !important; }
.gg-chip:active { transform: scale(.95) !important; }

/* ═══ Allgemeine Glas-Knöpfe ═══ */
.canvas-btn, .pdf-btn, .settings-btn-item, .page-nav-btn, .fast-scan-btn, #download-pdf-button, #edit-pdf-button {
  position: relative;
  display: inline-flex !important;
  align-items: center; justify-content: center; gap: 8px;
  height: 44px;
  padding: 0 18px !important;
  margin: 0 !important;
  border-radius: 100px !important;
  font: 650 14px/1 inherit !important;
  font-family: inherit !important;
  color: var(--text) !important;
  cursor: pointer;
  background: var(--lg-btn) !important;
  border: 1px solid var(--lg-rim) !important;
  border-top-color: var(--lg-rim-top) !important;
  box-shadow: var(--lg-btn-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform .18s var(--lg-ease), background .15s, box-shadow .15s, opacity .2s, filter .15s !important;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: none !important;
  filter: none;
  width: auto;
}
.canvas-btn::after, .pdf-btn::after, .settings-btn-item::after, #download-pdf-button::after { display: none !important; }
.canvas-btn:hover:not(:disabled), .pdf-btn:hover:not(:disabled), .settings-btn-item:hover, .page-nav-btn:hover:not(:disabled), #download-pdf-button:hover:not(:disabled), #edit-pdf-button:hover:not(:disabled) {
  background: var(--lg-btn-hover) !important;
  transform: none !important;
  box-shadow: var(--lg-btn-shadow) !important;
  filter: none !important;
}
.canvas-btn:active:not(:disabled), .pdf-btn:active:not(:disabled), .settings-btn-item:active, .page-nav-btn:active:not(:disabled), .fast-scan-btn:active, #download-pdf-button:active:not(:disabled), #edit-pdf-button:active:not(:disabled) {
  transform: scale(.96) !important;
}
.canvas-btn:disabled, .pdf-btn:disabled, .page-nav-btn:disabled, #download-pdf-button:disabled, #edit-pdf-button:disabled {
  opacity: .38 !important;
  cursor: default !important;
  pointer-events: auto !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1) !important;
}
.canvas-btn:focus-visible, .pdf-btn:focus-visible, .settings-btn-item:focus-visible, .gg-chip:focus-visible, .fast-scan-btn:focus-visible {
  outline: 2px solid rgba(var(--a-d8b4fe,216,180,254),0.9); outline-offset: 2px;
}

/* Hauptaktionen (lila) */
.canvas-btn-save, .pdf-btn-generate, .fast-scan-btn, #download-pdf-button:not(:disabled) {
  color: #fff !important;
  background: var(--lg-primary) !important;
  border-color: rgba(var(--a-e9d5ff,233,213,255),0.35) !important;
  border-top-color: rgba(255,255,255,0.55) !important;
  box-shadow: var(--lg-primary-shadow) !important;
}
.canvas-btn-save:hover, .pdf-btn-generate:hover:not(:disabled), .fast-scan-btn:hover, #download-pdf-button:not(:disabled):hover {
  background: var(--lg-primary) !important;
  box-shadow: var(--lg-primary-shadow) !important;
  filter: brightness(1.1) !important;
}
/* Löschen (rot, dezent) */
.canvas-btn-clear {
  color: #ff7a70 !important;
  background: linear-gradient(180deg, rgba(255,69,58,0.20), rgba(255,69,58,0.07)) !important;
  border-color: rgba(255,105,97,0.26) !important;
  border-top-color: rgba(255,160,150,0.42) !important;
}
.canvas-btn-clear:hover { background: linear-gradient(180deg, rgba(255,69,58,0.28), rgba(255,69,58,0.12)) !important; }
.canvas-btn-undo { width: 44px !important; padding: 0 !important; flex-shrink: 0; }

/* ═══ Fast-Scan-Karte ═══ */
.fs-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 14px 16px;
  margin: 0 0 14px;
  border-radius: var(--lg-radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 45%),
    linear-gradient(120deg, rgba(var(--a-a855f7,168,85,247),0.26) 0%, rgba(var(--a-c026d3,192,38,211),0.12) 55%, rgba(var(--a-4f46e5,79,70,229),0.12) 100%);
  border: 1px solid rgba(var(--a-d8b4fe,216,180,254),0.22);
  border-top-color: rgba(255,255,255,0.32);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.18), 0 10px 22px -14px rgba(var(--a-a855f7,168,85,247),0.4);
  text-align: left;
}
.fs-cta-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 15px;
  color: #fff;
  background: var(--lg-primary);
  border: 1px solid rgba(var(--a-e9d5ff,233,213,255),0.35);
  border-top-color: rgba(255,255,255,0.55);
  box-shadow: var(--lg-primary-shadow);
}
.fs-cta-text { flex: 1; min-width: 0; }
.fs-cta-title { font-size: 15.5px; font-weight: 800; color: #fff; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 8px; }
.fs-cta-count { font-size: 12px; font-weight: 700; color: #6efaaa; font-variant-numeric: tabular-nums; }
.fs-cta-sub { font-size: 12.5px; line-height: 1.4; color: rgba(245,245,247,0.68); margin-top: 2px; }
.fs-cta-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.10); margin-top: 8px; overflow: hidden; max-width: 320px; }
.fs-cta-bar-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #34d37a, #6efaaa); transition: width .5s cubic-bezier(.4,0,.2,1); }
.fs-cta .fast-scan-btn { flex-shrink: 0; height: 46px; padding: 0 20px !important; font-size: 15px !important; }
.fs-cta.fs-cta-done .fs-cta-icon { background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0) 60%), linear-gradient(135deg, #22c55e, #16a34a); box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), 0 8px 20px -8px rgba(34,197,94,0.8); border-color: rgba(187,247,208,0.4); }
.fs-cta.fs-cta-done .fast-scan-btn { background: var(--lg-btn) !important; border-color: var(--lg-rim) !important; border-top-color: var(--lg-rim-top) !important; box-shadow: var(--lg-btn-shadow) !important; }
@media (max-width: 520px) {
  .fs-cta { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .fs-cta-icon { width: 40px; height: 40px; border-radius: 13px; }
  .fs-cta-text { flex: 1 1 calc(100% - 60px); }
  .fs-cta .fast-scan-btn { width: 100% !important; }
  .fs-cta-bar { max-width: none; }
}

/* ═══ Buchstaben-Raster ═══ */
.lp-shell {
  background: var(--lg-panel) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top-color: rgba(255,255,255,0.18) !important;
  box-shadow: var(--lg-edge) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: var(--lg-radius-lg) !important;
}
.lp-tabs {
  background: rgba(0,0,0,0.22) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35) !important;
  border-radius: 100px !important;
  padding: 3px !important;
}
.lp-tab { border-radius: 100px !important; }
.lp-tab-indicator, .lp-tab.active {
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.28), 0 3px 10px -3px rgba(var(--a-a855f7,168,85,247),0.35) !important;
}
.lp-pill { transition: transform .15s var(--lg-ease), background .15s, box-shadow .15s !important; }
.lp-pill:active { transform: scale(.92) !important; }

/* ═══ Zeichenfläche: Canvas links, Werkzeuge rechts ═══ */
#app-section .canvas-section {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  margin: 14px 0 0 !important;
  padding: 20px !important;
  border-radius: var(--lg-radius-lg) !important;
  background: var(--lg-panel) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top-color: rgba(255,255,255,0.18) !important;
  box-shadow: var(--lg-edge) !important;
  text-align: left;
}
#app-section .canvas-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#app-section .canvas-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-top: 34px; }
#app-section .canvas-wrapper {
  width: 212px !important; height: 212px !important;
  border-radius: 26px !important;
  background: rgb(var(--a-1b1430,27,20,48)) !important;
  border: 1px solid rgba(var(--a-c084fc,192,132,252),0.5) !important;
  border-top-color: rgba(var(--a-e9d5ff,233,213,255),0.55) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.14), 0 0 0 4px rgba(var(--a-a855f7,168,85,247),0.10), 0 16px 36px -14px rgba(0,0,0,0.75), 0 0 34px -8px rgba(var(--a-a855f7,168,85,247),0.23) !important;
  margin: 0 !important;
}
#app-section .canvas-wrapper img { margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
#app-section .canvas-header-label {
  background: var(--lg-btn) !important;
  border: 1px solid var(--lg-rim) !important;
  border-top-color: var(--lg-rim-top) !important;
  box-shadow: var(--lg-btn-shadow) !important;
  color: var(--text-2) !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
}
#canvas-letter-label { color: rgb(var(--a-e9d5ff,233,213,255)); font-weight: 800; font-size: 15px; }
#app-section .canvas-info { margin: 0 !important; font-size: 13px !important; line-height: 1.45; color: var(--text-3) !important; text-align: left; }
#app-section .canvas-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
#app-section .canvas-buttons .canvas-btn-save { flex: 1 1 auto; min-width: 130px; }

/* Pinselbreite */
#app-section .brush-controls {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 8px 14px !important;
  border-radius: 100px !important;
  background: rgba(0,0,0,0.18) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3) !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}
#app-section .brush-label { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
#app-section #brush-width-main { flex: 1; min-width: 60px; width: auto !important; }
#app-section .brush-val { font-size: 12px; font-weight: 700; color: var(--text-2); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
#app-section .brush-preview { flex-shrink: 0; background: #fff !important; border-radius: 50%; box-shadow: 0 0 6px rgba(255,255,255,0.35); }
#app-section .brush-action-buttons { display: none !important; }

/* Gespeicherte Versionen */
#app-section #saved-letters-container {
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: var(--lg-radius) !important;
  background: rgba(0,0,0,0.16) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25) !important;
  text-align: left;
}
#app-section #saved-letters-container h2 { font-size: 11px !important; margin: 0 0 10px !important; letter-spacing: .09em; color: var(--text-3) !important; text-align: left !important; }
#app-section #saved-letters { justify-content: flex-start !important; gap: 8px !important; }
#app-section #current-letter { color: rgb(var(--a-e9d5ff,233,213,255)); margin-left: 4px; }

@media (max-width: 700px) {
  #app-section .canvas-section { grid-template-columns: 1fr; gap: 14px; padding: 16px 14px !important; }
  #app-section .canvas-side { padding-top: 0; }
  #app-section .canvas-info { text-align: center; }
  #app-section .canvas-buttons { justify-content: center; flex-wrap: nowrap; }
  #app-section .canvas-buttons .canvas-btn-save { min-width: 0; }
  #app-section .canvas-wrapper { width: min(240px, 66vw) !important; height: min(240px, 66vw) !important; }
}

/* ═══ Schritt 2: Text & PDF ═══ */
#pdf-section h2 { margin: 0 !important; }
#pdf-section .pdf-container { gap: 18px; }
#userText {
  background: rgba(0,0,0,0.20) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--lg-radius) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.35) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
#userText:focus {
  border-color: rgba(var(--a-c084fc,192,132,252),0.55) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.35), 0 0 0 4px rgba(var(--a-a855f7,168,85,247),0.16) !important;
}
.btn-clear-text {
  background: var(--lg-btn) !important;
  border: 1px solid var(--lg-rim) !important;
  border-top-color: var(--lg-rim-top) !important;
  box-shadow: var(--lg-btn-shadow) !important;
  border-radius: 100px !important;
}
.pdf-action-buttons {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px !important;
  margin-top: 2px;
}
.pdf-action-buttons .pdf-btn { width: 100% !important; }
.pdf-btn-generate { height: 50px !important; font-size: 15.5px !important; }
.pdf-btn-bg { height: 50px !important; }
.pdf-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pdf-result-actions .pdf-btn { width: 100% !important; }
#download-pdf-button.pdf-outdated:not(:disabled) {
  background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0) 55%), linear-gradient(135deg, #f59e0b, #d97706) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), 0 10px 24px -10px rgba(245,158,11,0.8) !important;
}

.pdf-placeholder {
  background: rgba(0,0,0,0.14) !important;
  border: 1.5px dashed rgba(255,255,255,0.10) !important;
  border-radius: var(--lg-radius) !important;
}
#page-navigation { gap: 8px; }
@media (max-width: 700px) {
  .pdf-placeholder { min-height: 160px !important; height: 160px !important; aspect-ratio: auto !important; }
}

/* ═══ Schritt 3: Einstellungen ═══ */
#settings-section h3 { text-align: left !important; }
.settings-button-group {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
  margin: 0 0 18px !important;
  flex-wrap: nowrap !important;
}
.settings-button-group .settings-btn-item { width: 100% !important; min-width: 0 !important; color: var(--text) !important; }
#presets-button {
  color: #fff !important;
  background: var(--lg-primary) !important;
  border-color: rgba(var(--a-e9d5ff,233,213,255),0.35) !important;
  border-top-color: rgba(255,255,255,0.55) !important;
  box-shadow: var(--lg-primary-shadow) !important;
}
#presets-button:hover { filter: brightness(1.1) !important; background: var(--lg-primary) !important; box-shadow: var(--lg-primary-shadow) !important; }
#reset-settings-button { color: #ff8a80 !important; }

.settings-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.settings-group {
  display: flex; flex-direction: column; gap: 0;
  padding: 6px;
  border-radius: var(--lg-radius-lg);
  background: var(--lg-panel);
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.18);
  box-shadow: var(--lg-edge);
}
.settings-group-title {
  margin: 8px 12px 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(var(--a-d8b4fe,216,180,254),0.8);
  text-align: left;
}
@media (max-width: 760px) { .settings-groups { grid-template-columns: 1fr; } }
/* Rechte Spalte: „Zeilen“ und „Ränder“ untereinander (vorher eine lange Gruppe „Seite & Zeilen“) */
.settings-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Ränder paarweise nebeneinander (links | rechts, oben | unten); ist die Gruppe zu schmal, untereinander */
.settings-group .gg-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); column-gap: 4px; }
.settings-group .gg-pair > .slider-container { min-width: 0; }
.settings-group .gg-pair > .slider-container::before {
  content: '';
  position: absolute; top: -1px; left: 12px; right: 12px;
  height: 1px; background: rgba(255,255,255,0.06);
}
/* erstes Paar direkt unter der Überschrift: keine Linie über der ersten Reihe (oben abgeschnitten) */
.settings-group-title + .gg-pair { clip-path: inset(0 -40px -40px -40px); }
.settings-group .gg-pair + .slider-container::before {
  content: '';
  position: absolute; top: 0; left: 12px; right: 12px;
  height: 1px; background: rgba(255,255,255,0.06);
}

/* Speicher-Hinweis oben rechts (automatisch gespeichert) */
.settings-save-state {
  flex-shrink: 0; align-self: flex-start;
  font-size: 12px; line-height: 1; padding: 7px 11px; border-radius: 99px;
  color: var(--text-3); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}
.settings-save-state { display: inline-flex; align-items: center; gap: 6px; }
/* Icon als Maske, damit es die Farbe des Zustands annimmt */
.settings-save-state::before {
  content: ''; flex-shrink: 0; width: 13px; height: 13px; background: #30d158;
  -webkit-mask: var(--ss-icon) center / contain no-repeat; mask: var(--ss-icon) center / contain no-repeat;
  --ss-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12.3l2.7 2.7L16.2 9.5'/%3E%3C/svg%3E");
}
.settings-save-state[data-state="saving"]::before {
  background: var(--text-3);
  --ss-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.2-8.6'/%3E%3C/svg%3E");
  animation: gg-ss-spin .9s linear infinite;
}
.settings-save-state[data-state="error"] { color: #ff8a80; }
.settings-save-state[data-state="error"]::before {
  background: #ff8a80;
  --ss-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
}
@keyframes gg-ss-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  #settings-section .gg-step-text { flex-basis: calc(100% - 45px); }
  .settings-save-state { order: 3; margin-left: 43px; }
}

/* Regler + Vorschau nebeneinander, auf schmalen Bildschirmen die Vorschau oben (beim Scrollen sichtbar) */
.settings-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.settings-body > .settings-groups { grid-column: 1; grid-row: 1; }
.settings-preview {
  grid-column: 2; grid-row: 1;
  position: sticky; top: 100px;   /* unter der Navigationsleiste */
  padding: 6px 6px 8px;
  border-radius: var(--lg-radius-lg);
  background: var(--lg-panel);
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.18);
  box-shadow: var(--lg-edge);
}
.settings-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 2px 8px 0; }
.settings-preview-head .settings-group-title { margin: 0 0 0 12px; }
.settings-preview-zoom {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px;
  font: 600 12px/1 inherit; color: var(--text-2); cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.settings-preview-zoom:hover { background: rgba(var(--a-a855f7,168,85,247),0.22); color: #fff; }
.settings-preview-zoom:focus-visible, .settings-preview-page:focus-visible { outline: 2px solid rgba(var(--a-c084fc,192,132,252),0.9); outline-offset: 2px; }
.settings-preview-page {
  display: block; position: relative; width: 100%; padding: 0; margin: 0;
  border: 0; border-radius: 10px; overflow: hidden; cursor: zoom-in;
  background: #fff; box-shadow: 0 6px 22px -8px rgba(0,0,0,0.6);
  aspect-ratio: 595 / 842;
}
.settings-preview-page canvas { display: block; width: 100% !important; height: auto !important; }
.settings-preview-note {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 18px;
  font-size: 13px; line-height: 1.45; color: #555; text-align: center; background: #fafafa;
}
.settings-preview-note[hidden] { display: none; }
@media (max-width: 980px) {
  .settings-body { grid-template-columns: minmax(0, 1fr); }
  .settings-body > .settings-groups { grid-row: 2; }
  /* klebt beim Scrollen oben; deckend, damit die Regler nicht durchscheinen */
  .settings-preview { grid-column: 1; grid-row: 1; top: 10px; z-index: 5; background: rgb(var(--a-120d24,18,13,36)); box-shadow: var(--lg-edge), 0 12px 30px -10px rgba(0,0,0,0.8); }
  /* oberer Teil der Seite (Ränder, erste Zeilen); Tippen vergrößert */
  .settings-preview-page { aspect-ratio: auto; height: min(26vh, 230px); }
  .settings-preview-page::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
    background: linear-gradient(rgba(255,255,255,0), rgba(0,0,0,0.12));
  }
}
@media (max-width: 980px) and (min-width: 601px) {
  .settings-preview-page { height: min(34vh, 320px); }
}

/* Vorschau groß (Vollbild mit Zoom) */
html.gg-pv-open, html.gg-pv-open body { overflow: hidden !important; }
.gg-pv-overlay {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; flex-direction: column;
  background: rgba(var(--a-04030a,4,3,10),0.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .2s ease;
}
.gg-pv-overlay.active { opacity: 1; }
.gg-pv-bar {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
}
.gg-pv-title { font-size: 15px; font-weight: 700; color: var(--text); }
.gg-pv-tools { display: flex; align-items: center; gap: 6px; }
.gg-pv-btn {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 50%; color: var(--text); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
}
.gg-pv-btn:hover:not(:disabled) { background: rgba(255,255,255,0.16); }
.gg-pv-btn:disabled { opacity: .35; cursor: default; }
.gg-pv-btn:focus-visible { outline: 2px solid rgba(var(--a-c084fc,192,132,252),0.9); outline-offset: 2px; }
.gg-pv-close { margin-left: 6px; }
.gg-pv-level { min-width: 48px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.gg-pv-body { flex: 1; min-height: 0; display: flex; }
.gg-pv-scroll {
  flex: 1; min-width: 0; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  display: flex; padding: 12px 12px max(12px, env(safe-area-inset-bottom));
}
/* Regler neben der großen Vorschau (PC rechts, Handy darunter) */
.gg-pv-side {
  flex: 0 0 380px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 4px 14px max(14px, env(safe-area-inset-bottom)) 4px;
}
.gg-pv-overlay.no-side .gg-pv-side { display: none; }
.gg-pv-side .settings-button-group { margin: 0 0 12px !important; }
html.gg-pv-open .presets-overlay { z-index: 10060 !important; }   /* Presets über der großen Vorschau */
.gg-pv-side .settings-groups { display: flex; flex-direction: column; gap: 12px; }
.gg-pv-side .settings-groups { align-items: stretch; width: 100%; }
.gg-pv-side .settings-group { width: 100% !important; max-width: none !important; box-sizing: border-box; background: rgb(var(--a-120d24,18,13,36)); }
@media (max-width: 760px) {
  .gg-pv-body { flex-direction: column; }
  .gg-pv-scroll { flex: 0 0 auto; height: 44vh; padding-bottom: 8px; }
  .gg-pv-side { flex: 1 1 auto; padding: 4px 10px max(12px, env(safe-area-inset-bottom)); }
}
.gg-pv-page {
  display: block; margin: auto; height: auto; flex-shrink: 0;
  border-radius: 6px; background: #fff; box-shadow: 0 18px 50px -12px rgba(0,0,0,0.8);
  cursor: zoom-in;
}
.gg-pv-overlay.zoomed .gg-pv-page { cursor: grab; }
.gg-pv-scroll.gg-pv-dragging, .gg-pv-scroll.gg-pv-dragging .gg-pv-page { cursor: grabbing; }
/* Zwei-Finger-Zoom macht settings-preview.js selbst (nur die Vorschau, nicht die ganze Seite) */
.gg-pv-scroll { touch-action: pan-x pan-y; }
/* Vorschau ist eine <canvas>: die Regel „canvas { touch-action: none }“ (fürs Zeichnen, main.css) hier aufheben,
   sonst geht Verschieben mit einem Finger nicht (große Ansicht) bzw. die Seite scrollt nicht (kleine Vorschau) */
.gg-pv-page { touch-action: pan-x pan-y; }
#settings-preview-canvas { touch-action: auto; }

/* „?“-Hilfe neben jedem Regler */
.gg-help-btn {
  flex-shrink: 0; width: 24px; height: 24px; margin: 0 auto 0 6px; padding: 0;   /* 24 px: Mindestgröße für Tippflächen */
  display: inline-grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06); color: var(--text-2);
  font: 700 12px/1 inherit; cursor: pointer;
  position: relative;
}
.gg-help-btn::before { content: ''; position: absolute; inset: -10px; }   /* größere Tippfläche */
.gg-help-btn:hover, .gg-help-btn[aria-expanded="true"] { background: rgba(var(--a-a855f7,168,85,247),0.28); color: #fff; border-color: rgba(var(--a-c084fc,192,132,252),0.5); }
.gg-help-btn:focus-visible { outline: 2px solid rgba(var(--a-c084fc,192,132,252),0.9); outline-offset: 2px; }
.gg-help-text {
  margin: 10px 0 0 !important; padding: 9px 11px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-2); text-align: left;
  background: rgba(var(--a-a855f7,168,85,247),0.10); border: 1px solid rgba(var(--a-c084fc,192,132,252),0.18);
}
.gg-help-text[hidden] { display: none; }

/* Regler-Zeilen wie eine iOS-Liste: getrennt durch feine Linien */
.settings-group .slider-container,
.settings-group .color-picker-container {
  margin: 0 !important;
  padding: 12px 12px 14px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative;
}
.settings-group .slider-container + .slider-container::before,
.settings-group .color-picker-container + .slider-container::before {
  content: '';
  position: absolute; top: 0; left: 12px; right: 12px;
  height: 1px; background: rgba(255,255,255,0.06);
}
.settings-group .slider-container:hover { background: rgba(255,255,255,0.03) !important; }
.settings-group .slider-container label { margin-bottom: 10px !important; }
.settings-group .slider-label-text { font-size: 13px !important; color: var(--text-2) !important; }
.slider-value {
  background: rgba(var(--a-a855f7,168,85,247),0.18) !important;
  border: 1px solid rgba(var(--a-c084fc,192,132,252),0.28) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.14) !important;
  color: rgb(var(--a-f3e8ff,243,232,255)) !important;
  font-variant-numeric: tabular-nums;
  border-radius: 100px !important;
}
.color-picker-wrapper { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: space-between; gap: 12px; }
.color-picker-wrapper label { font-size: 13px; color: var(--text-2); }
#letterColor {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,0.7) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 4px 12px -4px rgba(0,0,0,0.6) !important;
  padding: 0 !important;
  cursor: pointer;
}

/* Schieberegler: Aussehen in slider-glass.css */
.slider-container input[type="range"].slider-locked { opacity: 1; }

/* ═══ FAQ: eine gemeinsame Glas-Karte mit Trennlinien (wie gruppierte Listen in iOS) ═══ */
.faq-section { max-width: 780px; }
.faq-container { text-align: center; }
.faq-eyebrow {
  display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgb(var(--a-d8b4fe,216,180,254));
  background: rgba(var(--a-a855f7,168,85,247),0.12); border: 1px solid rgba(var(--a-c084fc,192,132,252),0.18);
}
.faq-title { background: none; -webkit-text-fill-color: currentColor; margin-bottom: 8px !important; }
.faq-sub { margin: 0 auto 26px; max-width: 460px; font-size: 15px; line-height: 1.5; color: var(--text-2); }   /* --text-3 war zu blass (Kontrast 3,8 statt mind. 4,5) */
.faq-list {
  text-align: left; border-radius: 24px; overflow: hidden; padding: 6px;
  background: var(--lg-card);
  border: 1px solid rgba(255,255,255,0.08); border-top-color: rgba(255,255,255,0.16);
  box-shadow: var(--lg-card-shadow);
}
.faq-list .faq-item {
  position: relative; margin: 0 !important; border-radius: 18px !important;
  background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transition: background .25s ease, border-color .25s ease !important;
}
/* feine Trennlinie zwischen den Fragen (nicht neben einer geöffneten) */
.faq-list .faq-item + .faq-item::before {
  content: ''; position: absolute; top: -1px; left: 20px; right: 20px; height: 1px;
  background: rgba(255,255,255,0.09); transition: opacity .25s ease;
}
.faq-list .faq-item.active::before, .faq-list .faq-item.active + .faq-item::before { opacity: 0; }
@media (hover: hover) {
  .faq-list .faq-item:not(.active):hover { background: rgba(255,255,255,0.035) !important; }
  .faq-list .faq-item:not(.active):hover .faq-toggle { background: var(--lg-btn-hover); color: #fff; }
}
.faq-list .faq-item.active {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)), rgba(var(--a-a855f7,168,85,247),0.07) !important;
  border-color: rgba(255,255,255,0.08) !important; border-top-color: rgba(255,255,255,0.14) !important;
}
.faq-list .faq-question { padding: 17px 16px 17px 20px; gap: 14px; outline: none; border-radius: 18px; }
.faq-list .faq-question:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--a-d8b4fe,216,180,254),0.7); }
.faq-list .faq-question h3 { font-size: 15.5px; font-weight: 650; line-height: 1.4; letter-spacing: -0.005em; }
/* Knopf rechts: kleines Glas mit sauber gezeichnetem Plus, wird beim Öffnen zum Minus */
.faq-toggle {
  position: relative; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  display: block !important; font-size: 0 !important; color: rgba(245,245,247,0.8);
  background: var(--lg-btn); border: 1px solid rgba(255,255,255,0.10); border-top-color: rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 10px -6px rgba(0,0,0,0.6);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .45s var(--gl-spring, cubic-bezier(.34,1.3,.64,1)) !important;
}
.faq-toggle::before, .faq-toggle::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  border-radius: 2px; background: currentColor; transition: transform .45s var(--gl-spring, cubic-bezier(.34,1.3,.64,1));
}
.faq-toggle::after { transform: rotate(90deg); }
.faq-item.active .faq-toggle {
  transform: rotate(180deg) !important; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04)), rgba(var(--a-a855f7,168,85,247),0.55);
  border-color: rgba(var(--a-e9d5ff,233,213,255),0.25);
}
.faq-item.active .faq-toggle::after { transform: rotate(0deg); }
/* Antwort klappt weich auf (Höhe über Grid, kein fester Höchstwert) */
.faq-list .faq-answer {
  display: grid; grid-template-rows: 0fr; max-height: none !important; padding: 0 !important;
  transition: grid-template-rows .4s cubic-bezier(.2,.8,.2,1), padding .4s cubic-bezier(.2,.8,.2,1) !important;
}
.faq-list .faq-item.active .faq-answer { grid-template-rows: 1fr; padding-bottom: 18px !important; }
.faq-list .faq-answer > p {
  min-height: 0; overflow: hidden; padding: 0 60px 0 20px !important;
  font-size: 14.5px; line-height: 1.65; color: var(--text-2);
  opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.faq-list .faq-item.active .faq-answer > p { opacity: 1; transform: none; transition-delay: .06s; }
@media (max-width: 600px) {
  .faq-list { border-radius: 22px; padding: 4px; }
  .faq-list .faq-question { padding: 15px 12px 15px 16px; }
  .faq-list .faq-question h3 { font-size: 15px; }
  .faq-list .faq-answer > p { padding: 0 16px !important; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-list .faq-answer, .faq-list .faq-answer > p, .faq-toggle, .faq-toggle::before, .faq-toggle::after { transition: none !important; }
}

/* ═══ Schwebende Elemente: echtes Glas ═══ */
.toast, .custom-toast, #toast-container > * {
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
}

@media (prefers-reduced-transparency: reduce) {
  .navbar { background: rgba(var(--a-140e26,20,14,38),0.96) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* Navbar-Markierung: nur transform animieren (kein Neuzeichnen) */
.nav-indicator {
  transition: transform .38s var(--lg-ease), opacity .2s ease !important;
  will-change: transform;
  contain: strict;
}
.nav-link { transition: none !important; }

/* Ziehbare Glas-Blase (js/glass-slider.js, wie iOS 26) in Navbar, Feedback-Reitern und Buchstaben-Reitern:
   gedrückt = klares, dickeres Glas über der Schrift (bricht Schrift und Hintergrund) */
.nav-links, .fb-tabs, .lp-tabs, .bgs-tabs { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.nav-links .nav-link, .fb-tabs .fb-tab, .lp-tabs .lp-tab, .bgs-tabs button { -webkit-user-drag: none; }
.nav-links .nav-indicator.gl-js, .fb-tabs .fb-indicator.gl-js, .lp-tabs .lp-tab-indicator.gl-js, .bgs-tabs .bgs-tabs-lens.gl-js {
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}
.lp-tabs .lp-tab-indicator.gl-js { will-change: transform; }
.lp-tabs .lp-tab-indicator.gl-lifted::before { opacity: 0; }
.nav-links .nav-indicator.gl-lifted, .fb-tabs .fb-indicator.gl-lifted, .lp-tabs .lp-tab-indicator.gl-lifted, .bgs-tabs .bgs-tabs-lens.gl-lifted {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0.03) 100%),
    rgba(var(--a-a855f7,168,85,247),0.03) !important;
  border-color: rgba(255,255,255,0.28) !important;
  border-top-color: rgba(255,255,255,0.7) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.6),
    inset 0 -1px 2px rgba(255,255,255,0.2),
    inset 0 0 12px rgba(255,255,255,0.10),
    inset 0 0 0 0.5px rgba(255,255,255,0.3) !important;
  /* kein Schatten nach außen: der verschiebt in Chrome die Glaslinse (man sah eine verrutschte Form in der Blase) */
}
/* Safari (iPhone) und Firefox: keine Lichtbrechung möglich (js/navbar-glass.js setzt dort kein .nav-glass),
   darum klares Glas aus leichter Unschärfe und kräftigeren Farben, sonst sähe man nur den Rand */
html:not(.nav-glass):not(.gg-perf) :is(.nav-links .nav-indicator, .fb-tabs .fb-indicator, .lp-tabs .lp-tab-indicator, .bgs-tabs .bgs-tabs-lens).gl-lifted {
  -webkit-backdrop-filter: blur(0.6px) saturate(1.6) brightness(1.1) !important;
  backdrop-filter: blur(0.6px) saturate(1.6) brightness(1.1) !important;
}
/* Safari/Firefox: Lupe in der angehobenen Blase = vergrößerte Kopie der Einträge (js/glass-slider.js, softLens) */
.gl-mag {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; overflow: hidden;
  pointer-events: none; opacity: 0;
  /* leichter Schleier über dem verwischten Original, darauf liegt die scharfe, vergrößerte Kopie (wie im iOS-Video) */
  background: rgba(var(--a-1c1332,28,19,50),0.62);
}
.gl-mag-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
/* Rand der Linse: dort verzieht echtes Glas das Bild, hier wird die Kopie zum Rand hin weich */
.gl-mag::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  -webkit-backdrop-filter: blur(1.4px) saturate(1.4) brightness(1.12); backdrop-filter: blur(1.4px) saturate(1.4) brightness(1.12);
  -webkit-mask: linear-gradient(90deg, #000, transparent 9px, transparent calc(100% - 9px), #000),
                linear-gradient(180deg, #000, transparent 7px, transparent calc(100% - 7px), #000);
  mask: linear-gradient(90deg, #000, transparent 9px, transparent calc(100% - 9px), #000),
        linear-gradient(180deg, #000, transparent 7px, transparent calc(100% - 7px), #000);
}
.gl-mag-layer > * { transition: none !important; animation: none !important; pointer-events: none !important; }
.nav-indicator::after { transition: opacity .28s ease; }
.nav-links .nav-indicator.gl-lifted::after { opacity: .35; }


/* ═══ Startbereich kompakter ═══ */
#home { padding: 128px 24px 36px !important; }
@media (max-width: 600px) { #home { padding: 104px 16px 28px !important; } }
.hero-title { font-size: clamp(34px, 5.4vw, 60px) !important; }
.hero-features .feature-pill #avg-rating-display { font-weight: 700; color: #fcd34d; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* So funktioniert's – drei Schritte */
.how-section { position: relative; z-index: 1; max-width: 900px; margin: 0 auto 56px; padding: 0 20px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.how-step {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 18px 18px 16px;
  border-radius: var(--lg-radius-lg);
  background: var(--lg-card);
  border: 1px solid var(--lg-rim);
  border-top-color: var(--lg-rim-top);
  box-shadow: var(--lg-card-shadow);
}
.how-step strong { font-size: 15px; color: var(--text); margin-top: 6px; }
.how-step span:not(.how-num) { font-size: 13px; line-height: 1.5; color: var(--text-3); }
.how-num {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  font-weight: 800; font-size: 14px; color: #fff;
  background: var(--lg-primary); box-shadow: var(--lg-primary-shadow);
}
@media (max-width: 700px) {
  .how-steps { grid-template-columns: 1fr; gap: 8px; }
  .how-step { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; padding: 14px 16px; }
  .how-step strong { margin: 0; }
  .how-step span:not(.how-num) { flex-basis: 100%; padding-left: 42px; margin-top: -2px; }
}

/* Ratgeber-Karten */
.guide-section { position: relative; z-index: 1; max-width: 900px; margin: 40px auto 60px; padding: 0 20px; }
.guide-title { font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.guide-sub { color: var(--text-2); font-size: 14px; margin-bottom: 20px; }   /* --text-3 war zu blass (Kontrast 3,8) */
.guide-title-sub { font-size: clamp(20px, 3.2vw, 26px); margin-top: 36px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; text-align: left; }
.guide-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 11px 20px; border-radius: 999px; font-weight: 700; font-size: 14px; color: #fff; text-decoration: none; background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)), rgba(var(--a-a855f7,168,85,247),0.28); border: 1px solid rgba(var(--a-c084fc,192,132,252),0.38); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 20px rgba(0,0,0,0.25); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease; }
.guide-all:hover { transform: translateY(-2px); background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05)), rgba(var(--a-a855f7,168,85,247),0.38); }
.guide-all svg { transition: transform .25s ease; }
.guide-all:hover svg { transform: translateX(3px); }
.guide-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px; border-radius: var(--lg-radius-lg); text-decoration: none;
  background: var(--lg-card); border: 1px solid var(--lg-rim); border-top-color: var(--lg-rim-top);
  box-shadow: var(--lg-card-shadow);
  transition: transform .18s var(--lg-ease), border-color .15s;
}
.guide-card:hover { transform: translateY(-2px); border-color: rgba(var(--a-c084fc,192,132,252),0.4); }
.guide-card .gc-icon { font-size: 22px; margin-bottom: 4px; }
.guide-card .gc-title { font-weight: 700; color: var(--text); font-size: 15px; }
.guide-card .gc-text { color: var(--text-3); font-size: 13px; line-height: 1.5; }

/* „Was ist GPTGenie?“ unter dem Werkzeug: sichtbarer Lesetext (Startseite) */
.about-section { max-width: 780px; }
.about-section .faq-eyebrow { margin-bottom: 10px; }
.about-body { text-align: left; color: var(--text-2); font-size: 15.5px; line-height: 1.7; }
.about-body p { margin: 0 0 14px; }
.about-body h3 { color: var(--text); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 28px 0 10px; }
.about-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.about-use { padding: 16px 18px; border-radius: var(--lg-radius-lg); background: var(--lg-card); border: 1px solid var(--lg-rim); border-top-color: var(--lg-rim-top); box-shadow: var(--lg-card-shadow); }
.about-use h4 { color: var(--text); font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.about-use p { margin: 0; font-size: 14px; line-height: 1.6; }
.about-examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; align-items: start; }
.about-example { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text-2); font-size: 13.5px; line-height: 1.45; }
.about-example img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--lg-rim); background: #fff; }
.about-example:hover span { color: var(--text); text-decoration: underline; }
.about-note { font-size: 13px; color: var(--text-3); margin-top: 10px !important; }
.about-links a { font-weight: 600; }
@media (max-width: 560px) { .about-body { font-size: 15px; } .about-body h3 { font-size: 18px; } }

/* Hover-Fix: farbige Knöpfe behalten beim Überfahren ihre Farbe
   (die allgemeine Hover-Regel war spezifischer und machte sie dunkel) */
.canvas-btn.canvas-btn-save:hover:not(:disabled) {
  background: var(--lg-primary) !important;
  box-shadow: var(--lg-primary-shadow) !important;
  filter: brightness(1.1) !important;
}
.canvas-btn.canvas-btn-clear:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(255,69,58,0.30), rgba(255,69,58,0.13)) !important;
}

/* ═══ Bewertungs-Fenster ═══ */
.feedback-container {
  max-width: 600px !important;
  height: auto;
  max-height: min(88vh, 820px) !important; max-height: min(88dvh, 820px) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 22%, rgba(255,255,255,0) 45%),
    linear-gradient(160deg, rgba(var(--a-34225c,52,34,92),0.94) 0%, rgba(var(--a-161028,22,16,40),0.97) 45%, rgba(var(--a-0e0a1c,14,10,28),0.98) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(255,255,255,0.12) !important;
  border-top-color: rgba(255,255,255,0.30) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 0 30px 80px -20px rgba(0,0,0,0.8), 0 0 0 0.5px rgba(var(--a-a855f7,168,85,247),0.25) !important;
}
.feedback-container::before, .feedback-container::after { display: none !important; }
@media (max-width: 599px) {
  .feedback-container { max-height: 92vh !important; max-height: 92dvh !important; border-radius: 30px 30px 0 0 !important; }
}

/* Kopfzeile: Reiter + Schließen */
.fb-top { display: flex; align-items: center; gap: 10px; margin: 18px 18px 0; flex-shrink: 0; position: relative; z-index: 5; }
@media (max-width: 599px) { .fb-top { margin-top: 10px; } }
.fb-top .fb-tabs { flex: 1; margin: 0 !important; background: rgba(0,0,0,0.25) !important; border-color: rgba(255,255,255,0.07) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.35) !important; }
.fb-tab { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 11px 12px !important; font-size: 14px !important; }
.fb-tab svg { flex-shrink: 0; opacity: .85; }
.fb-indicator {
  left: 3px !important;
  width: calc(50% - 3px) !important;
  transform: translateX(0);
  transition: transform .38s var(--lg-ease) !important;
  will-change: transform;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.05) 60%), linear-gradient(135deg, rgba(var(--a-a855f7,168,85,247),0.85), rgba(var(--a-c026d3,192,38,211),0.75)) !important;
  border: 1px solid rgba(var(--a-e9d5ff,233,213,255),0.3) !important;
  border-top-color: rgba(255,255,255,0.5) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 6px 16px -6px rgba(var(--a-c026d3,192,38,211),0.35) !important;
}
.fb-indicator::before, .fb-indicator::after { display: none !important; }
.fb-tabs[data-active="reviews"] .fb-indicator { transform: translateX(100%); }
.fb-tabs.single .fb-indicator { width: calc(100% - 6px) !important; transform: none !important; }
.fb-top-close {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--text-2);
  background: var(--lg-btn); border: 1px solid var(--lg-rim); border-top-color: var(--lg-rim-top);
  box-shadow: var(--lg-btn-shadow);
  transition: transform .15s ease, background .15s, color .15s;
}
.fb-top-close:hover { background: var(--lg-btn-hover); color: #fff; }
.fb-top-close:active { transform: scale(.92); }

/* doppelte Überschriften + Schließen-Knöpfe in den Panels ausblenden */
.fb-write-header, .fb-reviews-header { display: none !important; }

.fb-panels { display: flex; flex-direction: column; }
.fb-panel { height: auto !important; padding: 22px 24px 26px !important; }
.fb-panel.active { flex: 1; min-height: 0; overflow-y: auto; }

/* Schreiben */
.fb-subtitle { text-align: center; font-size: 15px !important; color: var(--text-2) !important; margin: 4px 0 6px !important; }
.fb-stars { gap: 10px !important; margin: 14px 0 4px !important; justify-content: center; }
.fb-star { font-size: 46px !important; line-height: 1; color: rgba(255,255,255,0.12) !important; text-shadow: none !important; transition: transform .18s var(--lg-ease), color .15s !important; }
.fb-star.active { color: #fbbf24 !important; text-shadow: 0 0 18px rgba(251,191,36,0.45) !important; }
.fb-star-hint { text-align: center; font-size: 13px; font-weight: 700; color: var(--text-3); min-height: 20px; margin-bottom: 16px; transition: color .15s; }
.fb-star-hint.on { color: #fcd34d; }
#feedback-text {
  min-height: 150px;
  font-size: 14.5px !important;
  background: rgba(0,0,0,0.22) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.35) !important;
}
#feedback-text:focus { border-color: rgba(var(--a-c084fc,192,132,252),0.55) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.35), 0 0 0 4px rgba(var(--a-a855f7,168,85,247),0.16) !important; }
.feedback-buttons { display: grid !important; grid-template-columns: auto 1fr; gap: 10px !important; margin-top: 16px !important; }
.btn-cancel, .btn-submit { height: 50px !important; border-radius: 100px !important; font: 700 15px/1 inherit !important; font-family: inherit !important; padding: 0 22px !important; transition: transform .15s ease, filter .15s, opacity .2s !important; }
.btn-cancel { background: var(--lg-btn) !important; border: 1px solid var(--lg-rim) !important; border-top-color: var(--lg-rim-top) !important; box-shadow: var(--lg-btn-shadow) !important; color: var(--text) !important; }
.btn-submit { background: var(--lg-primary) !important; border: 1px solid rgba(var(--a-e9d5ff,233,213,255),0.35) !important; border-top-color: rgba(255,255,255,0.55) !important; box-shadow: var(--lg-primary-shadow) !important; color: #fff !important; }
.btn-submit:hover:not(:disabled) { filter: brightness(1.08); transform: none !important; }
.btn-cancel:active, .btn-submit:active:not(:disabled) { transform: scale(.97) !important; }
.btn-submit:disabled { opacity: .4 !important; box-shadow: inset 0 1px 1px rgba(255,255,255,0.25) !important; }

/* Bewertungen: Zusammenfassung links (Schnitt, Sterne, Anzahl), rechts Verteilung 5 bis 1 Sterne */
.average-rating {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 22px;
  text-align: left !important;
  padding: 18px 20px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)), rgba(var(--a-a855f7,168,85,247),0.12) !important;
  border: 1px solid rgba(var(--a-d8b4fe,216,180,254),0.2) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.16) !important;
  margin-bottom: 16px !important;
  --ar-gold: #FFD60A;
  --ar-empty: rgba(255,255,255,0.16);
  --ar-track: rgba(255,255,255,0.09);
  --ar-muted: rgba(245,245,247,0.5);
}
.average-rating::before { display: none !important; }
.ar-score { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 104px; }
.average-rating-number { font-size: 46px !important; line-height: 1 !important; margin: 0 !important; font-variant-numeric: tabular-nums; }
.average-rating-stars { display: flex; gap: 2px; margin: 0 !important; font-size: 17px !important; letter-spacing: 0 !important; line-height: 1; filter: none !important; }
.ar-star {
  background: linear-gradient(90deg, var(--ar-gold) var(--f), var(--ar-empty) var(--f));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.average-rating-count { margin: 0 !important; font-size: 12px !important; color: var(--ar-muted) !important; white-space: nowrap; }
.ar-bars { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ar-row { display: grid; grid-template-columns: 26px 1fr 22px; align-items: center; gap: 8px; font-size: 12px; color: var(--ar-muted); font-variant-numeric: tabular-nums; }
.ar-row-label { display: inline-flex; align-items: center; gap: 2px; }
.ar-row-star { color: var(--ar-gold); font-size: 11px; }
.ar-row-n { text-align: right; }
.ar-track { height: 7px; border-radius: 99px; background: var(--ar-track); overflow: hidden; }
.ar-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FFC300, var(--ar-gold)); transition: width .5s ease; }
@media (max-width: 360px) {
  .average-rating { column-gap: 14px; padding: 16px 14px !important; }
  .ar-score { min-width: 0; }
  .average-rating-number { font-size: 40px !important; }
}
.feedbacks-list { display: flex; flex-direction: column; gap: 10px; }
.feedback-item {
  text-align: left !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top-color: rgba(255,255,255,0.16) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1) !important;
}
.feedback-item-header { margin-bottom: 6px !important; }
.feedback-comment { text-align: left !important; font-size: 14px !important; line-height: 1.55 !important; color: var(--text) !important; margin: 0 0 6px !important; }
.feedback-date { text-align: left !important; font-size: 11.5px !important; }
.feedback-container.fb-resizing {
  transition: height .38s cubic-bezier(.3,1.1,.4,1), transform .46s cubic-bezier(.34,1.36,.64,1), opacity .3s ease !important;
}
.feedback-container.fb-resizing .fb-panel.active { overflow: hidden; }

/* ═══ Hover: dezent anheben, etwas heller, Schatten wächst mit ═══ */
:root { --hv-ease: cubic-bezier(.2,.8,.2,1); }
.canvas-btn, .pdf-btn, .settings-btn-item, .page-nav-btn, .fast-scan-btn, #download-pdf-button, #edit-pdf-button,
.gg-chip, .cta-button, .navbar .nav-button, .btn-submit, .btn-cancel, .fb-top-close, .nav-links-inline a {
  transition: transform .22s var(--hv-ease), box-shadow .22s var(--hv-ease), background .2s ease, filter .2s ease, color .2s ease, opacity .2s ease !important;
}
@media (hover: hover) {
  html body .canvas-btn:hover:not(:disabled),
  html body .pdf-btn:hover:not(:disabled),
  html body .settings-btn-item:hover,
  html body .page-nav-btn:hover:not(:disabled),
  html body .fast-scan-btn:hover,
  html body #download-pdf-button:hover:not(:disabled),
  html body #edit-pdf-button:hover:not(:disabled),
  html body .gg-chip:hover,
  html body .cta-button:hover,
  html body .navbar .nav-button:hover,
  html body .btn-submit:hover:not(:disabled),
  html body .btn-cancel:hover {
    transform: translateY(-1.5px) !important;
  }
  /* neutrale Glasknöpfe: Lichtkante oben wird heller, weicher Schatten darunter */
  html body .canvas-btn:not(.canvas-btn-save):not(.canvas-btn-clear):hover:not(:disabled),
  html body .pdf-btn-bg:hover, html body #edit-pdf-button:hover:not(:disabled),
  html body .settings-btn-item:not(#presets-button):hover,
  html body .gg-chip:hover, html body .cta-button.secondary:hover,
  html body .navbar .nav-button:not(.register-btn):hover, html body .btn-cancel:hover {
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.32), inset 0 -1px 2px rgba(0,0,0,0.18), 0 10px 22px -10px rgba(0,0,0,0.7), 0 0 0 1px rgba(var(--a-d8b4fe,216,180,254),0.12) !important;
  }
  /* lila Hauptknöpfe: Glühen wird etwas stärker */
  html body .canvas-btn-save:hover:not(:disabled), html body .pdf-btn-generate:hover:not(:disabled),
  html body .fast-scan-btn:hover, html body #download-pdf-button:not(:disabled):hover,
  html body #presets-button:hover, html body .cta-button.primary:hover,
  html body .navbar .nav-button.register-btn:hover, html body .btn-submit:hover:not(:disabled) {
    filter: brightness(1.08) saturate(1.05) !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.45), inset 0 -2px 6px rgba(var(--a-581c87,88,28,135),0.45), 0 14px 30px -10px rgba(var(--a-c026d3,192,38,211),0.48) !important;
  }
  html body .fb-top-close:hover { transform: scale(1.06); }
  /* Karten */
  .guide-card, .how-step, .faq-item, .stat-item { transition: transform .25s var(--hv-ease), border-color .2s ease, box-shadow .25s var(--hv-ease) !important; }
  html body .guide-card:hover { transform: translateY(-3px) !important; border-color: rgba(var(--a-d8b4fe,216,180,254),0.35) !important; box-shadow: var(--lg-card-shadow), 0 18px 34px -18px rgba(var(--a-a855f7,168,85,247),0.28) !important; }
  html body .how-step:hover { transform: translateY(-2px); border-color: rgba(var(--a-d8b4fe,216,180,254),0.25) !important; }
  .lp-pill:hover:not(.lp-selected) { transform: translateY(-2px) !important; }
}
/* Drücken: kurz einsinken */
html body .canvas-btn:active:not(:disabled), html body .pdf-btn:active:not(:disabled), html body .settings-btn-item:active,
html body .fast-scan-btn:active, html body .gg-chip:active, html body .cta-button:active, html body .navbar .nav-button:active,
html body #download-pdf-button:active:not(:disabled), html body #edit-pdf-button:active:not(:disabled),
html body .btn-submit:active:not(:disabled), html body .btn-cancel:active {
  transform: translateY(0) scale(.97) !important;
  transition-duration: .08s !important;
}

/* Altes Buchstaben-Raster nie anzeigen – das neue (#lp-injected) ersetzt es.
   (Es bleibt nur unsichtbar im Code, weil das neue Raster darauf aufbaut.) */
#letter-select {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  padding: 0 !important; margin: 0 !important;
}


/* ═══ Feinschliff (September 2026) ═══ */
/* Abschnitte nicht unter der schwebenden Navbar verstecken */
section[id], #main-content, #ratgeber, #faq, #home { scroll-margin-top: 92px; }

/* Schritt 2: Textfeld füllt die Höhe neben der Vorschau, keine leere Fläche unten links */
@media (min-width: 901px) {
  .pdf-container { align-items: stretch; }
  .text-input-section { display: flex; flex-direction: column; }
  .text-input-section #userText { flex: 1 1 auto; min-height: 260px; }
}

/* Leere Vorschau: dezentes Symbol statt nur Text */
.pdf-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.pdf-placeholder-icon { color: rgba(var(--a-d8b4fe,216,180,254),0.38); filter: drop-shadow(0 6px 18px rgba(var(--a-a855f7,168,85,247),0.13)); }

/* Ratgeber auf dem Handy zweispaltig und kompakter */
@media (max-width: 560px) {
  .guide-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .guide-card { padding: 14px !important; }
  .guide-card .gc-text { font-size: 12px !important; line-height: 1.45 !important; }
  .guide-card .gc-title { font-size: 14px !important; }
}


/* Fokus sichtbar für Tastatur-Nutzer, unsichtbar für Maus */
:where(button, a, select, [tabindex]:not(input):not(textarea)):focus-visible {
  outline: 2px solid rgba(var(--a-d8b4fe,216,180,254),0.85) !important;
  outline-offset: 2px !important;
}

/* Weniger Bewegung, wenn im System so eingestellt */
@media (prefers-reduced-motion: reduce) {
  .guide-card, .how-step, .faq-item, .lg-btn, .pdf-btn { transition: none !important; transform: none !important; }
}

/* Sterne: keine Lücke zwischen den Sternen, damit der Mauszeiger nie „daneben“ ist */
.fb-stars { gap: 0 !important; }
.fb-star { padding: 0 5px; }

/* ═══ PDF-Erstellung: schreibender Stift statt Kreisel (passt zum Ladebildschirm) ═══ */
#pdf-gen-overlay {
  background: rgba(var(--a-080612,8,6,18),0.55) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}
.gen-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: min(280px, 100%);
  padding: 26px 24px 22px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025) 55%),
    rgba(var(--a-160e2a,22,14,42),0.55);
  border: 1px solid rgba(255,255,255,0.10);
  border-top-color: rgba(255,255,255,0.26);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.18), 0 24px 60px -24px rgba(0,0,0,0.8), 0 0 0 0.5px rgba(var(--a-a855f7,168,85,247),0.25);
  transform: translateY(6px) scale(.97); opacity: 0;
  transition: transform .45s cubic-bezier(.3,1.25,.55,1), opacity .3s ease;
}
#pdf-gen-overlay.active .gen-card { transform: none; opacity: 1; }
.gen-swash { width: 190px; height: 50px; overflow: visible; }
#gen-pen { transition: opacity .3s ease; }
.gen-percent { font-size: 28px !important; letter-spacing: -0.03em !important; }
.gen-bar-track { max-width: 200px !important; height: 4px !important; background: rgba(255,255,255,0.08) !important; }
.gen-bar-fill { transition: width .25s ease-out !important; }
.gen-step-text { font-size: 12.5px !important; color: var(--text-3, rgba(245,245,247,.5)) !important; letter-spacing: .01em !important; }

/* ── „Deine Handschrift“ einklappen (js/app/handwriting-fold.js) ──
   Höhe über grid-template-rows (1fr ↔ 0fr), dazu Ausblenden und leichtes Anheben des Inhalts.
   overflow:hidden nur eingeklappt und während der Animation, sonst würden Popups im Raster abgeschnitten. */
.gg-hw-body {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: minmax(0, 1fr);   /* breiter Inhalt (Reiter-Leiste) darf die Spalte nicht über den Rand schieben */
  transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1);
}
.gg-hw-inner {
  min-height: 0;
  min-width: 0;
  transition: opacity .32s cubic-bezier(.4, 0, .2, 1) .08s, transform .5s var(--lg-ease, cubic-bezier(.3,1.25,.55,1));
}
#app-section.gg-hw-anim .gg-hw-inner,
#app-section.gg-hw-collapsed .gg-hw-inner { overflow: hidden; }
#app-section.gg-hw-collapsed .gg-hw-body { grid-template-rows: 0fr; }
#app-section.gg-hw-collapsed .gg-hw-inner {
  opacity: 0;
  transform: translateY(-10px) scale(.985);
  transform-origin: top center;
  visibility: hidden;
  transition: opacity .22s cubic-bezier(.4, 0, .2, 1), transform .4s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .5s;
}

#app-section .gg-step-head { transition: margin-bottom .5s cubic-bezier(.4, 0, .2, 1); }
#app-section.gg-hw-collapsed .gg-step-head { margin-bottom: 0; cursor: pointer; }
#app-section.gg-hw-collapsed .gg-step-head:hover .gg-hw-toggle { background: var(--lg-btn-hover) !important; color: #fff !important; }

/* Untertitel: ausgeklappt die Anleitung, eingeklappt der Stand */
.gg-step-text .gg-hw-sum { display: none; }
#app-section.gg-hw-collapsed .gg-step-text [data-translate="step1_sub"] { display: none; }
#app-section.gg-hw-collapsed .gg-step-text .gg-hw-sum { display: block; animation: ggHwFade .35s cubic-bezier(.4, 0, .2, 1); }
@keyframes ggHwFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.gg-hw-toggle { flex-shrink: 0; gap: 8px !important; padding: 0 12px 0 14px !important; }
.gg-hw-toggle:hover { color: #fff !important; }
.gg-hw-count {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius: 100px;
  color: var(--text-2); background: rgba(255,255,255,0.08);
}
.gg-hw-count.is-done { color: #6efaaa; background: rgba(52,211,122,0.14); }
.gg-hw-count.is-done::before { content: '✓ '; }
.gg-hw-chev { transition: transform .5s var(--lg-ease, cubic-bezier(.3,1.25,.55,1)); }
#app-section.gg-hw-collapsed .gg-hw-chev { transform: rotate(180deg); }
@media (max-width: 600px) {
  #app-section .gg-step-head { flex-wrap: nowrap; }
  .gg-hw-toggle { padding: 0 10px !important; }
  .gg-hw-toggle .gg-hw-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gg-hw-body, .gg-hw-inner, #app-section .gg-step-head, .gg-hw-chev { transition: none !important; }
}
html.gg-perf .gg-hw-body, html.gg-perf .gg-hw-inner { transition: none !important; }

/* Angemeldet: Startseiten-Werbung aus, die App steht oben */
html.gg-member .hero-section, html.gg-member .how-section { display: none !important; }
html.gg-member .main-content, html.gg-member-in .main-content { padding-top: 104px; }
.main-content { transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1), padding-top .5s cubic-bezier(.4, 0, .2, 1); }
@media (max-width: 600px) { html.gg-member .main-content, html.gg-member-in .main-content { padding-top: 88px; } }
/* Handy/Tablet: die Navbar sitzt unten (css/navbar-glass.css), oben muss also kein Platz für sie frei bleiben */
@media (max-width: 768px) {
  html.gg-member .main-content, html.gg-member-in .main-content { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  #home { padding-top: calc(36px + env(safe-area-inset-top, 0px)) !important; }
  section[id], #main-content, #ratgeber, #faq, #home { scroll-margin-top: 16px; }
}
.hero-section.gg-fold-away, .how-section.gg-fold-away {
  transition: height .5s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, padding .5s cubic-bezier(.4, 0, .2, 1), margin .5s cubic-bezier(.4, 0, .2, 1);
  opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;
}

/* ── Stiftart (Zeichenfeld und Fast Scan, js/app/drawing.js) ── */
.gg-pen-tools { display: flex; align-items: center; gap: 4px; }
/* Knöpfe mit der ziehbaren Glas-Blase dahinter (js/app/drawing.js + js/glass-slider.js) */
.gg-pen-btns {
  position: relative; display: flex; align-items: center; gap: 4px;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.gg-pen-btns .gg-pen-tool { position: relative; z-index: 1; -webkit-user-drag: none; }
.gg-pen-lens {
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; opacity: 0;
  border-radius: 100px; pointer-events: none; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(var(--a-a855f7,168,85,247),0.55), rgba(var(--a-a855f7,168,85,247),0.3));
  border: 1px solid rgba(var(--a-e9d5ff,233,213,255),0.35);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.25), 0 4px 12px -4px rgba(var(--a-a855f7,168,85,247),0.6);
  transition: transform .38s var(--lg-ease, cubic-bezier(.2,.8,.2,1)), width .38s var(--lg-ease, cubic-bezier(.2,.8,.2,1)), opacity .2s ease;
  will-change: transform;
}
.gg-pen-lens.gl-js { transition: background .28s ease, border-color .28s ease, box-shadow .28s ease !important; }
/* gedrückt: klares, dickeres Glas über den Symbolen (bricht sie wie die Navbar-Blase) */
.gg-pen-lens.gl-lifted {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0.03) 100%),
    rgba(var(--a-a855f7,168,85,247),0.03) !important;
  border-color: rgba(255,255,255,0.28) !important;
  border-top-color: rgba(255,255,255,0.7) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.6),
    inset 0 -1px 2px rgba(255,255,255,0.2),
    inset 0 0 12px rgba(255,255,255,0.10),
    inset 0 0 0 0.5px rgba(255,255,255,0.3) !important;
}
html:not(.nav-glass):not(.gg-perf) .gg-pen-lens.gl-lifted {
  -webkit-backdrop-filter: blur(0.6px) saturate(1.6) brightness(1.1) !important;
  backdrop-filter: blur(0.6px) saturate(1.6) brightness(1.1) !important;
}
.gg-pen-tool {
  width: 34px; height: 34px; padding: 0; margin: 0; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid transparent; background: none;
  color: var(--text-3, rgba(245,245,247,0.6));
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.gg-pen-tool:hover { color: var(--text, #fff); background: rgba(255,255,255,0.07); }
.gg-pen-tool:active { transform: scale(.92); }
.gg-pen-tool.active { color: #fff; background: none; }   /* Hintergrund liefert die Glas-Blase (.gg-pen-lens) */
.gg-pen-tool:focus-visible { outline: 2px solid rgba(var(--a-d8b4fe,216,180,254),0.9); outline-offset: 1px; }
.gg-pen-name { margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2, rgba(245,245,247,0.8)); white-space: nowrap; }
#app-section .gg-pen-row {
  display: flex; align-items: center; padding: 4px 8px; border-radius: 100px;
  background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.07); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
#fast-scan-ui .fs-pen .gg-pen-name { display: none; }
/* Meine Schrift: Federmäppchen mit 3D-Stiften (drawing.js ggPenTools3d), wie im Heft-Editor. Die Stifte stecken
   unten in der Leiste, der gewählte ist herausgezogen; rechts der Radierer (ersetzt den Radier-Knopf daneben). */
#app-section .gg-pen-row:has(.gg-pens-3d) { padding: 0 14px 0 10px; height: 58px; overflow: hidden; }
.gg-pens-3d { height: 100%; gap: 2px; width: 100%; }
.gg-pens-3d .gg-pen-lens { display: none !important; }
.gg-pens-3d .gg-pen-btns { height: 100%; gap: 2px; align-items: stretch; }
.gg-pens-3d .gg-pen-tool, .gg-pens-3d .gg-pen-erase {
  position: relative; width: 36px; height: 100%; padding: 0; border: 0; border-radius: 0; background: none !important;
  display: flex; align-items: flex-start; justify-content: center; overflow: hidden; cursor: pointer; flex: 0 0 auto;
}
.gg-pens-3d .gg-pen-tool > svg:not(.ggpm) { display: none; }
.gg-pens-3d .gg-pm { display: block; width: 26px; height: 64px; margin-top: 2px; transform: translateY(20px);
  transition: transform .22s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); pointer-events: none; }
.gg-pens-3d .gg-pm svg { display: block; width: 100%; height: 100%; }
.gg-pens-3d .gg-pen-tool:hover .gg-pm, .gg-pens-3d .gg-pen-erase:hover .gg-pm { transform: translateY(14px); }
.gg-pens-3d .gg-pen-tool.active .gg-pm, .gg-pens-3d .gg-pen-erase.on .gg-pm { transform: translateY(4px); }
.gg-pens-3d .gg-pen-tool:active, .gg-pens-3d .gg-pen-erase:active { transform: none; }
.gg-pens-3d .gg-pen-tool:focus-visible, .gg-pens-3d .gg-pen-erase:focus-visible { outline: 2px solid var(--gga-acc, #0a84ff); outline-offset: -2px; border-radius: 8px; }
.gg-pens-3d .gg-pen-erase { margin-left: 8px; }
.gg-pens-3d .gg-pen-erase::before { content: ''; position: absolute; left: -6px; top: 14px; bottom: 14px; width: 1px; background: rgba(255,255,255,.14); }
.gg-pens-3d .gg-pen-name { margin-left: auto; padding-left: 10px; align-self: center; }
/* Radierer im Mäppchen: kein farbiger Kasten (an = herausgezogen, wie bei den Stiften); überstimmt die Pille aus ios.css */
html .gg-pens-3d .gg-pen-erase.on:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e),
html .gg-pens-3d .gg-pen-erase:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) { background: none !important; box-shadow: none !important; border: 0 !important; color: inherit !important; }
/* Fast Scan: dasselbe Mäppchen, etwas kleiner (die Leiste ist schmaler) */
#fast-scan-ui .fs-controls:has(.gg-pens-3d) { padding-top: 0 !important; padding-bottom: 0 !important; }
#fast-scan-ui .fs-pen:has(.gg-pens-3d) { height: 50px; overflow: hidden; align-self: stretch; display: flex; }
#fast-scan-ui .fs-pen .gg-pens-3d { gap: 0; }
#fast-scan-ui .fs-pen .gg-pens-3d .gg-pen-tool, #fast-scan-ui .fs-pen .gg-pens-3d .gg-pen-erase { width: 30px; height: 100%; }
#fast-scan-ui .fs-pen .gg-pens-3d .gg-pm { width: 22px; height: 56px; transform: translateY(18px); }
#fast-scan-ui .fs-pen .gg-pens-3d .gg-pen-tool:hover .gg-pm, #fast-scan-ui .fs-pen .gg-pens-3d .gg-pen-erase:hover .gg-pm { transform: translateY(13px); }
#fast-scan-ui .fs-pen .gg-pens-3d .gg-pen-tool.active .gg-pm, #fast-scan-ui .fs-pen .gg-pens-3d .gg-pen-erase.on .gg-pm { transform: translateY(4px); }
#fast-scan-ui .fs-pen .gg-pens-3d .gg-pen-erase { margin-left: 6px; }
#fast-scan-ui .fs-pen .gg-pens-3d .gg-pen-erase::before { left: -4px; top: 12px; bottom: 12px; }
/* schmal: Regler für die Pinselbreite nicht zusammenquetschen, sondern in eine eigene Zeile darunter */
#fast-scan-ui .fs-controls:has(.gg-pens-3d) .fs-brush { min-width: 150px; }
@media (max-width: 560px) {
  #fast-scan-ui .fs-controls:has(.gg-pens-3d) { flex-wrap: wrap; padding-bottom: 8px !important; }
  #fast-scan-ui .fs-controls:has(.gg-pens-3d) .fs-pen { flex: 1 1 100%; justify-content: center; }
  #fast-scan-ui .fs-controls:has(.gg-pens-3d) .fs-brush { flex: 1 1 100%; }
}
/* der alte Radier-Knopf neben „Canvas leeren“ ist jetzt im Mäppchen */
.canvas-side:has(.gg-pens-3d) .canvas-buttons #canvas-eraser-btn { display: none !important; }
@media (prefers-reduced-motion: reduce) { .gg-pens-3d .gg-pm { transition: none; } }
@media (max-width: 420px) {
  .gg-pens-3d .gg-pen-tool, .gg-pens-3d .gg-pen-erase { width: 33px; }
  #app-section .gg-pen-row:has(.gg-pens-3d) { padding: 0 10px 0 6px; }
}
#fast-scan-ui .fs-pen .gg-pen-tool { width: 32px; height: 32px; }
#fast-scan-ui .fs-pen { flex-shrink: 0; }
@media (max-width: 560px) {
  #fast-scan-ui .fs-controls { flex-wrap: wrap; row-gap: 4px; }
  #fast-scan-ui .fs-pen .gg-pen-tool { width: 30px; height: 30px; }
}
#fast-scan-ui .fs-controls .fs-brush > svg { display: none; }   /* Pinsel-Symbol: neben den Stiftarten verwirrend */

/* ── Große Bildschirme (iPad quer, Laptop, PC): Inhalt so breit wie die Navbar (1100 px), mit Abstand zum Rand.
   Darunter (Handy, iPad hochkant) bleibt alles wie bisher. Zeichenfeld dort größer (zeichnet sich leichter). ── */
@media (min-width: 1100px) {
  .main-content { max-width: min(1132px, calc(100vw - 120px)); }
}
@media (min-width: 1200px) {
  #app-section .canvas-wrapper { width: 272px !important; height: 272px !important; }
}
/* Stiftart im PDF-Editor: Leiste umbrechen, Name darunter */
.pme-pen-tools .gg-pen-tools { flex-wrap: wrap; }
.pme-pen-tools .gg-pen-btns { flex-wrap: nowrap; }
.pme-pen-tools .gg-pen-name { flex-basis: 100%; margin: 4px 0 0 2px; }

/* Feineinstellung links und rechts vom Regler (settings-ui.js, _ggInitFine): − Regler + */
.gg-fine { display: flex; align-items: center; gap: 10px; width: 100%; }
.gg-fine > input[type="range"] { flex: 1 1 auto; min-width: 0; width: auto !important; margin: 0; }
.gg-fine-btn {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border-radius: 50%; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 16px/1 inherit; color: rgb(var(--a-f3e8ff,243,232,255));
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.10);
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background .15s ease, transform .1s ease;
}
.gg-fine-btn::before { content: ''; position: absolute; inset: -8px -6px; }   /* größere Tippfläche */
.gg-fine-btn:hover { background: rgba(var(--a-a855f7,168,85,247),0.22); }
.gg-fine-btn:active { transform: scale(0.92); }
.gg-fine-btn:focus-visible { outline: 2px solid rgba(var(--a-c084fc,192,132,252),0.8); outline-offset: 2px; }
/* Name + „?“ links, Wert rechts. Ist die Spalte sehr schmal, bricht der Name um, der Wert ragt nie über den Rand */
.slider-container label { flex-wrap: nowrap; gap: 8px; }
.slider-container label > .slider-label-text { flex: 0 1 auto; min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.slider-container label > .gg-help-btn { margin: 0 auto 0 0; }
.slider-container label > .slider-value { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 480px) {
  .gg-fine-btn { font-size: 15px; }   /* 26 px nicht kleiner: Mindestgröße + Abstand für Tippflächen */
}

/* Hinweis unter Zeilenabstand / oberem Rand: echter Wert auf Papier mit Linien (settings-ui.js) */
.gg-paper-hint { margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--text-2); opacity: 0.8; }
.gg-paper-hint[hidden] { display: none; }

/* Schalter „An Papierlinien einrasten“ direkt unter dem Zeilenabstand (nur bei Papier mit Linien, settings-ui.js) */
.settings-group .gg-snap-row { padding-top: 2px !important; }
.settings-group .gg-snap-row[hidden] { display: none !important; }
.settings-group .slider-container + .gg-snap-row::before { display: none; }
.settings-group .gg-snap-row .gg-snap-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 !important; cursor: pointer; }
.gg-snap-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gg-snap-sub { font-size: 12px; line-height: 1.35; color: var(--text-2); opacity: 0.8; }
/* Feedback: ausgeblendeter Reiter (Gast ohne „Bewerten“, js/app/feedback.js) bleibt wirklich weg */
.fb-tabs .fb-tab[hidden] { display: none !important; }