/* 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 als runder Knopf in der Leiste unter dem Textfeld (dialogs.js, data-ft="history") */
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) */
/* Symbol des Ordners (js/app/folder-icons.js, bei „Geteilte Notizen“ die Personen): mittig auf der Vorderseite,
   klappt beim Drüberfahren mit ihr auf. Gelber Ordner: dunkles Symbol. */
.gga-f-sym { position: absolute; z-index: 3; left: 50%; top: 52%; height: 64%; aspect-ratio: 1; transform: translate(-50%, -50%); color: #fff; display: flex; pointer-events: none; }
.gga-f-sym[hidden] { display: none; }
.gga-f-sym svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.25)); }
.gga-f-sym.gga-f-sym-dark { color: rgba(0,0,0,.62); }
.gga-f-sym.gga-f-sym-dark svg { filter: none; }
.gga-fmini > .gga-f-sym { top: 54%; height: 72%; }
.gga-fmini-s > .gga-f-sym svg { stroke-width: 2.4; }
/* in Zeilen und Menüs (z. B. „In Ordner legen“) gilt sonst die allgemeine Zeichen-Größe */
.gga-f-sym > svg, .gga-row .gga-f-sym > svg, .gga-pop .gga-f-sym > svg { width: 100%; height: 100%; flex: none; opacity: 1; }
/* große Vorschau im Ordner-Fenster: Symbol über dem Namen */
.gga-folder-big .gga-f-sym { top: 36%; height: 40%; }
.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); }
/* Papierkorb (app-shell.js trashCard): Hinweis mit „Papierkorb leeren“, Hefte etwas blasser */
.gga-trash-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 4px 0 18px; }
.gga-trash-head p { margin: 0; flex: 1 1 260px; text-align: left; font-size: 13.5px; line-height: 1.45; color: var(--gga-ink-3); }
.gga-trash-head .gga-trash-empty { color: #ff453a; }   /* accent-keep */
.gga-trash-head .gga-trash-empty svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gga-trashed .gga-cover { opacity: .72; filter: saturate(.6); transition: opacity .2s ease, filter .2s ease; }
.gga-trashed:hover .gga-cover { opacity: .9; filter: none; }

/* 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; }
/* Symbol-Auswahl im Ordner-Fenster: nach Gruppen, scrollt in sich */
.gga-ficons {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; max-height: 214px; overflow-y: auto;
  overscroll-behavior: contain; padding: 2px 2px 4px; margin: 0 -2px; -webkit-overflow-scrolling: touch;
}
.gga-ficons-h { grid-column: 1 / -1; margin: 8px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--gga-ink-3); }
.gga-ficon {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 10px;
  background: var(--gga-field, rgba(255,255,255,.06)); color: var(--gga-ink-2); cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.gga-ficon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gga-ficon:hover { background: rgba(255,255,255,.1); color: var(--gga-ink); }
.gga-ficon.on { background: var(--gga-acc-soft, rgba(10,132,255,.18)); color: var(--gga-acc); box-shadow: inset 0 0 0 2px var(--gga-acc); }
.gga-ficon:focus-visible { outline: 2px solid var(--gga-acc); outline-offset: 1px; }
.gga-ficon-none { position: relative; }
.gga-ficon-none::after { content: ''; position: absolute; width: 2px; height: 46%; border-radius: 1px; background: currentColor; transform: rotate(45deg); opacity: .7; }
.gga-ficon-none::before { content: ''; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 2px solid currentColor; opacity: .7; }
.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 ─────────────────────────────────────────────────────── */
/* Menüs sehen aus und bewegen sich wie die Ausklapp-Menüs der Schreiben-Seite (ios.css + liquid.css .gl-dd-pop):
   iOS-Fläche, große Rundung, wächst mit leichtem Nachfedern aus dem Knopf (Ursprung setzt app-shell.js) und
   zieht sich beim Schließen schnell wieder hinein */
.gga-pop {
  position: fixed; z-index: 10050; min-width: 230px; padding: 6px; border-radius: 20px;
  background: var(--ios-menu, #2c2c2e); border: 0; color: var(--ios-label, #fff);
  box-shadow: 0 18px 50px -12px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.08);
  opacity: 0; transform: scale(.6); transform-origin: top right;
  transition: opacity .16s ease, transform .34s cubic-bezier(.2, 1.2, .35, 1);
  will-change: transform, opacity;
}
.gga-pop.on { opacity: 1; transform: none; }
.gga-pop.out { opacity: 0; transform: scale(.8); transition: opacity .12s ease, transform .14s var(--gl-out, cubic-bezier(.4, 0, .6, .2)); pointer-events: none; }
.gga-pop button {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 12px; border: 0; border-radius: 12px;
  background: transparent; color: inherit; font: inherit; font-size: 16px; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color .15s ease;
}
.gga-pop button svg { width: 19px; height: 19px; flex: 0 0 19px; opacity: .85; }
.gga-pop button:hover, .gga-pop button:focus-visible { background: var(--ios-menu-press, rgba(255,255,255,0.1)); outline: none; }
.gga-pop button:active { background: var(--ios-menu-press, rgba(255,255,255,0.1)); transition: background-color 0s; }
.gga-pop button.danger { color: var(--ios-red, #ff453a); }
.gga-pop hr { border: 0; height: 0.5px; background: var(--ios-menu-sep, rgba(84,84,88,0.6)); margin: 5px 10px; }

.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; }
/* Haupt-Knopf schwebt unten im Fenster: bleibt immer sichtbar, der Inhalt scrollt darunter durch (leichter Verlauf) */
.gga-sheet-act {
  position: sticky; z-index: 3; bottom: calc(-20px - env(safe-area-inset-bottom, 0px));
  margin: 10px -20px calc(-20px - env(safe-area-inset-bottom, 0px)); padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, transparent, var(--ios-sheet, #1c1c1e) 16px);
  border-radius: 0 0 var(--ios-radius, 30px) var(--ios-radius, 30px);
}
/* Notizbuch importieren */
.gga-imp-apps { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 16px; }
.gga-imp-apps span { padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--ios-group, #2c2c2e); color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6)); }
.gga-imp-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 150px; padding: 18px;
  border-radius: 18px; border: 2px dashed var(--gga-acc-line, rgba(var(--a-a855f7,168,85,247),.45)); background: var(--gga-acc-soft, rgba(var(--a-a855f7,168,85,247),.08));
  color: var(--ios-label, #fff); font: inherit; cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.gga-imp-drop svg { width: 34px; height: 34px; fill: none; stroke: var(--gga-acc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gga-imp-drop b { font-size: 16px; }
.gga-imp-drop small { font-size: 13px; color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6)); }
.gga-imp-drop.on, .gga-imp-drop:hover { background: var(--gga-acc-soft, rgba(var(--a-a855f7,168,85,247),.16)); }
.gga-imp-drop:active { transform: scale(.98); }
@media (hover: none) { .gga-imp-drop small { display: none; } }
.gga-imp-drop[hidden], .gga-imp-prog[hidden], .gga-imp-hint[hidden] { display: none; }
.gga-imp-prog { display: flex; flex-direction: column; gap: 10px; padding: 26px 4px; }
.gga-imp-bar { height: 8px; border-radius: 99px; background: var(--ios-group, #2c2c2e); overflow: hidden; }
.gga-imp-bar i { display: block; height: 100%; width: 3%; border-radius: 99px; background: var(--gga-acc); transition: width .25s ease; }
.gga-imp-prog span { font-size: 14px; color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6)); text-align: center; }
.gga-imp-hint { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6)); }
.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); }
/* Neues Heft: breiteres Fenster, große Papier-Kacheln (PC 5 je Reihe, ca. 130 px; Handy 3 je Reihe) */
.gga-sheet.gga-sheet-nb { width: min(760px, 100%); }
.gga-sheet-nb .gga-papers { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.gga-sheet-nb .gga-paper { padding: 10px 8px 10px; gap: 8px; }
.gga-sheet-nb .gga-paper img { border-radius: 4px 9px 9px 4px; box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 6px 16px -8px rgba(0,0,0,.6); }
.gga-sheet-nb .gga-paper > span { font-size: 13px; }
.gga-sheet-nb .gga-paper:hover:not(.on) { background: color-mix(in srgb, var(--ios-group, #2c2c2e) 85%, var(--ios-label, #fff) 8%); }
@media (max-width: 600px) { .gga-sheet-nb .gga-papers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } .gga-sheet-nb .gga-paper { padding: 8px 6px 9px; } }
.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; }
/* Neu laden im offenen Heft (Klasse kommt aus index.html, bevor die Seite gezeichnet wird): gleich den Schreibtisch
   zeigen statt kurz „Meine Hefte“, bis das Heft wieder offen ist */
html.gg-app.gg-resume body::before { content: ''; position: fixed; inset: 0; z-index: 10029; background: #19191b; }

/* ── 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; }
  #gga-head #gga-imp { width: 40px; padding: 0; }
  #gga-head #gga-imp span { display: none; }
}
@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-f-front, .gga-f-paper { transition: none; }
  .gga-pop, .gga-pop.out { transform: none; transition: opacity .15s ease; }
  .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; }
/* „Wohin kommt die PDF?“ (app-shell.js targetSheet): wie „Meine Hefte“ zum Auswählen. Oben fest „Neues Heft“ /
   „Nur herunterladen“ und Suche, darunter scrollen Ordner und Hefte mit Vorschau. Feste Höhe, damit das Fenster beim
   Wechseln in einen Ordner nicht springt. */
.gga-sheet.gga-sheet-pick {
  width: min(820px, 100%); height: min(760px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0;
}
.gga-sheet-pick .gga-sheet-head { flex: 0 0 auto; margin-bottom: 14px; }
.gga-sheet-pick .gga-sheet-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.gga-pick-top { flex: 0 0 auto; }
.gga-pick-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gga-pick-act {
  display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 58px; padding: 0 14px; border: 0; cursor: pointer;
  border-radius: var(--ios-group-radius, 20px); background: var(--ios-group, #2c2c2e); color: var(--ios-label, #fff);
  font: inherit; font-size: 16px; text-align: left; transition: background-color .15s ease, box-shadow .15s ease;
}
.gga-pick-act svg { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--gga-acc); }
.gga-pick-act:hover { background: var(--ios-group-press, #3a3a3c); }
.gga-pick-act:active { transform: scale(.985); }
.gga-pick-act.on { box-shadow: inset 0 0 0 2px var(--gga-acc); }
.gga-pick-act.on > .gga-row-text > span { color: var(--gga-acc); font-weight: 700; }
.gga-pick-act .gga-row-text { padding: 8px 0; }
.gga-pick-act .gga-row-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gga-pick-bar { display: flex; align-items: center; gap: 8px; margin: 16px 0 6px; min-height: 40px; }
.gga-pick-bar .gga-crumbs { flex: 1 1 auto; }
.gga-pick-bar .gga-crumb-root { font-size: 15px; color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6)); }
/* Suche und runde Knöpfe wie die Flächen oben (auch hell: ohne Rand, light-app.css gibt sonst einen) */
.gga-sheet.gga-sheet-pick .gga-pick-bar :is(.gga-search, .gga-pick-nf, .gga-crumb-back) { border: 0; background: var(--ios-group, #2c2c2e); }
.gga-sheet.gga-sheet-pick .gga-pick-bar .gga-crumb-back { color: var(--ios-label, #fff); }
.gga-sheet.gga-sheet-pick .gga-pick-bar .gga-search:focus-within { box-shadow: 0 0 0 2px var(--gga-acc); }
.gga-sheet-pick .gga-search { width: 210px; flex: 0 1 210px; border-radius: 100px; }
.gga-sheet-pick .gga-search:focus-within { width: 210px; }
.gga-pick-nf { width: 40px; height: 40px; flex: 0 0 40px; padding: 0; justify-content: center; border-radius: 50%; color: var(--gga-acc); }
.gga-sheet.gga-sheet-pick .gga-pick-bar .gga-pick-nf { color: var(--gga-acc); }
.gga-pick-nf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gga-pick-lib {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  margin: 0 -20px; padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px));
}
.gga-pick-lib .gga-fgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.gga-pick-lib .gga-ftile { background: var(--ios-group, #2c2c2e); }
.gga-pick-lib .gga-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 20px 14px; }
.gga-pick-lib .gga-grid + .gga-sec-head, .gga-pick-lib .gga-fgrid + .gga-sec-head { margin-top: 24px; }
.gga-pick-lib .gga-card .gga-cover { cursor: pointer; }
.gga-pick-lib .gga-card.sel .gga-cover { box-shadow: 0 0 0 3px var(--gga-acc), 0 14px 28px -14px rgba(0,0,0,0.75); }
.gga-pick-lib .gga-card.sel .gga-tick { opacity: 1; transform: none; background: var(--gga-acc); color: #fff; box-shadow: none; }
.gga-pick-lib .gga-card.sel .gga-card-title { color: var(--gga-acc); }
.gga-pick-lib .gga-card.locked { opacity: .55; }
.gga-pick-lib .gga-cloud { pointer-events: none; }
.gga-pick-lib .gga-empty-mini { padding: 30px 10px; text-align: center; color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6)); }
@media (max-width: 560px) {
  .gga-sheet-ov:not(.gga-center) .gga-sheet.gga-sheet-pick { height: 92vh; height: 92dvh; max-height: 92dvh; }
  /* schmal: Zeichen oben, Text darunter (sonst wird „Nur herunterladen“ abgeschnitten) */
  .gga-pick-acts { gap: 8px; }
  .gga-pick-act { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px 2px; font-size: 15px; min-height: 0; }
  .gga-pick-act svg { width: 21px; height: 21px; flex-basis: 21px; }
  .gga-pick-act .gga-row-text { width: 100%; padding: 2px 0 8px; }
  .gga-pick-act .gga-row-text > span { font-weight: 600; }
  .gga-pick-act .gga-row-text small { font-size: 12px; }
  .gga-pick-bar { flex-wrap: wrap; margin-top: 12px; }
  .gga-pick-bar .gga-crumbs { flex: 1 1 100%; order: 2; }
  .gga-pick-bar .gga-crumbs:has(.gga-crumb-root) { display: none; }
  .gga-sheet-pick .gga-search, .gga-sheet-pick .gga-search:focus-within { flex: 1 1 auto; width: auto; }
  .gga-pick-lib .gga-fgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gga-pick-lib .gga-ftile-meta { display: none; }
  .gga-pick-lib .gga-ftile-n { display: inline-flex; }
  .gga-pick-lib .gga-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .gga-pick-lib .gga-card-title { font-size: 12.5px; }
  .gga-pick-lib .gga-card-meta { display: none; }
}
.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; }
/* Farbwechsel: neues Bild blendet weich über das alte (app-shell.js) */
/* nicht die Regel für den Namen (.gga-paper > span: zwei Zeilen hoch) übernehmen */
.gga-paper > .gga-paper-pic { position: relative; display: block; width: 100%; height: auto; overflow: visible; -webkit-line-clamp: unset; line-height: normal; font-size: inherit; }
.gga-paper-pic > img { display: block; }
.gga-paper-pic > img.gga-pic-new {
  position: absolute; left: 0; top: 0; opacity: 0; transform: scale(.96);
  transition: opacity .32s ease, transform .45s cubic-bezier(.32, 1.26, .54, 1);
}
.gga-paper-pic > img.gga-pic-new.in { opacity: 1; transform: none; }
/* Umschalter Weiß / Creme / Dunkel: die helle Fläche gleitet mit leichtem Nachfedern zur gewählten Farbe */
.gga-seg { position: relative; }
.gga-seg-pill {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 9px;
  background: var(--ios-seg-on, #636366); box-shadow: 0 2px 6px rgba(0,0,0,.2); pointer-events: none;
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .42s cubic-bezier(.32, 1.26, .54, 1);
}
.gga-seg:has(.gga-seg-pill) button { position: relative; z-index: 1; transition: color .2s ease; }
.gga-seg:has(.gga-seg-pill) button.on { background: transparent; box-shadow: none; }
.gga-seg:has(.gga-seg-pill) button:active { opacity: .7; }
@media (prefers-reduced-motion: reduce) { .gga-seg-pill, .gga-paper-pic > img.gga-pic-new { transition: none; } }
#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; }
:is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .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)); }
:is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .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; }
html:not(.gg-app) .gg-ft-history { display: none !important; }   /* altes Design: Verlauf oben als „Verlauf“-Knopf */
.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; }
:is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-ft-hl { position: relative; border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; padding-right: 6px; }
:is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .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; }
/* Formel einfügen (dialogs.js, nur Formeln): breiter, Themen als Knöpfe, jede Formel so, wie sie aussieht
   (GG_MATH_SHOW: echte Brüche, Wurzeln, Grenzen, Klammern), der Code klein darunter */
.gg-math-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.gg-math-tab { height: 32px; padding: 0 13px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 650;
  background: rgba(118,118,128,.18); color: var(--ios-label, #fff); transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.gg-math-tab:active { transform: scale(.95); }
.gg-math-tab.on { background: var(--ios-tint, #0a84ff); color: #fff; }
.gg-math-dlg .gg-math-chips { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.gg-math-dlg .gg-math-group summary { cursor: default; }
.gg-math-chip.gg-math-chip-show { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 12px 9px; min-height: 104px; text-align: left; }
.gg-math-show {
  flex: 1 1 auto; display: flex; align-items: center; min-height: 50px; overflow: hidden; white-space: nowrap;
  font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", "Times New Roman", Georgia, serif; font-size: 19px; line-height: 1.2;
  color: var(--ios-label, #fff); font-weight: 400;
}
.gg-math-chip-show code { font-size: 10.5px; opacity: .55; }
/* die Teile der Formel erben Größe und Farbe (der alte Stil machte jedes span im Kärtchen klein und grau, liquid.css) */
.gg-math-chip .gg-math-show { font-size: 19px; font-weight: 400; color: var(--ios-label, #fff); }
.gg-math-chip .gg-math-show span { font-size: inherit; font-weight: inherit; color: inherit; }
.gg-math-chip .gg-math-show .mx-f, .gg-math-chip .gg-math-show .mx-c, .gg-math-chip .gg-math-show .mx-m { font-size: .76em; }
.gg-math-chip .gg-math-show .mx-l, .gg-math-chip .gg-math-show .mx-lim span, .gg-math-chip .gg-math-show .mx-rn { font-size: .58em; }
.gg-math-chip .gg-math-show .mx-big { font-size: 1.5em; }
.gg-math-chip .gg-math-show .mx-p, .gg-math-chip .gg-math-show .mx-b { font-size: 2.05em; font-weight: 200; }
.gg-math-dlg .gg-math-group summary { pointer-events: none; }
.gg-math-dlg .gg-math-group summary::after { display: none; }
.gg-math-show i { font-style: italic; }
.gg-math-show sup, .gg-math-show sub { font-size: .62em; line-height: 0; vertical-align: baseline; position: relative; }
.gg-math-show sup { top: -.62em; }
.gg-math-show sub { top: .28em; }
.mx-f { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 3px; font-size: .8em; line-height: 1.12; }
.mx-f > span:first-child { border-bottom: 1.3px solid currentColor; padding: 0 3px 1px; }
.mx-f > span:last-child { padding: 1px 3px 0; }
.mx-r { display: inline-flex; align-items: flex-start; }
.mx-rn { font-size: .55em !important; line-height: 1 !important; margin: 2px -4px 0 0; }
.mx-ov { border-top: 1.3px solid currentColor; padding: 1px 1px 0; }
.mx-l { display: inline-flex; flex-direction: column; justify-content: space-between; vertical-align: middle; font-size: .58em; line-height: 1.15; margin: 0 3px 0 1px; }
.mx-big { font-size: 1.5em; line-height: 1; }
.mx-c { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: .74em; line-height: 1.15; }
.mx-cl { align-items: flex-start; }
.mx-cr { align-items: flex-end; font-variant-numeric: tabular-nums; }
.mx-sum { border-top: 1.3px solid currentColor; }
.mx-p, .mx-b { display: inline-block; font-size: 2.05em; font-weight: 200; line-height: 1; transform: scaleX(.62); margin: 0 -2px; }
.mx-b { transform: scaleX(.7); }
.mx-m { display: inline-grid; grid-template-columns: repeat(var(--n), auto); column-gap: 9px; vertical-align: middle; font-size: .74em; line-height: 1.15; }
.mx-vec { position: relative; display: inline-block; padding-top: .3em; }
.mx-vec::before { content: ''; position: absolute; left: 1px; right: 3px; top: .12em; border-top: 1.3px solid currentColor; }
.mx-vec::after { content: ''; position: absolute; right: 2px; top: -.02em; width: .3em; height: .3em; border-top: 1.3px solid currentColor; border-right: 1.3px solid currentColor; transform: rotate(45deg); }
.mx-lim { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.05; margin-right: 4px; }
.mx-lim span { font-size: .55em; }
.mx-g { width: 64px; height: 36px; color: var(--ios-tint, #0a84ff); }
@media (max-width: 560px) {
  /* Handy: Fenster fast bildschirmbreit, weniger Rand, damit zwei Formeln nebeneinander gut Platz haben */
  #text-formatting-info-dialog .modern-dialog-content.gg-math-dlg { width: calc(100% - 16px) !important; padding: 20px 14px 14px !important; }
  .gg-math-dlg .gl-dialog-head { margin-bottom: 6px; }
  .gg-math-dlg > .gl-text { font-size: 14px; margin-bottom: 12px; }
  .gg-math-dlg .gl-well.gg-fmt-math { padding: 10px; }
  .gg-math-dlg .gg-math-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .gg-math-chip .gg-math-show { font-size: 17px; }
  .gg-math-chip.gg-math-chip-show { min-height: 96px; padding: 9px 10px 8px; }
  .gg-math-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -4px 12px; padding: 0 4px; }
  .gg-math-tabs::-webkit-scrollbar { display: none; }
  .gg-math-tab { flex: 0 0 auto; }
}
@media (max-width: 600px) {
  html.gg-app #pdf-section .char-counter { flex-wrap: wrap; row-gap: 6px; }
  :is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .text-tools { flex: 1 1 100%; }
  :is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-fmt-sep { display: none; }
  :is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-fmt-tools { margin-left: auto; }
}
@media (max-width: 600px) {
  :is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .text-tools { gap: 3px; flex-wrap: nowrap; }
  :is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-fmt-tools { gap: 3px; }
  :is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-ft { min-width: 30px; padding: 0 6px; }
  :is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-ft-more { min-width: 18px; padding: 0 2px; }
}
@media (max-width: 380px) { html.gg-app #pdf-section #clear-text-button span { display: none; } }
/* Handy: Knopfreihe unter dem Textfeld passt in die Karte (Leeren nur als Symbol, Spalte darf nicht breiter werden) */
@media (max-width: 760px) { html.gg-app #pdf-section .pdf-container { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 440px) { html.gg-app #pdf-section #clear-text-button span { display: none; } html.gg-app #pdf-section #clear-text-button { padding: 0 9px; } }
/* Alle Knöpfe unter dem Textfeld gleich hoch (vorher 12 bis 22 px, der Pfeil beim Textmarker war kleiner als der Knopf) */
:is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .text-tools .btn-clear-text { height: 30px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
:is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .text-tools .btn-clear-text svg { width: 16px; height: 16px; }
/* Textmarker + Farbe als ein Doppel-Knopf: gleiche Höhe, eine Pille, feine Trennlinie */
:is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-ft-hlwrap { height: 30px; border-radius: 100px; background: var(--ios-inner, rgba(255,255,255,.06)); }
:is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-ft-hlwrap .btn-clear-text:not(#_a):not(#_b):not(#_c):not(#_d) { background: transparent !important; }
:is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-ft-hlwrap .gg-ft:hover:not(#_a):not(#_b):not(#_c):not(#_d) { background: rgba(127,127,135,.16) !important; }
:is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-ft-hl { height: 30px; min-width: 34px; padding: 0 6px 0 10px; border-radius: 100px 0 0 100px !important; }
:is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-ft-more { height: 30px; min-width: 26px; padding: 0 8px 0 5px; margin-left: 0; border-radius: 0 100px 100px 0 !important; }
:is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-ft-more::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--ios-sep, rgba(255,255,255,.18)); }
:is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-ft-more svg { width: 13px; height: 13px; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
:is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-ft-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.gg-ft-dot { right: 5px; bottom: 6px; }
@media (max-width: 600px) {
  :is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .text-tools .btn-clear-text, :is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-ft-hlwrap { height: 32px; }
  :is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-ft-hl { height: 32px; min-width: 30px; padding: 0 4px 0 8px; }
  :is(html.gg-app #pdf-section, html.gg-app .gn-hw-bar) .gg-ft-more { height: 32px; min-width: 22px; padding: 0 6px 0 3px; }
}
/* Tabelle einfügen: Größe im Raster wählen (wie in Word/Pages) */
.gg-tbl-pick {
  position: fixed; z-index: 10050; padding: 12px; border-radius: 18px;
  background: var(--ios-card, #1c1c1e); box-shadow: 0 14px 36px -10px rgba(0,0,0,.55), 0 0 0 .5px var(--ios-sep, rgba(255,255,255,.12));
  opacity: 0; transform: translateY(-4px) scale(.96); transform-origin: top center; transition: opacity .16s ease, transform .22s cubic-bezier(.2,.8,.2,1);
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.gg-tbl-pick.on { opacity: 1; transform: none; }
.gg-tbl-grid { display: grid; grid-template-columns: repeat(6, 26px); grid-auto-rows: 20px; gap: 4px; }
.gg-tbl-grid i { border-radius: 5px; background: rgba(127,127,135,.2); transition: background .08s ease, box-shadow .08s ease; }
.gg-tbl-grid i.h { background: rgba(127,127,135,.32); }
.gg-tbl-grid i.on { background: color-mix(in srgb, var(--gga-acc, #0a84ff) 38%, transparent); box-shadow: inset 0 0 0 1.5px var(--gga-acc, #0a84ff); }
.gg-tbl-grid i.on.h { background: color-mix(in srgb, var(--gga-acc, #0a84ff) 62%, transparent); }
.gg-tbl-lab { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ios-label, #fff); font-variant-numeric: tabular-nums; }
.gg-tbl-lab span:last-child { color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6)); font-weight: 500; }
@media (hover: none) { .gg-tbl-grid { grid-template-columns: repeat(6, 34px); grid-auto-rows: 28px; gap: 5px; } }
@media (prefers-reduced-motion: reduce) { .gg-tbl-pick { transition: opacity .1s ease; transform: 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; }

/* ── Design 2026-11 (Apple HIG: Knöpfe ohne Rahmen, eine farbige Hauptaktion je Ansicht) ───────────────────── */
html.gg-app .gga-btn-ghost { border-color: transparent; background: var(--ios-inner, var(--gga-panel-2)); }
html.gg-app .gga-btn-ghost:hover { filter: brightness(1.1); background: var(--ios-inner, var(--gga-panel-2)); }
html.gg-app .gga-btn { transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .15s ease, background .15s ease; }
html.gg-app .gga-card-title { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
html.gg-app #gga-head h1 { letter-spacing: -0.035em; }
@media (prefers-contrast: more) { html.gg-app .gga-btn-ghost { box-shadow: inset 0 0 0 1px var(--gga-line); } }

/* ══ Meine Hefte 2026-11: möglichst viel auf einmal sehen (nach Apples Dateien-App: Symbolgröße einstellbar) ══════════
 * Ordner als kompakte Kacheln (kleiner Ordner mit herausschauenden Heften, daneben Name, Anzahl, Datum), Hefte in drei
 * Größen (Ansicht-Knopf, am Handy/iPad auch mit zwei Fingern zusammen-/auseinanderziehen), weniger Leerraum. */
html.gg-app #gga-books .gga-lib-bar { margin-bottom: 16px; padding-bottom: 12px; }
.gga-sec-head { margin: 2px 2px 10px; }
.gga-grid + .gga-sec-head, .gga-list + .gga-sec-head, .gga-fgrid + .gga-sec-head { margin-top: 26px; }

/* Ordner-Kacheln */
.gga-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 10px; }
.gga-fgrid.gga-size-s { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 8px; }
.gga-fgrid.gga-size-l { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.gga-ftile {
  position: relative; display: flex; align-items: center; min-width: 0; border-radius: 16px;
  background: var(--ios-inner, var(--gga-panel-2)); transition: background .18s ease, box-shadow .18s ease, transform .2s var(--gga-ease);
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.gga-ftile:hover { background: color-mix(in srgb, var(--ios-inner, #2c2c2e) 88%, var(--fc) 12%); }
.gga-ftile:active { transform: scale(.985); }
.gga-ftile-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 2px 10px 12px; border: 0; border-radius: 16px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.gga-ftile-main:focus-visible { outline: 2px solid var(--gga-acc); outline-offset: 2px; }
.gga-folder.gga-folder-ico { width: 54px; flex: 0 0 54px; aspect-ratio: 6 / 5; perspective: 300px; }
.gga-size-s .gga-folder.gga-folder-ico { width: 44px; flex-basis: 44px; }
.gga-size-l .gga-folder.gga-folder-ico { width: 66px; flex-basis: 66px; }
.gga-folder-ico .gga-f-back { border-radius: 3px 7px 7px 7px; box-shadow: 0 6px 12px -8px rgba(0,0,0,.7); }
.gga-folder-ico .gga-f-back::before { border-radius: 4px 6px 0 0; height: 14%; top: -11%; }
.gga-folder-ico .gga-f-papers { top: 14%; bottom: 10%; left: 9%; right: 9%; }
.gga-folder-ico .gga-f-paper { border-radius: 2px 3px 0 0; }
.gga-folder-ico .gga-f-front { height: 58%; padding: 0; border-radius: 4px 4px 7px 7px; }
.gga-folder-ico .gga-f-front::before { display: none; }
.gga-ftile:hover .gga-f-front, .gga-ftile-main:focus-visible .gga-f-front { transform: rotateX(-26deg); }
.gga-ftile:hover .gga-f-paper { transform: translateY(-12%) rotate(calc((var(--k) - 1) * 5deg)); }
.gga-ftile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gga-ftile-name { font-size: 15px; font-weight: 700; color: var(--gga-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.gga-ftile-meta { font-size: 12.5px; color: var(--gga-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.gga-ftile-n { display: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--fc) 22%, transparent); color: var(--gga-ink); }
.gga-size-s .gga-ftile-meta { display: none; }
.gga-size-s .gga-ftile-n { display: inline-flex; }
.gga-size-s .gga-ftile-name { font-size: 14px; }
.gga-size-s .gga-ftile-main { padding: 8px 2px 8px 10px; gap: 10px; }
.gga-ftile .gga-more { margin: 0 6px 0 0; }
.gga-ftile.drop-on { background: var(--gga-acc-soft); box-shadow: inset 0 0 0 2px var(--gga-acc); }
.gga-ftile.drop-on .gga-f-front { transform: rotateX(-34deg); }
.gga-new-pulse.gga-ftile { animation: gga-pulse 1s var(--gga-ease) 2; }

/* Hefte in drei Größen */
.gga-grid.gga-size-s { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 14px; }
.gga-grid.gga-size-m { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 22px 16px; }
.gga-grid.gga-size-l { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 28px 22px; }
.gga-grid .gga-card { gap: 8px; }
.gga-grid .gga-card-title { font-size: 14px; }
.gga-grid .gga-card-meta { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gga-grid .gga-card-meta .gga-in-folder { display: inline; margin-right: 5px; }
.gga-m-d + .gga-m-p::before { content: '·'; margin: 0 5px; }
.gga-size-l .gga-card-title { font-size: 15px; }
/* klein: nur der Titel (eine Zeile), Seitenzahl als Pille auf dem Umschlag */
.gga-size-s .gga-card-title { font-size: 12.5px; -webkit-line-clamp: 1; }
.gga-size-s .gga-card-meta { display: none; }
.gga-size-s .gga-more { width: 28px; height: 28px; flex-basis: 28px; padding: 5px; margin: -3px -5px 0 0; }
.gga-size-s .gga-card:hover .gga-cover { transform: translateY(-3px); }
.gga-cover-n { display: none; }
.gga-size-s .gga-cover-n {
  display: block; position: absolute; left: 6px; bottom: 6px; z-index: 2; padding: 1px 6px; border-radius: 8px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.gga-size-s .gga-pin { width: 20px; height: 20px; padding: 4px; top: 5px; right: 5px; }

/* Handy: feste Spaltenzahl (klein 4, mittel 3, groß 2), Ordner zwei nebeneinander */
@media (max-width: 599px) {
  .gga-grid.gga-size-s { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
  .gga-grid.gga-size-m { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  .gga-grid.gga-size-l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .gga-fgrid, .gga-fgrid.gga-size-s, .gga-fgrid.gga-size-l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gga-fgrid.gga-size-l { grid-template-columns: 1fr; }
  .gga-ftile-main { gap: 9px; padding: 9px 0 9px 9px; }
  .gga-folder.gga-folder-ico { width: 40px; flex-basis: 40px; }
  .gga-size-l .gga-folder.gga-folder-ico { width: 52px; flex-basis: 52px; }
  .gga-ftile-name { font-size: 14px; }
  .gga-ftile-meta { font-size: 11.5px; }
  .gga-ftile .gga-more { width: 30px; height: 30px; flex-basis: 30px; padding: 6px; margin-right: 3px; }
  .gga-grid.gga-size-m .gga-card-title { font-size: 13px; }
  .gga-grid.gga-size-m .gga-card-meta { font-size: 11px; }
  .gga-grid.gga-size-m .gga-m-d { display: none; }
  .gga-grid.gga-size-m .gga-m-p::before { display: none; }
  .gga-grid.gga-size-m .gga-more { width: 28px; height: 28px; flex-basis: 28px; padding: 5px; margin: -3px -5px 0 0; }
  .gga-size-s .gga-card-title { font-size: 11.5px; }
  .gga-fgrid.gga-size-s .gga-ftile-n { display: none; }
  .gga-fgrid:not(.gga-size-l) .gga-ftile-when { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .gga-grid.gga-size-s { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .gga-grid.gga-size-m { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  .gga-grid.gga-size-l { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
}
#gga-lib { touch-action: pan-x pan-y; }
@media (prefers-reduced-motion: reduce) { .gga-ftile, .gga-ftile:active { transition: none; transform: none; } }

/* ══ Kopf jeder Ansicht 2026-11 (nach Apples großen Titeln): ein einfarbiger Titel wie in der Leiste, höchstens eine leise
 * Zeile darunter, Knöpfe in derselben Zeile rechts. Kein zweifarbiger Titel, kein Werbesatz. */
#gga-head { padding: calc(26px + env(safe-area-inset-top, 0px)) 32px 18px; align-items: center; flex-wrap: nowrap; }
#gga-head h1, html.gg-app #gga-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.15; }
#gga-head .gga-hl { color: inherit; }
#gga-head p { margin: 3px 0 0; font-size: 13.5px; color: var(--gga-ink-3); font-variant-numeric: tabular-nums; }
.gga-head-text { flex: 1 1 auto; }
.gga-head-act { flex: 0 0 auto; gap: 8px; }
#gga-head .gga-head-act .gga-btn { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 19px; }
#gga-head .gga-head-act .gga-btn-primary { box-shadow: none; }
#gga-head .gga-head-act .gga-btn svg { width: 18px; height: 18px; }
@media (max-width: 899px) {
  #gga-head { padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 12px; gap: 10px; }
  #gga-head h1, html.gg-app #gga-head h1 { font-size: 28px; }
  #gga-head p { font-size: 13px; }
}
/* Handy: nur runde Symbole rechts neben dem Titel (Beschriftung bleibt fürs Vorlesen) */
@media (max-width: 599px) {
  #gga-head .gga-head-act { gap: 6px; }
  #gga-head .gga-head-act .gga-btn, #gga-head #gga-imp { width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center; border-radius: 50%; }
  #gga-head .gga-head-act .gga-btn span { display: none; }
}
/* Tarif neben „GPTGenie“: goldenes PRO / silbernes PLUS (Zeichen aus pro-plans.css) */
.gga-brand-plan { padding: 0; border: 0; background: none; display: inline-flex; }
.gga-brand-plan .gga-brand-tag { font-size: 10px; padding: 3px 6px 2px; }

/* ══ Kopf: großer Titel (wie Apples „Large Title“) und darunter echte Infos als Chips (Marflux: nicht leer, kein Werbesatz) ══ */
#gga-head { align-items: flex-end; padding-bottom: 20px; }
#gga-head h1, html.gg-app #gga-head h1 { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
.gga-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; min-height: 32px; }
.gga-chips:empty { display: none; }
.gga-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; max-width: 100%; padding: 0 12px 0 10px; border-radius: 16px; border: 0;
  background: var(--ios-inner, var(--gga-panel-2)); color: var(--gga-ink-2); font: inherit; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; min-width: 0; font-variant-numeric: tabular-nums;
}
button.gga-chip { cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease; }
button.gga-chip:hover { color: var(--gga-ink); background: color-mix(in srgb, var(--ios-inner, #2c2c2e) 85%, var(--gga-acc) 15%); }
button.gga-chip:active { transform: scale(.97); }
button.gga-chip:focus-visible { outline: 2px solid var(--gga-acc); outline-offset: 2px; }
.gga-chip b { color: var(--gga-ink); font-weight: 700; }
.gga-chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gga-chip-i { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; color: var(--gga-acc); }
.gga-chip-i svg, .gga-chip-chev svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gga-chip-chev { display: inline-flex; width: 13px; height: 13px; flex: 0 0 13px; margin-left: -2px; color: var(--gga-ink-3); }
.gga-chip-last { max-width: 320px; }
/* Fortschritt der Schrift: Chip mit Balken unten */
.gga-chip-prog { position: relative; overflow: hidden; padding: 0 14px; }
.gga-chip-prog i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p); background: var(--gga-acc); border-radius: 0 2px 2px 0; }
.gga-chip-prog.done i { background: #30d158; }   /* accent-keep */
@media (max-width: 899px) {
  #gga-head h1, html.gg-app #gga-head h1 { font-size: 32px; }
  .gga-chips { gap: 6px; margin-top: 10px; }
}
@media (max-width: 599px) {
  #gga-head { flex-wrap: wrap; align-items: flex-start; row-gap: 0; }
  #gga-head .gga-head-text { display: contents; }
  #gga-head h1 { order: 1; flex: 1 1 auto; align-self: center; }
  #gga-head .gga-head-act { order: 2; align-self: center; }
  #gga-head .gga-chips { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 10px -16px 0; padding: 0 16px; }
  #gga-head .gga-chips::-webkit-scrollbar { display: none; }
  .gga-chip { height: 30px; font-size: 13px; flex: 0 0 auto; }
  .gga-chip-last { max-width: 230px; }
}
/* Heller Modus: Chips als weiße Kapseln mit feiner Kante (die graue Fläche wäre so hell wie die Seite) */
html[data-theme="light"] #gga-head .gga-chip { background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06); }
html[data-theme="light"] #gga-head button.gga-chip:hover { background: color-mix(in srgb, #fff 90%, var(--gga-acc) 10%); }

/* ══ Leiste links 2026-11 (nach Apples Seitenleisten in Notizen/Dateien): kompakte Einträge, ruhige Zahlen, Ordner direkt
 * in der Leiste, unten eine einzige Konto-Zeile (angemeldet) statt Name + „Einstellungen“. Handy (Leiste unten) unverändert. */
@media (min-width: 900px) {
  #gga-side { padding: calc(16px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 2px; }
  .gga-brand { gap: 9px; padding: 2px 8px 16px; }
  .gga-brand img { width: 30px; height: 30px; border-radius: 8px; }
  .gga-brand-name { font-size: 17px; font-weight: 750; letter-spacing: -0.02em; }
  .gga-nav { gap: 1px; }
  .gga-nav-item { height: 38px; padding: 0 10px; gap: 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; }
  .gga-nav-item .gga-ico { width: 20px; height: 20px; flex-basis: 20px; color: var(--gga-acc); opacity: .9; }
  .gga-nav-item:hover { background: rgba(255,255,255,0.05); }
  .gga-nav-item.active { background: rgba(255,255,255,0.09); color: var(--gga-ink); }
  .gga-nav-item.active .gga-ico { opacity: 1; }
  .gga-nav-badge { min-width: 0; height: auto; padding: 0; background: none; font-size: 13px; font-weight: 600; color: var(--gga-ink-3); }
  /* Ordner */
  .gga-side-sec { display: flex; flex-direction: column; gap: 1px; margin-top: 18px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .gga-side-sec::-webkit-scrollbar { display: none; }
  .gga-side-h { text-align: left; padding: 0 10px 6px; font-size: 12px; font-weight: 700; color: var(--gga-ink-3); letter-spacing: .01em; }
  .gga-side-f {
    display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent;
    color: var(--gga-ink-2); font: inherit; font-size: 14px; font-weight: 550; text-align: left; cursor: pointer; flex: 0 0 auto; width: 100%;
    transition: background .15s ease, color .15s ease;
  }
  .gga-side-f:hover { background: rgba(255,255,255,0.05); color: var(--gga-ink); }
  .gga-side-f.active { background: rgba(255,255,255,0.09); color: var(--gga-ink); }
  .gga-side-f:focus-visible { outline: 2px solid var(--gga-acc); outline-offset: -2px; }
  .gga-side-f .gga-fmini-s { width: 18px; height: 14px; flex: 0 0 18px; margin: 2px 1px 0; border-radius: 2px 4px 4px 4px; }
  .gga-side-f .gga-fmini-s::before { width: 8px; height: 4px; top: -3px; }
  /* „Geteilte Notizen“ (immer ganz oben): Personen-Zeichen statt Mappe */
  .gga-side-shico { display: flex; width: 20px; height: 20px; flex: 0 0 20px; color: var(--gga-acc); }
  .gga-side-shico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .gga-side-shico.gga-side-fico { color: var(--fc); }   /* Ordner mit Symbol: Symbol in der Ordnerfarbe statt Mappe */
  .gga-side-shared .gga-nav-label { flex: 1; }
  /* Papierkorb (nur wenn etwas darin liegt): graues Zeichen, mit etwas Abstand unter den Ordnern */
  .gga-side-trash { margin-top: 4px; }
  .gga-side-trash .gga-side-shico { color: var(--gga-ink-3); }
  .gga-side-trash .gga-nav-label { flex: 1; }
  .gga-side-n { font-size: 12.5px; font-weight: 600; color: var(--gga-ink-3); font-variant-numeric: tabular-nums; }
  .gga-side-more { color: var(--gga-acc); font-size: 13px; padding-left: 38px; }
  /* unten */
  .gga-side-foot { gap: 4px; padding-top: 10px; }
  .gga-acc-guest { padding: 12px; border-radius: 14px; gap: 8px; background: rgba(255,255,255,0.04); border: 0; }
  .gga-acc-guest p { font-size: 12.5px; line-height: 1.4; color: var(--gga-ink-3); text-align: center; }
  .gga-acc-guest .gga-btn { min-height: 36px; font-size: 13.5px; box-shadow: none; }
  .gga-acc-guest .gga-acc-login { min-height: 36px; font-size: 13.5px; }
  .gga-nav-settings { height: 38px; padding: 0 10px; }
  #gga-side.gga-signed-in .gga-nav-settings { display: none; }
  .gga-acc-user { padding: 8px; gap: 10px; border-radius: 12px; }
  .gga-acc-user:hover { background: rgba(255,255,255,0.05); }
  .gga-avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: 13.5px; }
  .gga-acc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .gga-acc-text .gga-acc-mail { font-size: 13px; font-weight: 650; color: var(--gga-ink); }
  .gga-acc-text small { font-size: 11.5px; color: var(--gga-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gga-acc-gear { width: 18px; height: 18px; flex: 0 0 18px; color: var(--gga-ink-3); }
  .gga-acc-user:hover .gga-acc-gear { color: var(--gga-ink-2); }
  .gga-legal { padding: 8px 10px 0; gap: 2px 10px; }
  .gga-legal a { font-size: 11px; }
}
html[data-theme="light"] .gga-nav-item:hover, html[data-theme="light"] .gga-side-f:hover, html[data-theme="light"] .gga-acc-user:hover { background: rgba(0,0,0,0.045); }
html[data-theme="light"] .gga-nav-item.active, html[data-theme="light"] .gga-side-f.active { background: rgba(0,0,0,0.075); }
html[data-theme="light"] .gga-acc-guest { background: rgba(0,0,0,0.035); }
/* Handy/iPad hochkant: Leiste ist unten, dort keine Ordner-Liste */
@media (max-width: 899px) { .gga-side-sec { display: none !important; } }
/* Leiste: Hauptpunkte größer (Apple: Tippflächen ≥ 44 pt), Ordner bleiben kleiner als Unterpunkte */
@media (min-width: 900px) {
  .gga-brand { gap: 10px; padding: 4px 10px 20px; }
  .gga-brand img { width: 34px; height: 34px; border-radius: 9px; }
  .gga-brand-name { font-size: 19px; }
  .gga-nav { gap: 3px; }
  .gga-nav-item { height: 46px; padding: 0 12px; gap: 12px; border-radius: 12px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
  .gga-nav-item .gga-ico { width: 23px; height: 23px; flex-basis: 23px; }
  .gga-nav-badge { font-size: 14px; }
  .gga-side-sec { margin-top: 22px; }
  .gga-side-h { padding: 0 12px 6px; font-size: 12.5px; }
  .gga-side-f { height: 36px; padding: 0 12px; gap: 11px; font-size: 14.5px; }
  .gga-side-f .gga-fmini-s { width: 20px; height: 15px; flex-basis: 20px; }
  .gga-side-more { padding-left: 43px; }
  .gga-nav-settings { height: 44px; padding: 0 12px; font-size: 15px; }
  .gga-acc-user { padding: 9px 10px; }
  .gga-avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: 14px; }
  .gga-acc-text .gga-acc-mail { font-size: 13.5px; }
  .gga-acc-text small { font-size: 12px; }
}
@media (min-width: 900px) {
  /* zu viele Ordner für die Höhe: Liste scrollt und blendet unten sanft aus (statt hart abgeschnitten) */
  .gga-side-sec { padding-bottom: 18px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
}
/* Konto-Zeile unten: Name und „Konto und Einstellungen“ linksbündig (war zentriert) */
.gga-acc-user, .gga-acc-user .gga-acc-text { text-align: left; }
.gga-acc-user .gga-acc-text { align-items: flex-start; }
.gga-acc-user .gga-acc-mail { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="light"] .gga-avatar { color: #fff; }

/* Mehrere Notizbücher importieren: je Datei eine Zeile (Stand, Name, Info, kleiner Balken) */
.gga-imp-list { display: flex; flex-direction: column; gap: 6px; max-height: min(46vh, 380px); overflow-y: auto; margin: 4px 0 2px; overscroll-behavior: contain; }
.gga-imp-list[hidden] { display: none; }
.gga-imp-sum { margin: 0 2px 4px; font-size: 14px; font-weight: 700; color: var(--ios-label, #fff); }
.gga-imp-sum.bad { color: #ff9f0a; }   /* accent-keep */
.gga-imp-row {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px;
  padding: 10px 12px; border-radius: 12px; background: var(--ios-group, #2c2c2e); overflow: hidden;
}
.gga-imp-st { grid-row: 1 / 3; align-self: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ios-label3, rgba(var(--a-ebebf5,235,235,245),.3)); box-sizing: border-box; }
.gga-imp-row[data-st="run"] .gga-imp-st { border-color: var(--gga-acc); border-top-color: transparent; animation: gga-imp-spin .8s linear infinite; }
.gga-imp-row[data-st="ok"] .gga-imp-st { border: 0; background: #30d158 center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }   /* accent-keep */
.gga-imp-row[data-st="err"] .gga-imp-st { border: 0; background: #ff453a center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18.5v.5'/%3E%3C/svg%3E"); }   /* accent-keep */
.gga-imp-row[data-st="skip"] { opacity: .55; }
.gga-imp-row[data-st="skip"] .gga-imp-st { border-style: dashed; }
.gga-imp-name { font-size: 14px; font-weight: 650; color: var(--ios-label, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gga-imp-info { font-size: 12.5px; color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.gga-imp-row[data-st="err"] .gga-imp-info { color: #ff6961; white-space: normal; }   /* accent-keep */
.gga-imp-mini { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p, 0%); background: var(--gga-acc); transition: width .25s ease; }
.gga-imp-row[data-st="ok"] .gga-imp-mini, .gga-imp-row[data-st="err"] .gga-imp-mini, .gga-imp-row[data-st="skip"] .gga-imp-mini { display: none; }
@keyframes gga-imp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gga-imp-row[data-st="run"] .gga-imp-st { animation-duration: 2.4s; } }
html[data-theme="light"] .gga-imp-row { background: rgba(0,0,0,.045); }
/* frisch importierte Hefte kurz hervorheben */
.gga-card.gga-new-pulse .gga-cover { animation: gga-pulse 1s var(--gga-ease) 2; }

/* Heft nur in der Cloud: graue Wolke oben rechts auf dem Umschlag (antippen = herunterladen) */
.gga-cloud {
  position: absolute; top: 7px; right: 7px; z-index: 3; width: 26px; height: 26px; padding: 4px; box-sizing: border-box; border-radius: 50%;
  background: rgba(255,255,255,.88); color: #8e8e93; box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 2px 6px -2px rgba(0,0,0,.35);
  display: inline-flex; cursor: pointer; transition: transform .15s ease, color .15s ease, opacity .3s ease;
}   /* accent-keep */
.gga-cloud svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gga-cloud:hover { color: #636366; transform: scale(1.08); }   /* accent-keep */
.gga-cloud:focus-visible { outline: 2px solid var(--gga-acc); outline-offset: 2px; }
.gga-cloud.busy { color: var(--gga-acc); animation: gga-cloud-dl 1s ease-in-out infinite; }
.gga-cloud.done { opacity: 0; transform: scale(.6); pointer-events: none; }
@keyframes gga-cloud-dl { 50% { opacity: .45; } }
.gga-cloud ~ .gga-pin { right: 38px; }
.gga-size-s .gga-cloud { width: 21px; height: 21px; padding: 3px; top: 5px; right: 5px; }
.gga-size-s .gga-cloud ~ .gga-pin { right: 30px; }
.gga-cover-s .gga-cloud { display: none; }   /* Liste: kleine Wolke hinter den Seiten */
.gga-cloud-s { display: inline-flex; width: 15px; height: 15px; margin-left: 6px; vertical-align: -3px; color: var(--gga-ink-3); }
.gga-cloud-s svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .gga-cloud.busy { animation: none; } }

/* Speichern in → Neues Heft → In Ordner: Ordner als Kapseln (Farbe, Name), gewählter mit Akzent-Rand */
.gga-tf-label { margin-top: 14px; }
.gga-tfs { display: flex; flex-wrap: wrap; gap: 8px; }
.gga-tf {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; max-width: 100%; padding: 0 14px 0 11px; border: 0; border-radius: 19px;
  background: var(--ios-group, #2c2c2e); color: var(--ios-label, #fff); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px transparent; transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gga-tf > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gga-tf:hover { background: color-mix(in srgb, var(--ios-group, #2c2c2e) 85%, var(--gga-acc) 15%); }
.gga-tf:active { transform: scale(.97); }
.gga-tf.on { background: var(--gga-acc-soft); box-shadow: inset 0 0 0 1.5px var(--gga-acc); }
.gga-tf .gga-fmini-s { width: 20px; height: 15px; flex: 0 0 20px; margin-top: 2px; border-radius: 2px 4px 4px 4px; }
.gga-tf .gga-fmini-s::before { width: 9px; height: 4px; top: -3px; }
.gga-tf-none, .gga-tf-plus { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6)); }
.gga-tf-plus { color: var(--gga-acc); }
.gga-tf-none svg, .gga-tf-plus svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gga-tf-new { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ios-sep, rgba(255,255,255,.16)); color: var(--gga-acc); }
html[data-theme="light"] .gga-tf { background: rgba(0,0,0,.05); }
html[data-theme="light"] .gga-tf.on { background: var(--gga-acc-soft); }
html[data-theme="light"] .gga-tf-new { background: transparent; }

/* Tabellen-Editor (Schreiben, dialogs.js): Raster aus Feldern, Überschrift fett */
.gg-te-ov { z-index: 10060; }
.gga-sheet.gg-te-sheet { width: min(720px, 100%); }
.gg-te-wrap { overflow: auto; max-height: min(52vh, 440px); margin: 0 -4px; padding: 2px 4px 6px; overscroll-behavior: contain; }
.gg-te { border-collapse: separate; border-spacing: 0; width: 100%; min-width: max-content; }
.gg-te td { padding: 0; border-right: 1px solid var(--ios-sep, rgba(255,255,255,.12)); border-bottom: 1px solid var(--ios-sep, rgba(255,255,255,.12)); }
.gg-te tr td:last-child { border-right: 0; }
.gg-te tr:last-child td { border-bottom: 0; }
.gg-te { background: var(--ios-group, #2c2c2e); border-radius: 14px; overflow: hidden; }
.gg-te input {
  display: block; width: 100%; min-width: 110px; box-sizing: border-box; height: 44px; padding: 0 12px; border: 0; background: transparent;
  color: var(--ios-label, #fff); font: inherit; font-size: 15px; outline: none;
}
.gg-te input:focus { background: var(--gga-acc-soft); box-shadow: inset 0 0 0 2px var(--gga-acc); border-radius: 4px; }
.gg-te .gg-te-h td { background: color-mix(in srgb, var(--gga-acc) 14%, transparent); }
.gg-te .gg-te-h input { font-weight: 700; }
.gg-te input::placeholder { color: var(--ios-label3, rgba(var(--a-ebebf5,235,235,245),.3)); font-weight: 600; }
.gg-te-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gg-te-tools button { height: 34px; padding: 0 14px; border: 0; border-radius: 17px; background: var(--ios-group, #2c2c2e); color: var(--gga-acc); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.gg-te-tools button[data-te^="del"] { color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6)); }
.gg-te-tools button:active { transform: scale(.97); }
.gg-te-hint { margin: 10px 2px 0; font-size: 12.5px; color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6)); }
@media (hover: none) { .gg-te-hint { display: none; } }
html[data-theme="light"] .gg-te, html[data-theme="light"] .gg-te-tools button { background: rgba(0,0,0,.045); }
.tm-bar-tbl { display: inline-flex; align-items: center; gap: 7px; }

.gga-nav-ind { display: none; }
/* ══ Leiste unten am Handy 2026-11: schwebende Glas-Kapsel (wie iOS 26), Symbole farbig wie in der iPad-Leiste,
 * aktive Markierung gleitet zum gewählten Punkt (--gga-i aus app-shell.js). Bisher: volle Breite, graue Symbole. */
@media (max-width: 899px) {
  html.gg-app { --gga-tab: 78px; }   /* 64 px Kapsel + Abstand nach unten/oben, Inhalt und Meldungen rechnen damit */
  #gga-side {
    left: 0; right: 0; margin: 0 auto; width: min(460px, calc(100% - 24px));
    bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) - 4px));
    height: 64px; padding: 5px; border-radius: 32px;
    border: 0; border-top: 0;
    background: rgba(30,30,34,0.72);
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 14px 36px -10px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.25), inset 0 0 0 0.5px rgba(255,255,255,0.14), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  html.no-backdrop #gga-side, html.gg-perf #gga-side { background: rgb(30,30,34); }
  .gga-nav { position: relative; height: 100%; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .gga-nav-item { -webkit-user-drag: none; }
  /* Glas-Blase: in Ruhe eine helle Fläche hinter dem aktiven Punkt, gedrückt/gezogen steuert sie js/glass-slider.js */
  .gga-nav-ind {
    display: block; position: absolute; z-index: 0; top: 0; left: 0; height: 100%; width: 25%; border-radius: 27px;
    border: 0.5px solid transparent; box-sizing: border-box; pointer-events: none;
    background: rgba(255,255,255,0.11);
    transform: translateX(calc(var(--gga-i, 0) * 100%));
    transition: transform .42s cubic-bezier(.32,1.25,.5,1);
  }
  .gga-nav-ind.gl-js { will-change: transform; transition: background .28s ease, border-color .28s ease, box-shadow .28s ease !important; }
  .gga-nav-ind.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) .gga-nav-ind.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;
  }
  .gga-nav-item {
    z-index: 1; height: 100%; gap: 3px; padding: 4px 2px 3px; border-radius: 27px;
    font-size: 10.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--gga-ink-2);
    -webkit-tap-highlight-color: transparent; transition: color .2s ease, transform .15s ease;
  }
  .gga-nav-item:active { transform: scale(.93); }
  .gga-nav-item .gga-ico, .gga-nav-item.active .gga-ico {
    width: 24px; height: 24px; padding: 0; background: none; border-radius: 0; color: var(--gga-acc); opacity: .85;
    transition: opacity .2s ease, transform .3s var(--gga-ease);
  }
  .gga-nav-item .gga-ico svg { stroke-width: 1.9; }
  .gga-nav-item.active { color: var(--gga-ink); background: transparent; }
  .gga-nav-item.active .gga-ico { opacity: 1; transform: translateY(-1px); }
  .gga-nav-item.active .gga-ico svg { stroke-width: 2.2; }
  .gga-nav-settings-m .gga-ico { color: var(--gga-ink-2); }
  .gga-nav-badge { top: 4px; left: calc(50% + 7px); box-shadow: 0 0 0 2px rgb(30,30,34); }
}
@media (max-width: 360px) { .gga-nav-item { font-size: 9.5px; } }
html[data-theme="light"].gg-app .gga-nav-badge { color: #fff; }
@media (max-width: 899px) {
  html[data-theme="light"] #gga-side {
    background: rgba(255,255,255,0.78);
    box-shadow: 0 14px 36px -12px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.06), inset 0 0 0 0.5px rgba(0,0,0,0.1);
  }
  html[data-theme="light"].no-backdrop #gga-side, html[data-theme="light"].gg-perf #gga-side { background: #fff; }
  html[data-theme="light"] .gga-nav-ind { background: rgba(0,0,0,0.065); }
  html[data-theme="light"] .gga-nav-item.active, html[data-theme="light"] .gga-nav-item:hover { background: transparent; }   /* Fläche macht die Blase */
  html[data-theme="light"] .gga-nav-ind.gl-lifted { border-color: rgba(0,0,0,0.12) !important; border-top-color: rgba(255,255,255,0.9) !important; }
  html[data-theme="light"] .gga-nav-badge { box-shadow: 0 0 0 2px #fff; }
  html.gg-perf .gga-nav-ind:not(.gl-js), html.gg-perf .gga-nav-item { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .gga-nav-ind:not(.gl-js), .gga-nav-item, .gga-nav-item .gga-ico { transition: none; } }

/* Offline: geteilte Hefte (gehen nur live) und Hefte, die noch nicht auf dem Gerät liegen, ausgegraut (app-shell.js offOut) */
.gga-offline-out .gga-cover, .gga-offline-out .gga-card-title, .gga-offline-out .gga-card-meta, .gga-offline-out .gga-lrow-date {
  opacity: .42; filter: grayscale(1); transition: opacity .25s ease, filter .25s ease;
}


/* ══ Handy: Einstellungen als eigene Seite statt Fenster (2026-11, account.js GGNav pageMode) ══
 * Gleiches Aussehen wie das Fenster (Farben, Gruppen, Unterseiten gleiten herein), nur über den ganzen Bildschirm.
 * Die Leiste unten bleibt darüber sichtbar und zeigt „Einstellungen“ als gewählt. */
@media (max-width: 899px) {
  html.gg-app .account-settings-dialog.gg-settings-page {
    padding: 0 !important; align-items: stretch !important; justify-content: stretch !important;
    background: var(--ios-sheet, #1c1c1e) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html.gg-app .account-settings-dialog.gg-settings-page .account-settings-content.gg-nav {
    width: 100% !important; max-width: none !important; height: 100%; max-height: none !important;
    border-radius: 0 !important; box-shadow: none !important;
    display: flex; flex-direction: column;
    padding: env(safe-area-inset-top, 0px) 0 0 !important;
    transform: none !important;   /* einblenden statt aus der Mitte wachsen */
  }
  html.gg-app .account-settings-dialog.gg-settings-page .account-settings-content::before { display: none; }
  html.gg-app .gg-settings-page .gg-nav-vp { flex: 1; min-height: 0; height: auto !important; transition: none; }
  html.gg-app .gg-settings-page .gg-page { bottom: 0; max-height: none !important; }
  html.gg-app .gg-settings-page .gg-page-body { flex: 1; min-height: 0; padding-bottom: calc(var(--gga-tab, 78px) + env(safe-area-inset-bottom, 0px) + 18px) !important; }
  /* oberste Seite: kein × (wechseln über die Leiste), Unterseiten behalten „‹ Einstellungen“ */
  html.gg-app .gg-settings-page .gg-page-root .gl-close { visibility: hidden; pointer-events: none; }
  html.gg-app.gg-settings-open #gga-side { z-index: 1501; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   „Meine Hefte“ im selben Stil wie die Schreiben-Seite (Marflux: Knöpfe, Pop-ups und Auswahl sahen in den Heften
   anders aus, Knöpfe leuchteten, Umschalter glitten nur). Vorlagen: ios.css (Knöpfe, Fenster, Hintergrund-Fenster),
   liquid.css (Knöpfe zum Anfassen, js/press-glass.js), glass26.css (Glas-Blase, js/glass-slider.js).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Knöpfe: volle Pillen ohne Leuchten (wie „Erstellen“ / „Hintergrund“), Drücken macht sie kurz dunkler,
   das Größerwerden und Mitziehen kommt wie überall aus js/press-glass.js */
html.gg-app :is(.gga-btn, .gga-btn-primary, .gga-btn-ghost, .gga-btn-danger),
html.gg-app #gga-head .gga-head-act .gga-btn,
html.gg-app .gga-selbar .gga-selbar-done { box-shadow: none !important; }
html.gg-app .gga-btn { border-radius: 100px; border: 0; transition: filter .2s ease, background .2s ease, color .2s ease, opacity .2s ease; }
html.gg-app .gga-btn-primary { background: var(--ios-tint); color: #fff; font-weight: 650; }
html.gg-app .gga-btn-danger { background: var(--ios-red); color: #fff; font-weight: 650; }
html.gg-app .gga-btn:hover { filter: none; }
html.gg-app :is(.gga-btn, .gga-tbtn, .gga-chip, .gga-crumb-back, .gga-selbar button, .gga-tf, .gga-target, .gga-more, .gga-x):active:not(:disabled) {
  transform: none; filter: brightness(0.82); transition: filter 0s;
}
/* Leiste über den Heften: Pillen wie die Chips der Schreiben-Seite */
html.gg-app #gga-books .gga-tbtn, html.gg-app #gga-books .gga-search { border-radius: 100px; border: 0; }
html.gg-app #gga-books .gga-tbtn.on { background: var(--ios-tint); color: #fff; }
html.gg-app #gga-books :is(.gga-tbtn, .gga-crumb-back):active:not(:disabled) { transform: none; }
html.gg-app #gga-books .gga-crumb-back { border: 0; }
/* Fokus in Feldern: feiner Ring in der Akzentfarbe wie im Textfeld der Schreiben-Seite, kein weicher Schein */
html.gg-app #gga-books .gga-search:focus-within { border-color: transparent; box-shadow: 0 0 0 2px var(--ios-tint); }
html.gg-app .gga-input:focus { border-color: transparent; box-shadow: 0 0 0 2px var(--ios-tint); }
/* „Neues Heft“-Kachel und neu angelegte Hefte/Ordner: ohne farbigen Schein */
html.gg-app .gga-new-plus { box-shadow: none; }
@keyframes gga-pulse { 50% { transform: scale(1.04); } }
html.gg-app .gga-empty-art span:nth-child(3) { box-shadow: 0 14px 26px -12px rgba(0,0,0,0.8); }
/* Heft-Kachel beim Zeigen: hebt sich nur, kein farbiger Rahmen */
html.gg-app .gga-card:hover .gga-cover, html.gg-app .gga-cover:focus-visible {
  box-shadow: 2px 0 0 -1px #f4f4f6, 4px 0 0 -2px #e2e2e6, 0 24px 40px -16px rgba(0,0,0,0.8);
}
html.gg-app .gga-cover:focus-visible { outline: 2px solid var(--ios-tint); outline-offset: 3px; }
/* Leiste „Auswählen“ unten: gleiche Pillen */
html.gg-app .gga-selbar { border-radius: 100px; padding: 6px 6px 6px 8px; }
html.gg-app .gga-selbar button { border-radius: 100px; }
html.gg-app .gga-selbar .gga-selbar-done { background: var(--ios-tint); border-radius: 100px; }
html.gg-app .gga-selbar .gga-selbar-done:hover { filter: none; }
/* „Speichern in“ auf der Schreiben-Seite: Feld ohne Rand wie die anderen Felder in der Karte */
html.gg-app .gga-target { border: 0; background: var(--ios-inner, var(--gga-panel-2)); border-radius: 18px; }
html.gg-app .gga-target:hover { background: var(--ios-inner, var(--gga-panel-2)); filter: brightness(1.08); }

/* Fenster: Kopf und runder Schließen-Knopf wie bei „Einstellungen“ */
html.gg-app .gga-sheet-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
html.gg-app .gga-x {
  width: 36px; height: 36px; flex: 0 0 36px; padding: 9px; display: inline-grid; place-items: center;
  background: var(--ios-circle, #3a3a3c); color: var(--ios-circle-ink, rgba(255,255,255,.88)); box-shadow: var(--ios-circle-shadow, 0 1px 2px rgba(0,0,0,.25));
  transition: background .15s ease, filter .15s ease;
}
html.gg-app .gga-x:hover { background: var(--ios-group-press, #3a3a3c); color: var(--ios-label, #fff); }
html.gg-app .gga-x svg { width: 18px; height: 18px; stroke-width: 2.4; }

/* Auswahl wie im Hintergrund-Fenster: Papier ohne Kachel-Fläche, gewähltes Blatt mit Ring und Häkchen, das hineinfedert */
html.gg-app .gga-paper, html.gg-app .gga-sheet-nb .gga-paper {
  background: none !important; border: 0; padding: 4px 2px 2px; gap: 8px; border-radius: 0; color: var(--ios-label2, rgba(var(--a-ebebf5,235,235,245),.6));
}
html.gg-app .gga-paper:active { transform: none; }
html.gg-app .gga-paper .gga-paper-pic img, html.gg-app .gga-sheet-nb .gga-paper .gga-paper-pic img {
  border-radius: 12px; box-shadow: 0 0 0 0.5px var(--ios-sep, rgba(84,84,88,.55)), 0 6px 14px -8px rgba(0,0,0,0.4);
}
html.gg-app .gga-paper .gga-paper-pic {
  border-radius: 12px; transition: box-shadow .2s ease, transform .3s cubic-bezier(.3,1.5,.5,1);
}
html.gg-app .gga-paper:hover .gga-paper-pic { transform: translateY(-2px); }
html.gg-app .gga-paper:active .gga-paper-pic { transform: scale(.95); }
html.gg-app .gga-paper.on .gga-paper-pic { box-shadow: 0 0 0 2.5px var(--ios-sheet, #1c1c1e), 0 0 0 5px var(--ios-tint), 0 8px 18px -8px rgba(0,0,0,0.4); }
html.gg-app .gga-paper.on { color: var(--ios-label, #fff); }
html.gg-app .gga-paper.on > span:last-child { font-weight: 600; }
html.gg-app .gga-paper .gga-paper-pic::after {
  content: ''; position: absolute; right: 6px; bottom: 6px; z-index: 2; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ios-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,0.3);
  opacity: 0; transform: scale(.4); transition: opacity .15s ease, transform .35s cubic-bezier(.3,1.7,.45,1); pointer-events: none;
}
html.gg-app .gga-paper.on .gga-paper-pic::after { opacity: 1; transform: none; }
/* Farben (Heft, Ordner): Ring mit Abstand wie bei der Papierfarbe, federt beim Antippen */
html.gg-app .gga-color {
  border: 0; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.2), 0 3px 8px -4px rgba(0,0,0,0.4);
  transition: box-shadow .2s ease, transform .3s cubic-bezier(.3,1.5,.5,1);
}
html.gg-app .gga-color:active { transform: scale(.9); }
html.gg-app .gga-color.on { box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.2), 0 0 0 2.5px var(--ios-sheet, #1c1c1e), 0 0 0 5px var(--ios-tint); }
html.gg-app .gga-colors { padding: 6px 4px; }
html.gg-app .gga-colors.gga-colors-s { gap: 10px; }
/* Symbole im Ordner-Fenster: gewähltes in Akzentfarbe gefüllt, federt */
html.gg-app .gga-ficons { padding: 6px 6px 8px; margin: 0 -6px; }
html.gg-app .gga-ficon { background: var(--ios-group, #2c2c2e); transition: background .2s ease, color .2s ease, transform .3s cubic-bezier(.3,1.5,.5,1); }
html.gg-app .gga-ficon:active { transform: scale(.9); }
html.gg-app .gga-ficon.on { background: var(--ios-tint); color: #fff; box-shadow: none; }
/* Speichern in → Ordner: gewählter wie gewählte Chips (volle Akzentfarbe) */
html.gg-app .gga-tf.on { background: var(--ios-tint); color: #fff; box-shadow: none; }
html.gg-app .gga-tf.on :is(.gga-tf-none, .gga-tf-plus) { color: inherit; }
html.gg-app .gga-tf { transition: background .2s ease, color .2s ease, filter .15s ease; }

/* Umschalter (Weiß / Creme / Dunkel): graue Spur, Taste in Ruhe hellgrau; gedrückt hebt sie sich als Glas-Blase
   und lässt sich ziehen (js/glass-slider.js, GGGlassSlider.seg) wie „Papier / Eigene“ im Hintergrund-Fenster */
html.gg-app .gga-seg { border-radius: 100px; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.gg-app .gga-seg button { border-radius: 100px; -webkit-user-drag: none; }
html.gg-app .gga-seg-pill { border-radius: 100px; box-shadow: 0 1px 3px rgba(0,0,0,0.18); transition: transform .5s cubic-bezier(.34,1.35,.64,1); }
.gga-seg-pill.gl-js, .gn-pill.gl-js { transition: background .28s ease, border-color .28s ease, box-shadow .28s ease !important; will-change: transform; }
.gga-seg-pill.gl-lifted, .gn-pill.gl-lifted {
  z-index: 2;
  /* gehoben immer eine runde Kapsel wie die Blase in der Navbar (auch in der Werkzeug-Leiste mit eckigerer Taste) */
  border-radius: 999px !important;
  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: 1px solid 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) :is(.gga-seg-pill, .gn-pill).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;
}

/* Kleine Pop-ups der Schreiben-Seite (Textmarker-Farben, Tabelle): wachsen wie die Ausklapp-Menüs aus dem Knopf
   (js/dropdown-glass.js, GGDropGlass.pop); dabei keine eigenen CSS-Übergänge */
.gg-ft-colors.gl-dd-js, .gg-tbl-pick.gl-dd-js { transition: none !important; }
.gg-ft-colors > .gl-dd-in { display: flex; gap: 8px; }
.gg-ft-colors.out, .gg-tbl-pick.out { opacity: 0; transform: translateY(-4px) scale(.96); pointer-events: none; transition: opacity .14s ease, transform .16s ease; }
.gg-ft-colors .gg-hl-dot { transition: box-shadow .2s ease, transform .3s cubic-bezier(.3,1.5,.5,1); }
.gg-ft-colors .gg-hl-dot:active { transform: scale(.88); }
/* Knöpfe zum Anfassen (js/press-glass.js) auch in „Meine Hefte“ und im Heft-Editor: nach oben/unten wischen scrollt,
   seitlich ziehen bewegt den Knopf; kein Markieren von Text beim Ziehen */
:is(.gga-btn, .gga-tbtn, .gga-chip, .gga-crumb-back, .gga-selbar button, .gga-tf, .gga-target, .gga-more, .gga-x, .gn-btn, .gn-ib, .gn-sheet-head [data-x]) {
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* Handy: Fenster als Blatt von unten mit Griff, wie „Hintergrund“ / „Download“ auf der Schreiben-Seite
   (Bewegung: liquid.css .gg-pop-sheet). Kleine Abfragen mit Eingabefeld (.gga-center) bleiben mittig. */
@media (max-width: 560px) {
  .gga-sheet-ov:not(.gga-center) { align-items: flex-end; padding: 0; }
  .gga-sheet-ov:not(.gga-center) .gga-sheet {
    position: relative; width: 100%; max-width: none; max-height: 92vh; max-height: 92dvh;
    border-radius: 28px 28px 0 0; padding-top: 22px;
  }
  .gga-sheet-ov:not(.gga-center) .gga-sheet::before {
    content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--ios-label3, rgba(var(--a-ebebf5,235,235,245),.3));
  }
  .gga-sheet-ov:not(.gga-center) .gga-sheet-act { border-radius: 0; }
}
/* Rückfrage (iOS-Abfrage, auch aus Heft und Editor): längere Wörter wie „Seite leeren“ passen in eine Zeile */
html.gg-app .gg-ios-alert .modern-dialog-btn:not(#_a):not(#_b):not(#_c) { padding-left: 8px !important; padding-right: 8px !important; font-size: 16px !important; }

/* ══ Mehr Platz 2026-11-09 (Wunsch Marflux: „Meine Hefte“ größer, Leiste links größer) ═══════════════════════════════
 * Nur große Bildschirme (ab 900 px, Leiste links). Handy und iPad hochkant (Leiste unten) bleiben wie sie sind.
 * „Meine Hefte“: nutzt die Breite (bis 1680 px statt 1120 px, so passen mehr Hefte nebeneinander), Hefte und Ordner
 * etwas größer. „Schreiben“ und „Meine Schrift“ behalten ihre Breite. Leiste: 272 px (ab 1200 px Bildschirm), 288 px
 * (ab 1600 px), Einträge und Ordner größer und leichter zu treffen. */
@media (min-width: 900px) {
  html.gg-app[data-gga-view="books"] .main-content { max-width: 1680px; padding-left: 20px; padding-right: 20px; }
  html.gg-app[data-gga-view="books"] #gga-head { max-width: 1680px; padding-left: 20px; padding-right: 20px; }
  html.gg-app[data-gga-view="books"] #gga-books { padding: 18px 24px 28px; }
}
@media (min-width: 1200px) {
  html.gg-app { --gga-side: 272px; }
  #gga-side { padding-left: 14px; padding-right: 14px; }
  .gga-brand { padding: 6px 12px 22px; }
  .gga-brand img { width: 36px; height: 36px; }
  .gga-brand-name { font-size: 20px; }
  .gga-nav { gap: 4px; }
  .gga-nav-item { height: 50px; padding: 0 14px; gap: 13px; font-size: 16.5px; border-radius: 13px; }
  .gga-nav-item .gga-ico { width: 24px; height: 24px; flex-basis: 24px; }
  .gga-side-sec { margin-top: 26px; }
  .gga-side-h { padding: 0 14px 8px; font-size: 13px; }
  .gga-side-f { height: 40px; padding: 0 14px; gap: 12px; font-size: 15.5px; border-radius: 11px; }
  .gga-side-f .gga-fmini-s { width: 22px; height: 17px; flex-basis: 22px; }
  .gga-side-shico, .gga-side-shico svg { width: 22px; height: 22px; flex-basis: 22px; }
  .gga-side-n { font-size: 13.5px; }
  .gga-side-more { padding-left: 48px; font-size: 14px; }
  .gga-acc-user { padding: 10px 12px; }
  .gga-avatar { width: 36px; height: 36px; flex-basis: 36px; font-size: 15px; }
  .gga-acc-text .gga-acc-mail { font-size: 14px; }
  .gga-acc-text small { font-size: 12.5px; }
  .gga-legal { padding: 8px 14px 0; }
  .gga-legal a { font-size: 12px; }
  /* Hefte und Ordner etwas größer (es ist jetzt mehr Platz da) */
  .gga-grid.gga-size-s { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .gga-grid.gga-size-m { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 26px 20px; }
  .gga-grid.gga-size-l { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 30px 24px; }
  .gga-grid.gga-size-m .gga-card-title { font-size: 15px; }
  .gga-grid.gga-size-l .gga-card-title { font-size: 16px; }
  .gga-grid:not(.gga-size-s) .gga-card-meta { font-size: 12.5px; }
  .gga-fgrid { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 12px; }
  .gga-fgrid.gga-size-s { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
  .gga-fgrid.gga-size-l { grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); }
  .gga-ftile-name { font-size: 16px; }
  .gga-ftile-meta { font-size: 13px; }
}
@media (min-width: 1600px) {
  html.gg-app { --gga-side: 288px; }
  html.gg-app[data-gga-view="books"] .main-content,
  html.gg-app[data-gga-view="books"] #gga-head { padding-left: 40px; padding-right: 40px; }
}