/* GPTGenie: neues App-Design (Test, html.gg-app) mit Leiste und „Meine Hefte“ (js/app/app-shell.js)
 * Alles hier gilt nur mit html.gg-app. Ohne die Klasse sieht die Seite aus wie immer.
 * Farben über Variablen (Akzentfarbe: --a-a855f7), heller Modus: light-app.css (erzeugt) + Korrekturen in light.css. */

html.gg-app {
  --gga-side: 248px;
  --gga-tab: 64px;
  --gga-acc: rgb(var(--a-a855f7,168,85,247));
  --gga-acc-soft: rgba(var(--a-a855f7,168,85,247),0.16);
  --gga-acc-line: rgba(var(--a-a855f7,168,85,247),0.42);
  --gga-panel: rgba(255,255,255,0.035);
  --gga-panel-2: rgba(255,255,255,0.06);
  --gga-line: rgba(255,255,255,0.08);
  --gga-ink: var(--text, #f5f5f7);
  --gga-ink-2: var(--text-2, rgba(245,245,247,0.68));
  --gga-ink-3: var(--text-3, rgba(245,245,247,0.42));
  --gga-side-bg: rgba(var(--a-0c0a18,12,10,24),0.92);
  --gga-ease: cubic-bezier(.2,.8,.2,1);
}

/* ── Alte Startseite ausblenden: keine Werbe-Startseite, keine obere Leiste ─────────── */
html.gg-app #gg-tabnav,
html.gg-app .navbar,
html.gg-app #home,
html.gg-app .how-section,
html.gg-app #ueber,
html.gg-app #ratgeber,
html.gg-app #faq,
html.gg-app #legal,
html.gg-app .gg-step-head:not(#_a):not(#_b),
html.gg-app .gg-hw-toggle,
html.gg-app ins.adsbygoogle,
html.gg-app #history-button { display: none !important; }   /* Verlauf: im neuen Design über „Meine Hefte“ → „Text wieder verwenden“ */
html.gg-app #gg-hw-body { height: auto !important; overflow: visible !important; }

html.gg-app body { padding-left: var(--gga-side); }
html.gg-app .main-content,
html.gg-app.gg-member .main-content,
html.gg-app.gg-member-in .main-content {
  max-width: 1120px;
  padding: 0 32px 64px;
  opacity: 1;
}

/* Ansichten: nur die gewählte ist sichtbar */
html.gg-app[data-gga-view="books"] #app-section,
html.gg-app[data-gga-view="books"] #pdf-section,
html.gg-app[data-gga-view="books"] #settings-section,
html.gg-app[data-gga-view="books"] #gga-look-toggle,
html.gg-app[data-gga-view="write"] #app-section,
html.gg-app[data-gga-view="write"] #gga-books,
html.gg-app[data-gga-view="hand"] #pdf-section,
html.gg-app[data-gga-view="hand"] #settings-section,
html.gg-app[data-gga-view="hand"] #gga-look-toggle,
html.gg-app[data-gga-view="hand"] #gga-books,
html.gg-app:not(.gga-look-open) #settings-section,
html:not(.gg-app) #gga-books,
html:not(.gg-app) #gga-side,
html:not(.gg-app) #gga-head { display: none !important; }

/* sanftes Einblenden beim Wechsel */
html.gg-app #app-section, html.gg-app #pdf-section, html.gg-app #gga-books { animation: gga-in .32s var(--gga-ease) both; }
@keyframes gga-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Leiste ──────────────────────────────────────────────────────────────── */
#gga-side {
  position: fixed; z-index: 900; left: 0; top: 0; bottom: 0;
  width: var(--gga-side);
  display: flex; flex-direction: column; gap: 6px;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--gga-side-bg);
  border-right: 1px solid var(--gga-line);
  color: var(--gga-ink);
}
.gga-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.gga-brand img { width: 34px; height: 34px; border-radius: 10px; }
.gga-brand-name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.gga-brand-plan {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 3px 7px; border-radius: 6px;
  background: var(--gga-acc-soft); color: var(--gga-acc); border: 1px solid var(--gga-acc-line);
}
.gga-nav { display: flex; flex-direction: column; gap: 4px; }
.gga-nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border-radius: 14px; border: 0; background: transparent;
  color: var(--gga-ink-2); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.gga-nav-item:hover { background: var(--gga-panel-2); color: var(--gga-ink); }
.gga-nav-item:focus-visible { outline: 2px solid var(--gga-acc); outline-offset: 2px; }
.gga-nav-item.active { background: var(--gga-acc-soft); color: var(--gga-ink); }
.gga-nav-item.active .gga-ico { color: var(--gga-acc); }
.gga-ico { display: inline-flex; width: 22px; height: 22px; flex: 0 0 22px; }
.gga-ico svg, .gga-btn svg, .gga-chip svg, .gga-pop svg, .gga-row svg, .gga-x svg, .gga-more svg, .gga-look-toggle svg, .gga-lock svg, .gga-new-plus svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.gga-nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gga-nav-badge {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--gga-panel-2); color: var(--gga-ink-2); font-variant-numeric: tabular-nums;
}
.gga-nav-settings-m { display: none; }
.gga-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.gga-account { padding: 0 2px; }
.gga-acc-guest {
  padding: 14px; border-radius: 16px; background: var(--gga-panel); border: 1px solid var(--gga-line);
  display: flex; flex-direction: column; gap: 8px;
}
.gga-acc-guest p { font-size: 13px; line-height: 1.45; color: var(--gga-ink-2); margin: 0 0 2px; }
.gga-acc-user {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 0;
  background: transparent; color: var(--gga-ink-2); font: inherit; font-size: 13px; cursor: pointer; text-align: left;
}
.gga-acc-user:hover { background: var(--gga-panel-2); }
.gga-avatar {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gga-acc); color: #fff; font-weight: 800; font-size: 13px;
}
.gga-acc-mail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gga-legal { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 12px 0; }
.gga-legal a { font-size: 11.5px; color: var(--gga-ink-3); text-decoration: none; }
.gga-legal a:hover { color: var(--gga-ink-2); text-decoration: underline; }

/* ── Kopf jeder Ansicht ───────────────────────────────────────────────────── */
#gga-head {
  max-width: 1120px; margin: 0 auto; padding: calc(34px + env(safe-area-inset-top, 0px)) 32px 22px;
  display: flex; align-items: flex-end; gap: 16px; justify-content: space-between; flex-wrap: wrap;
  position: relative; z-index: 1;
}
#gga-side [hidden], #gga-books [hidden], .gga-selbar[hidden] { display: none !important; }
html:not(.gg-app) .gga-selbar { display: none !important; }
.gga-head-text { text-align: left; min-width: 0; }
#gga-head h1 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 0; color: var(--gga-ink); }
#gga-head .gga-hl { color: var(--gga-acc); }
#gga-head p { margin: 8px 0 0; font-size: 15px; color: var(--gga-ink-2); max-width: 62ch; line-height: 1.45; }
#gga-head p:empty { display: none; }
.gga-head-act { display: flex; gap: 10px; align-items: center; }

/* ── Knöpfe ───────────────────────────────────────────────────────────────── */
.gga-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.gga-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.gga-btn:active { transform: scale(.97); }
.gga-btn:focus-visible { outline: 2px solid var(--gga-acc); outline-offset: 2px; }
.gga-btn-primary { background: var(--gga-acc); color: #fff; box-shadow: 0 8px 22px -10px var(--gga-acc); }
.gga-btn-primary:hover { filter: brightness(1.08); }
.gga-btn-ghost { background: var(--gga-panel-2); color: var(--gga-ink); border-color: var(--gga-line); }
.gga-btn-ghost:hover { background: rgba(255,255,255,0.1); }
.gga-btn-danger { background: #ff453a; color: #fff; }
.gga-btn-block { width: 100%; }
.gga-btn[disabled] { opacity: .55; pointer-events: none; }
.gga-link { background: none; border: 0; padding: 0; font: inherit; color: var(--gga-acc); font-weight: 700; cursor: pointer; }

/* ── Schreiben: Karten ruhiger, „Aussehen anpassen“ ───────────────────────── */
html.gg-app #pdf-section, html.gg-app #app-section, html.gg-app #settings-section { border-radius: 28px !important; }
html.gg-app #pdf-section { margin-top: 0 !important; }
html.gg-app #app-section { margin-top: 0 !important; }
.gga-look-toggle {
  display: none; width: 100%; margin: 18px 0 0; padding: 16px 18px; border-radius: 22px;
  border: 1px solid var(--gga-line); background: var(--gga-panel); color: var(--gga-ink);
  align-items: center; gap: 14px; text-align: left; font: inherit; cursor: pointer;
  transition: background .18s ease;
}
html.gg-app .gga-look-toggle { display: flex; }
.gga-look-toggle:hover { background: var(--gga-panel-2); }
.gga-look-ico {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gga-acc-soft); color: var(--gga-acc);
}
.gga-look-ico svg { width: 20px; height: 20px; }
.gga-look-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gga-look-text strong { font-size: 16px; }
.gga-look-text span { font-size: 13px; color: var(--gga-ink-2); }
.gga-look-chev { width: 20px; height: 20px; color: var(--gga-ink-3); transition: transform .25s var(--gga-ease); }
html.gga-look-open .gga-look-chev { transform: rotate(180deg); }
html.gga-look-open .gga-look-toggle { border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; }
html.gg-app.gga-look-open #settings-section { margin-top: 12px !important; animation: gga-in .3s var(--gga-ease) both; }

/* ── Meine Hefte ──────────────────────────────────────────────────────────── */
#gga-books { padding-bottom: 20px; }
#gga-books .gga-card, #gga-books .gga-lrow { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Leiste: Weg (Meine Hefte › Ordner) links, Suche/Sortieren/Ansicht/Auswählen rechts */
.gga-lib-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; min-height: 44px; }
.gga-crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1 1 auto; }
.gga-crumb {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: 12px; border: 0; background: transparent;
  color: var(--gga-ink-2); font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; white-space: nowrap; min-width: 0;
  transition: background .15s ease, color .15s ease;
}
button.gga-crumb:hover { background: var(--gga-panel-2); color: var(--gga-ink); }
.gga-crumb-root { cursor: default; padding-left: 2px; color: var(--gga-ink-3); font-size: 14px; font-weight: 600; }
.gga-crumb-cur:not(.gga-crumb-root) { color: var(--gga-ink); font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.gga-crumb-dot { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 4px; background: var(--fc); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.gga-crumb-chev { width: 16px; height: 16px; color: var(--gga-ink-3); display: inline-flex; }
.gga-crumb-sep { width: 16px; height: 16px; color: var(--gga-ink-3); display: inline-flex; flex: 0 0 16px; }
.gga-crumb-sep svg, .gga-crumb-chev svg, .gga-crumb-back svg, .gga-tbtn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gga-crumb-back {
  width: 38px; height: 38px; flex: 0 0 38px; padding: 8px; margin-right: 4px; border-radius: 50%; border: 1px solid var(--gga-line); background: var(--gga-panel);
  color: var(--gga-ink); cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.gga-crumb-back:hover { background: var(--gga-panel-2); }
.gga-crumb-back:active { transform: scale(.94); }
.gga-crumb.drop-on { background: var(--gga-acc-soft); color: var(--gga-acc); box-shadow: inset 0 0 0 2px var(--gga-acc-line); }
.gga-lib-tools { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.gga-search {
  display: flex; align-items: center; gap: 8px; width: 230px; min-width: 0;
  height: 40px; padding: 0 12px; border-radius: 12px; background: var(--gga-panel); border: 1px solid var(--gga-line);
  color: var(--gga-ink-3); transition: width .25s var(--gga-ease), border-color .15s ease, box-shadow .15s ease;
}
.gga-search:focus-within { width: 290px; border-color: var(--gga-acc-line); box-shadow: 0 0 0 3px var(--gga-acc-soft); }
.gga-search .gga-ico { width: 17px; height: 17px; flex-basis: 17px; }
.gga-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--gga-ink); font: inherit; font-size: 15px; outline: none; }
.gga-search input::-webkit-search-cancel-button { filter: grayscale(1); }
.gga-tbtn {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: 12px; flex: 0 0 auto;
  border: 1px solid var(--gga-line); background: var(--gga-panel); color: var(--gga-ink-2);
  font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.gga-tbtn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.gga-tbtn:hover { background: var(--gga-panel-2); color: var(--gga-ink); }
.gga-tbtn-i { width: 40px; padding: 0; justify-content: center; }
.gga-tbtn.on { background: var(--gga-acc); border-color: transparent; color: #fff; }
.gga-tbtn:focus-visible, .gga-crumb:focus-visible, .gga-crumb-back:focus-visible { outline: 2px solid var(--gga-acc); outline-offset: 2px; }

.gga-sec-head { display: flex; align-items: baseline; gap: 10px; margin: 6px 2px 14px; }
.gga-sec-head h2 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gga-ink-3); }
.gga-sec-head span { font-size: 12.5px; font-weight: 700; color: var(--gga-ink-3); font-variant-numeric: tabular-nums; }
.gga-grid + .gga-sec-head, .gga-list + .gga-sec-head { margin-top: 36px; }

.gga-grid {
  display: grid; gap: 30px 22px;
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
}
.gga-card { position: relative; display: flex; flex-direction: column; gap: 11px; min-width: 0; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
button.gga-card { cursor: pointer; }

/* Heft: Umschlag mit Rücken links und Papierkante rechts */
.gga-cover {
  position: relative; display: block; width: 100%; aspect-ratio: 595 / 842; padding: 0; overflow: hidden;
  border-radius: 4px 10px 10px 4px; border: 0; cursor: pointer; background: #fff;
  box-shadow: 2px 0 0 -1px #f4f4f6, 4px 0 0 -2px #e2e2e6, 0 14px 28px -14px rgba(0,0,0,0.75), 0 2px 5px rgba(0,0,0,0.25);
  transition: transform .28s var(--gga-ease), box-shadow .28s var(--gga-ease);
}
.gga-cover::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.04) 70%, rgba(255,255,255,0.2));
}
.gga-cover::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0.18), transparent 38%); opacity: 0; transition: opacity .28s ease; }
.gga-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gga-cover-blank { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, #fff 0 22px, #e6e6ea 22px 23px); }
.gga-card:hover .gga-cover, .gga-cover:focus-visible { transform: translateY(-5px) rotate(-0.6deg); box-shadow: 2px 0 0 -1px #f4f4f6, 4px 0 0 -2px #e2e2e6, 0 24px 40px -16px rgba(0,0,0,0.8), 0 0 0 2px var(--gga-acc-line); }
.gga-card:hover .gga-cover::after { opacity: 1; }
.gga-cover:focus-visible { outline: none; }
.gga-cover:active { transform: scale(.97); transition-duration: .12s; }
.gga-card[data-color] .gga-cover::before { width: 12px; background: linear-gradient(90deg, var(--gga-c), var(--gga-c) 72%, rgba(0,0,0,0.2)); }
.gga-card-new .gga-cover-new, .gga-cover-new {
  background: transparent; border: 2px dashed var(--gga-line); box-shadow: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; transition: border-color .2s ease, background .2s ease, transform .28s var(--gga-ease);
}
.gga-cover-new::before, .gga-cover-new::after { display: none; }
.gga-card-new:hover .gga-cover-new { border-color: var(--gga-acc-line); background: var(--gga-acc-soft); box-shadow: none; transform: translateY(-3px); }
.gga-new-plus {
  width: 50px; height: 50px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 13px;
  background: var(--gga-acc); color: #fff; box-shadow: 0 10px 24px -10px var(--gga-acc); transition: transform .3s var(--gga-ease);
}
.gga-new-plus svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.gga-card-new:hover .gga-new-plus, .gga-card-newf:hover .gga-new-plus { transform: rotate(90deg) scale(1.06); }
.gga-card-row { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.gga-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gga-card-title {
  font-size: 15px; font-weight: 700; color: var(--gga-ink); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.gga-card-meta { font-size: 12.5px; color: var(--gga-ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.gga-in-folder { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--gga-ink-2); }
.gga-in-folder svg { width: 13px; height: 13px; fill: var(--fc); stroke: var(--fc); stroke-width: 1.5; }
.gga-more {
  width: 34px; height: 34px; flex: 0 0 34px; padding: 7px; margin: -4px -6px 0 0; border-radius: 50%; border: 0;
  background: transparent; color: var(--gga-ink-2); cursor: pointer; transition: background .15s ease;
}
.gga-more:hover, .gga-more:focus-visible { background: var(--gga-panel-2); color: var(--gga-ink); outline: none; }
.gga-card.locked .gga-cover img { filter: grayscale(1) brightness(.75); }
.gga-lock {
  position: absolute; inset: auto 8px 8px auto; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 10px; background: rgba(0,0,0,0.6); color: #fff;
}
.gga-lock svg { width: 14px; height: 14px; }
.gga-pin {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 26px; height: 26px; padding: 5px; border-radius: 50%;
  background: var(--gga-acc); color: #fff; box-shadow: 0 4px 10px -4px rgba(0,0,0,.5);
}
.gga-pin svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Ordner: Rückwand mit Lasche, Hefte schauen heraus, Vorderseite in der Ordnerfarbe (öffnet sich beim Überfahren) */
.gga-folder {
  position: relative; display: block; width: 100%; aspect-ratio: 595 / 842; padding: 0; border: 0; background: transparent; cursor: pointer;
  perspective: 700px; --fc2: color-mix(in srgb, var(--fc) 72%, #000);
}
.gga-f-back {
  position: absolute; left: 0; right: 0; top: 13%; bottom: 0; border-radius: 4px 12px 12px 12px;
  background: linear-gradient(180deg, var(--fc2), color-mix(in srgb, var(--fc) 55%, #000));
  box-shadow: 0 14px 28px -14px rgba(0,0,0,0.75);
}
.gga-f-back::before {   /* Lasche */
  content: ''; position: absolute; left: 0; top: -9%; width: 44%; height: 12%; border-radius: 9px 12px 0 0;
  background: var(--fc2); clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
}
.gga-f-papers { position: absolute; left: 7%; right: 7%; top: 17%; bottom: 8%; }
.gga-f-paper {
  position: absolute; left: calc(var(--k) * 9%); right: calc((2 - var(--k)) * 6%); top: calc(var(--k) * 6%); bottom: 0; overflow: hidden;
  border-radius: 3px 6px 0 0; background: #fff; box-shadow: 0 -2px 8px -3px rgba(0,0,0,0.4);
  transform: rotate(calc((var(--k) - 1) * 2.4deg)); transform-origin: bottom center;
  transition: transform .35s var(--gga-ease);
}
.gga-f-paper img { width: 100%; height: auto; display: block; }
.gga-f-paper-empty { background: rgba(255,255,255,0.14); box-shadow: none; border: 1.5px dashed rgba(255,255,255,0.35); }
.gga-f-front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%; border-radius: 8px 8px 12px 12px; z-index: 2;
  background: linear-gradient(170deg, color-mix(in srgb, var(--fc) 86%, #fff), var(--fc) 45%, color-mix(in srgb, var(--fc) 88%, #000));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 -6px 14px -8px rgba(0,0,0,0.45);
  transform-origin: bottom center; transition: transform .38s var(--gga-ease);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 12px; color: #fff; overflow: hidden;
}
.gga-f-front::before { content: ''; position: absolute; left: 10px; right: 10px; top: 9px; height: 0; border-top: 1.5px dashed rgba(255,255,255,0.35); }
.gga-f-label { font-size: 13px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; opacity: .95; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.gga-f-count {
  position: absolute; right: 10px; top: 18px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,0.2); color: #fff;
}
.gga-folder-light .gga-f-front { color: rgba(0,0,0,0.78); }
.gga-folder-light .gga-f-label { text-shadow: none; }
.gga-folder-light .gga-f-count { background: rgba(0,0,0,0.12); color: rgba(0,0,0,0.75); }
.gga-folder-light .gga-f-front::before { border-color: rgba(0,0,0,0.18); }
.gga-fcard:hover .gga-f-front, .gga-folder:focus-visible .gga-f-front { transform: rotateX(-24deg); }
.gga-fcard:hover .gga-f-paper { transform: translateY(-9%) rotate(calc((var(--k) - 1) * 4deg)); }
.gga-folder:focus-visible { outline: 2px solid var(--gga-acc); outline-offset: 4px; border-radius: 12px; }
.gga-folder:active .gga-f-front { transform: rotateX(-10deg) scale(.98); transition-duration: .12s; }
.gga-fcard.drop-on .gga-f-front { transform: rotateX(-34deg); }
.gga-fcard.drop-on .gga-f-back { box-shadow: 0 0 0 3px var(--gga-acc), 0 18px 34px -12px rgba(0,0,0,.8); }
.gga-fcard .gga-card-title { display: none; }   /* Name steht auf dem Ordner */
.gga-fcard .gga-card-meta { font-size: 13px; font-weight: 650; color: var(--gga-ink-2); }
/* „Neuer Ordner“: gestrichelter Umriss einer Mappe */
.gga-folder-new { display: flex; align-items: center; justify-content: center; padding-top: 13%; transition: transform .28s var(--gga-ease); }
.gga-folder-new::after { content: ''; position: absolute; left: 0; right: 0; top: 13%; bottom: 0; border: 2px dashed var(--gga-line); border-radius: 4px 12px 12px 12px; transition: border-color .2s ease, background .2s ease; }
.gga-folder-new::before { content: ''; position: absolute; left: 0; top: 4.5%; width: 42%; height: 9%; border: 2px dashed var(--gga-line); border-bottom: 0; border-radius: 9px 12px 0 0; transition: border-color .2s ease; }
.gga-folder-new .gga-new-plus { position: relative; z-index: 1; }
.gga-card-newf:hover .gga-folder-new { transform: translateY(-3px); }
.gga-card-newf:hover .gga-folder-new::after { border-color: var(--gga-acc-line); background: var(--gga-acc-soft); }
.gga-card-newf:hover .gga-folder-new::before { border-color: var(--gga-acc-line); }
.gga-new-pulse .gga-folder { animation: gga-pulse 1s var(--gga-ease) 2; }
@keyframes gga-pulse { 50% { transform: scale(1.04); filter: drop-shadow(0 0 12px var(--gga-acc-line)); } }

/* kleines Ordner-Zeichen (Liste, Verschieben, leerer Ordner) */
.gga-fmini { position: relative; display: inline-block; width: 30px; height: 23px; flex: 0 0 30px; border-radius: 3px 6px 6px 6px; background: var(--fc, #8494ab); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.gga-fmini::before { content: ''; position: absolute; left: 0; top: -4px; width: 13px; height: 6px; border-radius: 3px 5px 0 0; background: var(--fc, #8494ab); filter: brightness(.8); }
.gga-fmini-s { width: 22px; height: 17px; flex-basis: 22px; margin-top: 3px; }
.gga-fmini-s::before { width: 10px; height: 5px; top: -3px; }
.gga-fmini-l { width: 64px; height: 48px; flex-basis: 64px; border-radius: 6px 10px 10px 10px; }
.gga-fmini-l::before { width: 28px; height: 10px; top: -8px; border-radius: 5px 8px 0 0; }
.gga-fmini-new { background: transparent; border: 2px dashed var(--gga-line); box-shadow: none; }
.gga-fmini-new::before { display: none; }

/* Liste */
.gga-list { display: flex; flex-direction: column; gap: 2px; border-radius: 18px; background: var(--gga-panel); border: 1px solid var(--gga-line); padding: 6px; }
.gga-lrow { position: relative; display: flex; align-items: center; gap: 4px; border-radius: 12px; transition: background .15s ease; }
.gga-lrow:hover { background: var(--gga-panel-2); }
.gga-lrow-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 8px 10px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 12px; }
button.gga-lrow-new { border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 8px 10px; gap: 14px; }
.gga-cover-s { width: 38px; flex: 0 0 38px; border-radius: 2px 5px 5px 2px; box-shadow: 0 4px 10px -5px rgba(0,0,0,.7); }
.gga-cover-s::before { width: 4px; }
.gga-lrow[data-color] .gga-cover-s::before { width: 5px; background: var(--gga-c); }
.gga-cover-s.gga-cover-new { border-radius: 6px; }
.gga-cover-s .gga-new-plus { width: 24px; height: 24px; padding: 5px; box-shadow: none; }
.gga-cover-s .gga-pin { width: 16px; height: 16px; padding: 3px; top: 3px; right: 3px; }
.gga-cover-s .gga-lock { display: none; }
.gga-lrow-f .gga-fmini { margin: 0 4px; }
.gga-lrow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gga-lrow-text .gga-card-title { -webkit-line-clamp: 1; }
.gga-lrow-date { flex: 0 0 auto; font-size: 13px; color: var(--gga-ink-3); white-space: nowrap; }
.gga-lrow .gga-more { margin: 0 4px 0 0; }
.gga-lrow.locked .gga-cover-s img { filter: grayscale(1) brightness(.75); }
.gga-lrow-f.drop-on { background: var(--gga-acc-soft); box-shadow: inset 0 0 0 2px var(--gga-acc-line); }

/* Auswählen */
.gga-tick {
  position: absolute; left: 10px; top: 10px; z-index: 3; width: 26px; height: 26px; padding: 5px; border-radius: 50%;
  background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 2px #fff; color: transparent; opacity: 0; transform: scale(.6);
  transition: opacity .18s ease, transform .22s var(--gga-ease), background .15s ease;
}
.gga-tick svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gga-selecting .gga-tick { opacity: 1; transform: none; }
.gga-selecting .sel .gga-tick { background: var(--gga-acc); color: #fff; box-shadow: none; }
.gga-cover-s .gga-tick { left: 50%; top: 50%; margin: -11px 0 0 -11px; width: 22px; height: 22px; padding: 4px; }
.gga-selecting .gga-card.sel .gga-cover { transform: scale(.94); box-shadow: 0 0 0 3px var(--gga-acc), 0 14px 28px -14px rgba(0,0,0,0.75); }
.gga-selecting .gga-lrow.sel { background: var(--gga-acc-soft); }
.gga-selecting .gga-fcard, .gga-selecting .gga-lrow-f { opacity: .4; pointer-events: none; }
.gga-selecting .gga-more { visibility: hidden; }
.gga-selbar {
  position: fixed; z-index: 950; left: calc(50% + var(--gga-side) / 2); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 18px; max-width: calc(100vw - var(--gga-side) - 24px);
  background: var(--ios-sheet, #1c1c1e); color: var(--ios-label, #fff); border: 1px solid var(--gga-line);
  box-shadow: 0 20px 50px -14px rgba(0,0,0,.75); animation: gga-up .3s var(--gga-ease);
}
@keyframes gga-up { from { opacity: 0; transform: translate(-50%, 20px); } }
.gga-selbar-n { padding: 0 12px 0 10px; font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gga-selbar button {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 6px 8px; border: 0; border-radius: 12px;
  background: transparent; color: inherit; font: inherit; font-size: 11.5px; font-weight: 650; cursor: pointer;
}
.gga-selbar button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gga-selbar button:hover:not(:disabled) { background: var(--ios-group, #2c2c2e); }
.gga-selbar button:disabled { opacity: .35; cursor: default; }
.gga-selbar button.danger { color: #ff453a; }
.gga-selbar .gga-selbar-done { flex-direction: row; min-width: 0; padding: 0 16px; height: 40px; margin-left: 4px; background: var(--gga-acc); color: #fff; font-size: 14px; font-weight: 750; }
.gga-selbar .gga-selbar-done:hover { background: var(--gga-acc) !important; filter: brightness(1.08); }

/* Ziehen */
.gga-card.dragging, .gga-lrow.dragging { opacity: .35; }
.gga-dragging .gga-fcard:not(.drop-on) .gga-f-front { transform: rotateX(-10deg); }

/* Einblenden: Kacheln nacheinander, beim Ordner-Wechsel seitlich */
.gga-lib-anim .gga-anim { animation: gga-card-in .42s var(--gga-ease) both; animation-delay: calc(min(var(--i), 14) * 28ms); }
@keyframes gga-card-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.gga-nav-fwd { animation: gga-fwd .34s var(--gga-ease) both; }
.gga-nav-back { animation: gga-back .34s var(--gga-ease) both; }
@keyframes gga-fwd { from { opacity: 0; transform: translateX(28px); } }
@keyframes gga-back { from { opacity: 0; transform: translateX(-28px); } }
.gga-nav-fwd .gga-anim, .gga-nav-back .gga-anim { animation-duration: .36s; }

.gga-empty, .gga-empty-mini, .gga-fempty { grid-column: 1 / -1; }
.gga-empty-mini { color: var(--gga-ink-3); font-size: 14px; padding: 8px 2px; }
.gga-fempty { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px; text-align: center; border-radius: 22px; border: 1.5px dashed var(--gga-line); }
.gga-fempty p { margin: 8px 0 0; font-size: 16px; font-weight: 700; color: var(--gga-ink); }
.gga-fempty small { max-width: 44ch; font-size: 13.5px; line-height: 1.45; color: var(--gga-ink-3); }
.gga-empty {
  margin-top: 26px; padding: 34px 24px; border-radius: 26px; text-align: center;
  background: var(--gga-panel); border: 1px solid var(--gga-line);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.gga-empty h2 { margin: 6px 0 0; font-size: 21px; color: var(--gga-ink); }
.gga-empty p { margin: 0 0 8px; max-width: 46ch; color: var(--gga-ink-2); line-height: 1.5; font-size: 15px; }
.gga-empty-art { position: relative; width: 120px; height: 92px; }
.gga-empty-art span {
  position: absolute; bottom: 0; width: 58px; height: 80px; border-radius: 4px 9px 9px 4px; background: #fff;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.7);
  background-image: repeating-linear-gradient(180deg, transparent 0 11px, #dfe0e6 11px 12px);
}
.gga-empty-art span:nth-child(1) { left: 6px; transform: rotate(-10deg); opacity: .7; }
.gga-empty-art span:nth-child(2) { right: 6px; transform: rotate(9deg); opacity: .85; }
.gga-empty-art span:nth-child(3) { left: 31px; bottom: 6px; box-shadow: 0 0 0 2px var(--gga-acc-line), 0 14px 26px -12px rgba(0,0,0,0.8); }
.gga-limit { margin: 26px 0 0; font-size: 13.5px; color: var(--gga-ink-3); }

/* Ordner-Fenster: große Vorschau */
.gga-fprev { display: flex; justify-content: center; padding: 4px 0 16px; }
.gga-folder-big { width: 112px; cursor: default; }
.gga-folder-big .gga-f-front { transition: background .25s ease; }
.gga-colors.gga-colors-s { grid-template-columns: repeat(9, 1fr); gap: 8px; }
.gga-colors.gga-colors-s .gga-color { width: 100%; height: auto; aspect-ratio: 1; max-width: 38px; border-width: 2px; }
.gga-color-none { background: #8494ab; position: relative; }
.gga-color-none::after { content: ''; position: absolute; left: 50%; top: 18%; bottom: 18%; width: 2px; margin-left: -1px; background: rgba(255,255,255,.85); transform: rotate(45deg); border-radius: 1px; }
.gga-row-tick { margin-left: auto; width: 20px; height: 20px; color: var(--gga-acc); display: inline-flex; }
.gga-row-tick svg { width: 100%; height: 100%; opacity: 1 !important; }

/* ── Menü und Fenster ─────────────────────────────────────────────────────── */
.gga-pop {
  position: fixed; z-index: 10050; min-width: 220px; padding: 6px; border-radius: 16px;
  background: var(--ios-sheet, #1c1c1e); border: 1px solid var(--gga-line); color: var(--ios-label, #fff);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.75);
  opacity: 0; transform: scale(.96); transform-origin: top right; transition: opacity .16s ease, transform .2s var(--gga-ease);
}
.gga-pop.on { opacity: 1; transform: none; }
.gga-pop button {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 10px;
  background: transparent; color: inherit; font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.gga-pop button svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .85; }
.gga-pop button:hover, .gga-pop button:focus-visible { background: var(--ios-group, #2c2c2e); outline: none; }
.gga-pop button.danger { color: #ff453a; }
.gga-pop hr { border: 0; height: 1px; background: var(--gga-line); margin: 5px 8px; }

.gga-sheet-ov {
  position: fixed; inset: 0; z-index: 10040; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: var(--ios-scrim, rgba(0,0,0,.5)); opacity: 0; transition: opacity .2s ease;
}
.gga-sheet-ov.on { opacity: 1; }
.gga-sheet {
  width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  border-radius: var(--ios-radius, 30px); background: var(--ios-sheet, #1c1c1e); color: var(--ios-label, #fff);
  box-shadow: var(--ios-shadow, 0 30px 80px -20px rgba(0,0,0,.7));
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(14px) scale(.98); transition: transform .28s var(--gga-ease);
}
.gga-sheet-ov.on .gga-sheet { transform: none; }
.gga-sheet, .gga-pop { text-align: left; }
.gga-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.gga-sheet-head h2 { margin: 0; font-size: 20px; font-weight: 800; }
.gga-x {
  width: 34px; height: 34px; flex: 0 0 34px; padding: 8px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ios-circle, #3a3a3c); color: var(--ios-circle-ink, rgba(255,255,255,.88));
}
.gga-sheet-text { margin: 0 0 18px; color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6)); line-height: 1.5; font-size: 15px; }
.gga-sheet-act { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.gga-input {
  width: 100%; height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid transparent;
  background: var(--ios-group, #2c2c2e); color: var(--ios-label, #fff); font: inherit; font-size: 16px; outline: none;
}
.gga-input:focus { border-color: var(--gga-acc-line); box-shadow: 0 0 0 3px var(--gga-acc-soft); }
.gga-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.gga-field > span { font-size: 13px; font-weight: 700; color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6)); padding-left: 2px; }
.gga-papers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.gga-paper {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 6px 9px; border-radius: 16px;
  border: 2px solid transparent; background: var(--ios-group, #2c2c2e); color: var(--ios-label, #fff);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.gga-paper img { width: 100%; aspect-ratio: 595/842; object-fit: cover; border-radius: 4px 8px 8px 4px; box-shadow: 0 4px 12px -6px rgba(0,0,0,.6); }
.gga-paper.on { border-color: var(--gga-acc); background: var(--gga-acc-soft); }
.gga-seg { display: flex; padding: 3px; border-radius: 12px; background: var(--ios-fill, rgba(118,118,128,.24)); }
.gga-seg button {
  flex: 1; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--ios-label, #fff);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.gga-seg button.on { background: var(--ios-seg-on, #636366); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.gga-rows { display: flex; flex-direction: column; border-radius: var(--ios-group-radius, 20px); overflow: hidden; background: var(--ios-group, #2c2c2e); }
.gga-row {
  display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 16px; border: 0; background: transparent;
  color: var(--ios-label, #fff); font: inherit; font-size: 16px; text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--ios-sep, rgba(84,84,88,.55));
}
.gga-row:last-child { border-bottom: 0; }
.gga-row svg { width: 20px; height: 20px; flex: 0 0 20px; opacity: .8; }
.gga-row:hover { background: var(--ios-group-press, #3a3a3c); }
.gga-row.on { color: var(--gga-acc); font-weight: 700; }
.gga-row-add { color: var(--gga-acc); }

/* ── Heft im Editor: Name oben, „Gespeichert“ ─────────────────────────────── */
.gg-book-status { margin-left: 8px; font-size: 12px; color: var(--text-3); }
.gg-book-status::before { content: '·'; margin-right: 8px; }
.gg-book-status[data-state="saving"], .gg-book-status[data-state="dirty"] { color: var(--text-2); }
.gg-book-status[data-state="error"] { color: #ff453a; }
#gg-book-loading {
  position: fixed; inset: 0; z-index: 10030; display: flex; align-items: center; justify-content: center;
  background: var(--ios-scrim, rgba(0,0,0,.5)); opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
#gg-book-loading.on { opacity: 1; pointer-events: auto; }
.gg-bl-card {
  width: min(300px, calc(100vw - 48px)); padding: 26px 22px 22px; border-radius: 26px; text-align: center;
  background: var(--ios-sheet, #1c1c1e); color: var(--ios-label, #fff); box-shadow: var(--ios-shadow, 0 30px 80px -20px rgba(0,0,0,.7));
}
.gg-bl-ring {
  width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 50%;
  border: 3px solid var(--gga-acc-soft, rgba(var(--a-a855f7,168,85,247),.16)); border-top-color: var(--gga-acc, rgb(var(--a-a855f7,168,85,247)));
  animation: gga-spin .8s linear infinite;
}
@keyframes gga-spin { to { transform: rotate(360deg); } }
.gg-bl-text { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.gg-bl-bar { height: 6px; border-radius: 3px; overflow: hidden; background: var(--ios-fill, rgba(118,118,128,.24)); }
.gg-bl-bar span { display: block; height: 100%; width: 4%; border-radius: 3px; background: var(--gga-acc, rgb(var(--a-a855f7,168,85,247))); transition: width .2s ease; }

/* ── Handy und iPad hochkant: Leiste unten ────────────────────────────────── */
@media (max-width: 899px) {
  html.gg-app body { padding-left: 0; padding-bottom: calc(var(--gga-tab) + env(safe-area-inset-bottom, 0px)); }
  #gga-side {
    top: auto; right: 0; width: auto; height: calc(var(--gga-tab) + env(safe-area-inset-bottom, 0px));
    flex-direction: row; padding: 0 6px env(safe-area-inset-bottom, 0px);
    border-right: 0; border-top: 1px solid var(--gga-line);
    background: rgba(var(--a-0c0a18,12,10,24),0.86);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  }
  html.no-backdrop #gga-side, html.gg-perf #gga-side { background: rgb(var(--a-0c0a18,12,10,24)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .gga-brand, .gga-side-foot { display: none; }
  .gga-nav { flex-direction: row; flex: 1; gap: 0; }
  .gga-nav-item {
    flex: 1; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px 4px; border-radius: 14px;
    font-size: 11px; font-weight: 600; text-align: center; min-width: 0;
  }
  .gga-nav-item:hover { background: transparent; }
  .gga-nav-item.active { background: transparent; color: var(--gga-acc); }
  .gga-nav-item .gga-ico { width: 24px; height: 24px; flex-basis: auto; padding: 0; }
  .gga-nav-item.active .gga-ico { background: var(--gga-acc-soft); border-radius: 12px; width: 52px; height: 28px; padding: 2px 14px; }
  .gga-nav-label { width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .gga-nav-badge { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; background: var(--gga-acc); color: #fff; }
  .gga-nav-settings-m { display: flex; }
  #gga-head { padding: calc(20px + env(safe-area-inset-top, 0px)) 16px 14px; }
  #gga-head h1 { font-size: 30px; }
  #gga-head p { font-size: 14px; }
  html.gg-app .main-content, html.gg-app.gg-member .main-content, html.gg-app.gg-member-in .main-content { padding: 0 12px 28px; }
  .gga-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 24px 14px; }
  .gga-lib-bar { gap: 10px; margin-bottom: 16px; }
  .gga-crumbs { flex: 1 1 100%; }
  .gga-crumbs:has(.gga-crumb-root) { display: none; }
  .gga-lib-tools { flex: 1 1 100%; }
  .gga-search, .gga-search:focus-within { flex: 1 1 auto; width: auto; }
  .gga-tbtn .gga-tbtn-l { display: none; }
  #gga-sort { width: 40px; padding: 0; justify-content: center; }
  #gga-select { width: 40px; padding: 0; justify-content: center; }
  .gga-selbar { left: 50%; bottom: calc(var(--gga-tab) + 12px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 16px); }
  .gga-selbar { gap: 0; padding: 5px; }
  .gga-selbar button { min-width: 46px; padding: 6px 4px; font-size: 10px; }
  .gga-selbar-n { padding: 0 6px 0 8px; font-size: 13px; }
  .gga-selbar .gga-selbar-done { padding: 0 12px; height: 38px; margin-left: 2px; font-size: 13.5px; }
  .gga-lrow-date { display: none; }
  #gga-head .gga-head-act .gga-btn { min-height: 40px; padding: 0 14px; font-size: 14px; }
}
@media (max-width: 899px) and (min-width: 600px) {
  .gga-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 420px) {
  .gga-selbar button:not(.gga-selbar-done) span { display: none; }
  .gga-selbar button:not(.gga-selbar-done) { min-width: 42px; height: 42px; justify-content: center; }
}
@media (max-width: 380px) {
  .gga-grid { grid-template-columns: repeat(2, 1fr); }
  #gga-newf span { display: none; }
  .gga-papers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Editor offen: Leiste nicht darüber (Editor liegt sowieso oben, aber am Handy nichts durchscheinen lassen) */
html.gg-app body:has(#pdf-editor-overlay.pme-visible) #gga-side { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  html.gg-app #app-section, html.gg-app #pdf-section, html.gg-app #gga-books { animation: none; }
  .gga-cover, .gga-sheet, .gga-pop, .gga-f-front, .gga-f-paper { transition: none; }
  .gga-lib-anim .gga-anim, .gga-nav-fwd, .gga-nav-back, .gga-selbar { animation: none; }
}

/* ── „Wohin damit?“ über den Knöpfen der Schreiben-Seite ──────────────────── */
.gga-target { display: none; }
html.gg-app .gga-target {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 10px; padding: 9px 14px; border-radius: 16px;
  border: 1px solid var(--gga-line); background: var(--gga-panel); color: var(--gga-ink); font: inherit; text-align: left; cursor: pointer;
}
html.gg-app .gga-target:hover { background: var(--gga-panel-2); }
.gga-target .gga-ico { width: 20px; height: 20px; flex-basis: 20px; color: var(--gga-acc); }
.gga-target-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.gga-target-text small { font-size: 11.5px; color: var(--gga-ink-3); font-weight: 600; }
.gga-target-text strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gga-target .gga-target-chev { color: var(--gga-ink-3); width: 18px; height: 18px; flex-basis: 18px; }
.gga-sheet-label { margin: 18px 4px 8px; font-size: 13px; font-weight: 700; color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6)); }
.gga-rows + .gga-rows { margin-top: 10px; }
.gga-rows-scroll { max-height: 40vh; overflow-y: auto; }
.gga-row-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; padding: 8px 0; }
.gga-row-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gga-row-text small { font-size: 12.5px; font-weight: 500; color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6)); }

/* ── Farben (Heftrücken, Ordner) ──────────────────────────────────────────── */
.gga-card[data-color="red"], .gga-lrow[data-color="red"] { --gga-c: #ff453a; }
.gga-card[data-color="orange"], .gga-lrow[data-color="orange"] { --gga-c: #ff9f0a; }
.gga-card[data-color="yellow"], .gga-lrow[data-color="yellow"] { --gga-c: #ffd60a; }
.gga-card[data-color="green"], .gga-lrow[data-color="green"] { --gga-c: #30d158; }
.gga-card[data-color="blue"], .gga-lrow[data-color="blue"] { --gga-c: #0a84ff; }
.gga-card[data-color="purple"], .gga-lrow[data-color="purple"] { --gga-c: #bf5af2; }   /* accent-keep */
.gga-card[data-color="pink"], .gga-lrow[data-color="pink"] { --gga-c: #ff375f; }
.gga-card[data-color="gray"], .gga-lrow[data-color="gray"] { --gga-c: #8e8e93; }
.gga-colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; justify-items: center; }
.gga-color {
  width: 52px; height: 52px; border-radius: 50%; border: 3px solid transparent; cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.12);
}
.gga-color.on { border-color: var(--ios-label, #fff); }
.gga-color[data-c="red"] { background: #ff453a; }
.gga-color[data-c="orange"] { background: #ff9f0a; }
.gga-color[data-c="yellow"] { background: #ffd60a; }
.gga-color[data-c="green"] { background: #30d158; }
.gga-color[data-c="blue"] { background: #0a84ff; }
.gga-color[data-c="purple"] { background: #bf5af2; }   /* accent-keep */
.gga-color[data-c="pink"] { background: #ff375f; }
.gga-color[data-c="gray"] { background: #8e8e93; }

/* ── Meldung unten mit Knopf ("Als Heft gespeichert · Umbenennen") ─────────── */
#gg-snack {
  position: fixed; z-index: 10060; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 14px; max-width: min(520px, calc(100vw - 24px));
  padding: 10px 10px 10px 18px; border-radius: 18px;
  background: var(--ios-sheet, #1c1c1e); color: var(--ios-label, #fff); border: 1px solid var(--gga-line, rgba(255,255,255,.08));
  box-shadow: 0 18px 50px -14px rgba(0,0,0,.7);
  transform: translate(-50%, 140%); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s ease; pointer-events: none;
}
#gg-snack.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.gg-snack-text { font-size: 14.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-snack-btn {
  flex: 0 0 auto; height: 36px; padding: 0 14px; border-radius: 12px; border: 0; cursor: pointer;
  background: rgba(var(--a-a855f7,168,85,247),0.18); color: rgb(var(--a-a855f7,168,85,247)); font: inherit; font-size: 14px; font-weight: 700;
}
@media (max-width: 899px) {
  html.gg-app #gg-snack { bottom: calc(var(--gga-tab) + 12px + env(safe-area-inset-bottom, 0px)); }
  html.gg-app body:has(#pdf-editor-overlay.pme-visible) #gg-snack { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Weiterschreiben ──────────────────────────────────────────────────────── */
.gg-write-sheet { width: min(560px, 100%); }
.gg-write-text { height: auto; min-height: 150px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.gg-write-opt { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14.5px; color: var(--ios-label, #fff); cursor: pointer; }
.gg-write-opt input { width: 20px; height: 20px; accent-color: rgb(var(--a-a855f7,168,85,247)); }
.gg-write-sheet .gga-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#pme-tools .gg-tool-write { color: rgb(var(--a-a855f7,168,85,247)); }
#pme-tools .gg-tool-write span { font-weight: 700; }
.gga-seg[hidden] { display: none !important; }

/* Neues Heft: alle Papier-Kacheln gleich groß (Name immer eine Zeile), Farbe oben, weich */
.gga-paper { min-width: 0; transition: border-color .2s ease, background .2s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.gga-paper:active { transform: scale(.96); }
.gga-paper > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 100%; height: 2.3em; line-height: 1.15; overflow: hidden; text-align: center; font-size: 12px; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; align-content: center; }
.gga-paper img { transition: opacity .18s ease; background: #fff; }
#gga-tones { transition: opacity .2s ease; }
#gga-tones.gga-off { opacity: .35; pointer-events: none; }
@media (max-width: 600px) { .gga-papers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .gga-paper { padding: 6px 4px 7px; } }
@media (max-width: 380px) { .gga-papers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Meine Hefte im Stil von „Schreiben“ und „Meine Schrift“ (Apple-Look): alles in einer gruppierten Karte,
 *    Felder und Knöpfe als gefüllte Flächen ohne Rand, gleiche Rundungen und Abstände ─────────────────────── */
html.gg-app #gga-books {
  background: var(--ios-card, var(--gga-panel)); border-radius: 26px; padding: 16px 20px 26px; box-sizing: border-box;
}
html.gg-app #gga-books .gga-lib-bar { margin: 0 0 20px; padding-bottom: 14px; border-bottom: 0.5px solid var(--ios-sep, var(--gga-line)); }
html.gg-app #gga-books :is(.gga-search, .gga-tbtn, .gga-crumb-back) { background: var(--ios-inner, var(--gga-panel-2)); border-color: transparent; }
html.gg-app #gga-books .gga-tbtn:hover, html.gg-app #gga-books .gga-crumb-back:hover { filter: brightness(1.08); }
html.gg-app #gga-books .gga-tbtn.on { background: var(--gga-acc); }
html.gg-app #gga-books .gga-search:focus-within { border-color: var(--gga-acc-line); }
html.gg-app #gga-books .gga-sec-head h2 { font-size: 13px; letter-spacing: .02em; font-weight: 700; }
html.gg-app #gga-books .gga-empty-act { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
html.gg-app #gga-books .gga-tbtn:active, html.gg-app #gga-books .gga-crumb-back:active { transform: scale(.96); }
html.gg-app #gga-books .gga-tbtn { transition: background .2s ease, color .2s ease, transform .18s cubic-bezier(.2,.8,.2,1), filter .15s ease; }
@media (max-width: 899px) {
  html.gg-app #gga-books { border-radius: 22px; padding: 12px 12px 22px; }
  html.gg-app #gga-books .gga-lib-bar { margin-bottom: 16px; padding-bottom: 12px; }
}

/* Schreiben: Fett, Textmarker, Tabelle, Formel direkt unter dem Textfeld (statt „Format“-Knopf oben) */
html.gg-app #pdf-section .text-top-tools { display: none !important; }
html.gg-app #pdf-section .text-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.gg-fmt-tools { display: inline-flex; align-items: center; gap: 4px; }
.gg-fmt-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--ios-sep, rgba(255,255,255,.18)); }
html.gg-app #pdf-section .gg-ft { min-width: 30px; justify-content: center; padding: 0 8px; }
.gg-ft b { font-weight: 800; font-size: 14px; }
.gg-ft span { font-weight: 700; font-size: 13px; }
.gg-ft-math span { font-family: "Times New Roman", Georgia, serif; font-style: italic; font-size: 14px; }
.gg-ft-hlwrap { display: inline-flex; align-items: center; }
html.gg-app #pdf-section .gg-ft-hl { position: relative; border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; padding-right: 6px; }
html.gg-app #pdf-section .gg-ft-more { min-width: 20px; padding: 0 4px; margin-left: 1px; border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important; }
.gg-ft-dot { position: absolute; right: 4px; bottom: 4px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ios-inner, #2c2c2e); }
.gg-ft:active { transform: scale(.94); }
.gg-ft-colors {
  position: fixed; z-index: 10050; display: flex; gap: 8px; padding: 8px 10px; border-radius: 16px;
  background: var(--ios-card, #1c1c1e); box-shadow: 0 12px 32px -8px rgba(0,0,0,.5), 0 0 0 .5px var(--ios-sep, rgba(255,255,255,.12));
  opacity: 0; transform: translateY(-4px) scale(.96); transition: opacity .16s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.gg-ft-colors.on { opacity: 1; transform: none; }
.gg-ft-colors .gg-hl-dot { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.gg-ft-colors .gg-hl-dot.gg-hl-dot-on { box-shadow: 0 0 0 2px var(--ios-card, #1c1c1e), 0 0 0 4px var(--gga-acc, #0a84ff); }
/* Formel-Fenster: Suche */
.gg-math-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin: 0 0 10px; border-radius: 12px; background: rgba(118,118,128,.18); color: rgba(var(--a-ebebf5,235,235,245),.6); }
.gg-math-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; outline: none; color: var(--ios-label, #fff); }
.gg-math-chip[hidden], .gg-math-group[hidden] { display: none !important; }
@media (max-width: 600px) {
  html.gg-app #pdf-section .char-counter { flex-wrap: wrap; row-gap: 6px; }
  html.gg-app #pdf-section .text-tools { flex: 1 1 100%; }
  html.gg-app #pdf-section .gg-fmt-sep { display: none; }
  html.gg-app #pdf-section .gg-fmt-tools { margin-left: auto; }
}
@media (max-width: 600px) {
  html.gg-app #pdf-section .text-tools { gap: 3px; flex-wrap: nowrap; }
  html.gg-app #pdf-section .gg-fmt-tools { gap: 3px; }
  html.gg-app #pdf-section .gg-ft { min-width: 30px; padding: 0 6px; }
  html.gg-app #pdf-section .gg-ft-more { min-width: 18px; padding: 0 2px; }
}
@media (max-width: 380px) { html.gg-app #pdf-section #clear-text-button span { display: none; } }

/* Schreiben: PDF-Vorschau füllt die rechte Karte (gleich hoch wie links). Das Blatt wird so groß wie möglich und
 * steht mittig, statt oben zu kleben und darunter eine leere Fläche zu lassen. */
@media (min-width: 761px) {
  html.gg-app #pdf-section .pdf-container > div:last-child { display: flex !important; flex-direction: column; min-height: 0; }
  html.gg-app #pdf-section .pdf-container > div:last-child > .pdf-placeholder { flex: 1 1 auto; height: auto !important; min-height: 240px; }
  html.gg-app #pdf-section #live-pdf-generation:not([style*="none"]) { flex: 1 1 auto; min-height: 0; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
  html.gg-app #pdf-section #generation-canvas-container { flex: 0 0 auto; max-width: 100%; aspect-ratio: 1 / 1.414; }   /* Breite: app-shell.js fitPreview */
  html.gg-app #pdf-section #page-navigation { flex: 0 0 auto; }
}
/* Leiste unter dem Textfeld: Knöpfe bleiben in einer Zeile, die Zeichenzahl rückt bei wenig Platz darunter */
html.gg-app #pdf-section .char-counter { flex-wrap: wrap; row-gap: 6px; }
html.gg-app #pdf-section .text-tools { flex-wrap: wrap; row-gap: 6px; }
html.gg-app #pdf-section .gg-fmt-tools { flex-wrap: nowrap; }
@media (max-width: 1180px) { html.gg-app #pdf-section .gg-fmt-sep { display: none; } }
/* iPad hochkant und schmale Fenster: Vorschau etwas breiter, damit das A4-Blatt die Höhe der Karte füllt */
@media (min-width: 761px) and (max-width: 1180px) { html.gg-app #pdf-section .pdf-container { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } }
@media (max-width: 600px) { html.gg-app #pdf-section .text-tools { flex-wrap: nowrap; } }

/* „Aussehen anpassen“: übersichtlicher und am iPad breite Regler. Die Einstellungen richten sich nach dem Platz der
 * Karte (nicht des Bildschirms): wenig Platz → Gruppen untereinander, die Vorschau bleibt rechts beim Scrollen stehen. */
html.gg-app #settings-section .settings-body { container-type: inline-size; container-name: ggset; align-items: start; }
html.gg-app #settings-section .settings-preview { position: sticky; top: 16px; align-self: start; }
@container ggset (max-width: 980px) {
  html.gg-app #settings-section .settings-groups { grid-template-columns: minmax(0, 1fr) !important; }
}
html.gg-app #settings-section .settings-group .slider-container label, html.gg-app #settings-section .settings-group .slider-container > div:first-child { overflow-wrap: normal; word-break: normal; hyphens: auto; }