/* Shared visual treatment for the homepage and editor. */
:root[data-theme="light"], :root:not([data-theme]) {
  --radius: 14px;
  --radius-sm: 9px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { --primary: #1648dc; --primary-h: #1239ad; --text: #141d39; --bg: #f7f9ff; --bg-alt: #eef2fc; }
}
:root[data-theme="light"] { --primary: #1648dc; --primary-h: #1239ad; --text: #141d39; --bg: #f7f9ff; --bg-alt: #eef2fc; }
.local-chip { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; margin: 0; padding: 5px 10px; border-radius: 99px; background: var(--trust-bg); color: var(--trust); font-size: .8rem; font-weight: 750; white-space: nowrap; }
.home-hero { display: grid; grid-template-columns: 1.04fr 1fr; align-items: center; gap: clamp(24px, 5vw, 68px); }
.hero .home-copy h1 { max-width: 15ch; font-size: clamp(2.4rem, 5.4vw, 4.45rem); line-height: 1.02; letter-spacing: -.065em; margin: 16px 0; }
.hero .home-copy h1 em { font-style: normal; color: var(--primary); }
.home-copy .lede { max-width: 42ch; }
.home-open { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; padding: 15px; border: 1px dashed var(--primary); border-radius: 14px; background: var(--primary-bg); }
.home-open img { padding: 5px; background: #fff; border-radius: 8px; }
.home-open div { flex: 1 0 145px; }
.home-open p { margin: 0; color: var(--muted); font-size: .82rem; }
.home-open .btn { white-space: nowrap; }
.home-preview { margin: 0; min-width: 0; padding: clamp(12px, 2.3vw, 30px); border: 1px solid var(--border); border-radius: 24px; background: radial-gradient(ellipse at 90% 10%, var(--primary-bg), transparent 65%), var(--bg-alt); }
.preview-window { overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-lg); }
.preview-top, .preview-tools { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: .75rem; font-weight: 700; }
.preview-top { justify-content: space-between; flex-wrap: wrap; }
.preview-top span:last-child { color: var(--muted); }
.preview-tools b { color: var(--primary-ink); background: var(--primary); padding: 4px 7px; border-radius: 6px; }
.preview-stage { display: grid; grid-template-columns: minmax(35px, 16%) 1fr; background: var(--bg-alt); }
.preview-rail { display: grid; align-content: start; gap: 8px; padding: 10px 8px; border-right: 1px solid var(--border); background: var(--surface-2); }
.preview-rail i { aspect-ratio: 3/4; background: repeating-linear-gradient(#fff 0 7px,#e1e7f5 7px 8px); border: 1px solid #cbd6ec; border-radius: 4px; }
.preview-rail i:first-child { outline: 2px solid var(--primary); outline-offset: -2px; }
.preview-paper { min-width: 0; width: min(85%, 260px); margin: 16px auto; padding: clamp(12px, 2.8vw, 28px); background: #fff; color: #18243e; box-shadow: 0 3px 12px #162e5724; }
.preview-paper small { color: #3557ae; letter-spacing: .1em; font-weight: 800; }
.preview-paper strong { display: block; font-size: clamp(1.4rem, 2.8vw, 2.1rem); letter-spacing: -.045em; }
.preview-paper p { margin: 4px 0 12px; font-size: .72rem; }
.preview-line { height: 4px; margin: 7px 0; background: #e0e7f6; }
.preview-line + .preview-line { width: 70%; }
.preview-paper mark { display: inline-block; margin: 8px 0; padding: 2px 4px; background: #ffed8c; color: #18243e; font-size: .72rem; }
.preview-signature { font: italic 1.12rem Georgia, serif; color: #1746c8; }
.home-preview figcaption { margin-top: 12px; color: var(--muted); text-align: center; font-size: .78rem; }
.steps { counter-reset: workflow; }
.step { counter-increment: workflow; }
.step::before { content: "0" counter(workflow); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 10px; border-radius: 10px; background: var(--primary-bg); color: var(--primary); font-weight: 800; }
.appbar .tab { border: 1px solid var(--border); }
.appbar .tab.active { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.appbar .local-chip { flex: 0 0 auto; }
.appbar__save { min-height: 40px; }
.work { background: var(--bg-alt); }
.stage-bar { background: var(--surface); }
.stage-wrap { background: var(--bg-alt); }
.side__head { color: var(--text); }
.rail__head { color: var(--text); }
.dropzone__inner { border-color: var(--primary); background: var(--primary-bg); }
.grid-view { background: var(--bg-alt); }
.grid-heading { max-width: var(--maxw); margin: 0 auto 16px; }
.grid-heading h1 { margin: 0 0 4px; font-size: 1.4rem; letter-spacing: -.025em; }
.grid-heading p { margin: 0; color: var(--muted); font-size: .85rem; }
.page-card { box-shadow: var(--shadow); }
.page-card__num { display: grid; place-items: center; min-width: 25px; height: 25px; border-radius: 6px; background: var(--surface-2); }
.page-card.selected .page-card__num { background: var(--primary); color: var(--primary-ink); }
.page-card:focus-within .page-card__acts { opacity: 1; }
#selCount:not(:empty) { padding: 6px 10px; border-radius: 8px; background: var(--primary-bg); color: var(--primary); white-space: nowrap; }
@media (max-width: 1250px) { .appbar .local-chip { display: none; } }
@media (max-width: 860px) { .home-hero { grid-template-columns: 1fr; } .hero .home-copy h1 { max-width: 19ch; } .home-preview { width: min(100%, 530px); margin-inline: auto; } }
@media (max-width: 900px) {
  .appbar { height: 58px; }
  .appbar__save { min-width: 44px; min-height: 44px; }
  .tabbar .tabbar__btn { min-height: 48px; }
  .side { border-radius: 18px 18px 0 0; overflow: hidden; }
  .side .props { overflow: auto; }
}
@media (max-width: 560px) { .grid-heading p { font-size: .8rem; } }
.site-nav .btn--primary { color: var(--primary-ink); }
.section--alt .lede.center { margin-inline: auto; }
.home-open + .claims { margin-top: 12px; }
/* Reference layouts */
.hero .wrap { max-width: 1440px; }
.home-open { flex-direction: column; justify-content: center; text-align: center; gap: 8px; padding: 20px 12px; }
.home-open div { flex: none; }
.home-open strong { font-size: 1.08rem; }
.home-open img { width: 44px; height: 44px; padding: 7px; }
.home-preview { padding: 12px; border-radius: 18px; }
.preview-window { box-shadow: var(--shadow); }
.preview-stage { grid-template-columns: minmax(96px, 28%) 1fr; }
.preview-rail { gap: 5px; }
.preview-rail span { padding: 6px 4px; font-size: clamp(.61rem, 1vw, .78rem); font-weight: 650; }
.preview-rail .preview-active { color: var(--primary); background: var(--primary-bg); border-radius: 6px; }
.preview-paper { width: calc(100% - 24px); max-width: 340px; min-height: 220px; }
.appbar__brand svg { width: 34px; height: 34px; padding: 5px; border-radius: 8px; background: var(--primary); color: var(--primary-ink); }
.ocr-sidebar { display: none; }
body[data-tab="text"][data-view="annot"] .side { display: none; }
body[data-tab="text"][data-view="annot"] .ocr-sidebar { display: block; flex: 0 0 clamp(240px, 29vw, 390px); overflow: auto; padding: 16px; background: var(--surface); border-left: 1px solid var(--border); }
.ocr-sidebar h2 { font-size: 1.18rem; margin: 0 0 4px; }
.ocr-sidebar p { font-size: .85rem; color: var(--muted); }
.ocr-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.ocr-controls #btnOcr { background: var(--primary-bg); color: var(--primary); }
.ocr-sidebar .local-chip { color: var(--trust); }
.ocr-result, .ocr-review { margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.ocr-result summary { cursor: pointer; font-weight: 700; }
.ocr-result pre { max-height: 160px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .8rem; }
.ocr-review h3 { margin: 0; }
.ocr-review p { margin: 6px 0 10px; }
.pages { max-width: 1440px; }
.page-card.selected { box-shadow: inset 0 0 0 1px var(--primary); }
@media (max-width: 900px) {
  /* Als Blatt über dem unteren Rand, wie die Eigenschaften auf dem Telefon.
     Eine Spalte unter der Arbeitsfläche würde die Miniaturen über die Seite
     schieben und die Bühne auf wenige Pixel zusammendrücken. */
  body[data-tab="text"][data-view="annot"] .ocr-sidebar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
    max-height: 46%; border-left: 0; border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0; padding: 10px 12px;
    box-shadow: 0 -6px 20px rgba(16,24,40,.14);
  }
  .tabbar__btn.active { background: var(--primary-bg); }
}

/* Desktop editor composition from the reference mockup. */
.appbar__brand small { border-left: 1px solid var(--border); padding-left: 9px; font-size: .78rem; font-weight: 500; color: var(--muted); }
.appbar .tab img, .workspace-pointer img, .workspace-history img { vertical-align: middle; }
.appbar .tab img { margin-right: 5px; }
.appbar .tab.active img { filter: brightness(0) invert(1); }
.rail-label small { display: block; margin-top: 2px; font-weight: 500; font-size: .78rem; color: var(--muted); }
.workspace-pointer, .workspace-history { display: none; }
.annotation-summary { display: flex; gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.annotation-summary img { padding: 6px; border-radius: 8px; background: #fff3ae; }
.annotation-summary strong, .annotation-summary small { display: block; }
.annotation-summary small { color: var(--muted); }
.props:has(.annotation-summary) > h3 { display: none; }
.highlight-colors { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.highlight-colors legend { padding: 0 0 8px; font-size: .86rem; font-weight: 700; }
.highlight-swatch { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--swatch); cursor: pointer; }
.highlight-swatch[aria-pressed="true"] { outline: 2px solid var(--primary); outline-offset: 2px; }
.opacity-value { float: right; color: var(--muted); }
.annotation-options { padding: 12px 0; border-block: 1px solid var(--border); }
.annotation-options summary { cursor: pointer; font-weight: 700; }
.annotation-options .prop { margin-top: 10px; }
.props:has(.annotation-summary) .prop-del { margin-top: 0; background: var(--bg-alt); color: var(--text); border-color: var(--border); }
.props:has(.annotation-summary) .prop-del:hover { color: var(--danger); background: var(--danger-bg); }
@media (min-width: 901px) {
  .appbar { height: 64px; padding-inline: 16px; gap: clamp(7px, 1vw, 16px); }
  .appbar__brand span, .appbar__save .lbl { display: inline; }
  .appbar .tab { padding: 8px clamp(6px, .8vw, 12px); }
  .appbar__doc { display: none; }
  body[data-view="annot"] .appbar :is(#btnUndo,#btnRedo) { display: none; }
  body[data-view="annot"] .work { gap: 10px; padding: 8px 8px 0; }
  body[data-view="annot"] .rail { flex-basis: clamp(142px, 14vw, 220px); width: clamp(142px, 14vw, 220px); }
  body[data-view="annot"] .rail-toggle { left: calc(clamp(142px, 14vw, 220px) + 8px); }
  body[data-view="annot"].rail-off .rail-toggle { left: 0; }
  body[data-view="annot"] .side { flex-basis: clamp(238px, 24vw, 360px); width: clamp(238px, 24vw, 360px); }
  .rail, .side, body[data-tab="text"][data-view="annot"] .ocr-sidebar { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
  body[data-tab="text"][data-view="annot"] .ocr-sidebar { overflow: auto; }
  .rail__head, .side__head { font-size: 1rem; letter-spacing: normal; text-transform: none; border-bottom: 0; }
  .rail__list { padding: 8px 12px 14px; gap: 13px; }
  .rcard__sheet { width: min(82%, 122px); }
  .rcard__n { border-radius: 6px; background: var(--bg-alt); }
  .stage-bar { flex-wrap: nowrap; border: 1px solid var(--border); border-radius: 11px; padding: 5px 8px; }
  .stage-wrap { place-items: start center; padding: 10px 16px 24px; }
  .stage { box-shadow: 0 4px 20px #283d6929; }
  .stage-label { min-width: 42px; white-space: nowrap; }
  #annotPageLabel { font-size: .75rem; }
  .workspace-pointer, .workspace-history { display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .workspace-pointer { background: var(--primary-bg); }
}
@media (max-width: 1180px) { .appbar__brand small { display: none; } }
@media (min-width: 901px) and (max-width: 1040px) {
  .appbar .tab img { display: none; }
  .stage-bar { flex-wrap: wrap; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.tab:not(.active), .workspace-pointer, .workspace-history) img { filter: brightness(0) invert(1); }
}
:root[data-theme="dark"] :is(.tab:not(.active), .workspace-pointer, .workspace-history) img { filter: brightness(0) invert(1); }

.workspace-pan, .workspace-pan .stage { cursor: grab !important; }
.workspace-pan:active, .workspace-pan .stage:active { cursor: grabbing !important; }
#workspaceHand:not([aria-pressed="true"]) { background: transparent; }
.stage-wrap { grid-template-columns: minmax(min-content, 1fr); }

/* Öffnen-Kasten als rechte Spalte des Hero (statt der Beispielvorschau). */
.home-open--hero {
  margin-top: 0; min-height: clamp(260px, 30vw, 360px);
  padding: clamp(28px, 4vw, 48px) 24px; gap: 12px;
  border-width: 2px; border-radius: 20px;
}
.home-open--hero img { width: 64px; height: 64px; padding: 14px; border-radius: 14px; box-shadow: var(--shadow); }
.home-open--hero strong { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
.home-open--hero p { font-size: .9rem; }
.home-open--hero .btn { padding: 12px 22px; font-size: 1rem; }
.home-copy .claims { margin-top: 22px; }
@media (max-width: 860px) {
  .home-open--hero { min-height: 0; width: 100%; }
}

/* Eigene Seiten für Werkzeuge und Datenschutz */
.page-head { padding-top: clamp(36px, 5vw, 64px); }
.page-head h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; margin: 12px 0 10px; }
.page-head + .section--alt { padding-top: 48px; }
/* Faktenkarten sind keine Links – kein Anheben beim Darüberfahren. */
div.tool, div.tool:hover { cursor: default; transform: none; box-shadow: none; border-color: var(--border); }
.home-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-links .tool b { font-size: 1.05rem; color: var(--primary); }
@media (max-width: 640px) { .home-links { grid-template-columns: 1fr; } }

/* Schreibmaschinen-Effekt in der Überschrift.
   Alle Begriffe liegen unsichtbar in derselben Rasterzelle; die Zeile ist
   damit von Beginn an so groß wie der längste, und nichts darunter springt. */
/* Die getippte Zeile bleibt immer einzeilig: Ist die Spalte zu schmal für
   „Kein Konto erforderlich“ (rund 9,6 em), wird nur diese Zeile so weit
   verkleinert, dass sie passt – sonst entstünde eine leere zweite Zeile. */
.hero .home-copy { container-type: inline-size; }
.hero .home-copy h1 { max-width: none; }
.typer { display: inline-block; white-space: nowrap; font-size: min(1em, 10cqi); }
.typer__box { display: inline-grid; vertical-align: top; }
.typer__box > * { grid-area: 1 / 1; }
.typer__size { visibility: hidden; }
.typer__live { white-space: nowrap; }
.typer__caret {
  display: inline-block; width: .08em; height: .9em; margin-left: .06em;
  vertical-align: -.08em; background: currentColor; border-radius: 1px;
  animation: typer-blink 1s steps(1) infinite;
}
@keyframes typer-blink { 50% { opacity: 0; } }
.typer--still .typer__caret { display: none; }
@media (prefers-reduced-motion: reduce) { .typer__caret { animation: none; } }
/* Werkzeug-Landeseiten und Fußzeilen-Links */
.crumbs { font-size: .84rem; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }
.tool-hero .home-copy h1 em { font-style: normal; color: var(--primary); }
div.tool { box-shadow: none; }
div.tool:hover { transform: none; border-color: var(--border); box-shadow: none; }
.site-footer .footer-tools { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px 22px;
  padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }