/* Saldenruh Steuerkanzlei (erfunden). Seitenstil. Engine bleibt unberührt. */
:root {
  --sc-canvas: #CBB696;
  --sc-surface: #FBFAF6;
  --sc-ink: #1C2420;
  --sc-ink-soft: #46524C;
  --sc-accent: #1F5E47;
  --sc-accent-ink: #FBFAF6;
  --sc-font-display: "Spline Sans", system-ui, sans-serif;
  --sc-font-text: "Atkinson Hyperlegible", system-ui, sans-serif;
  --sc-font-mono: "Spline Sans Mono", ui-monospace, monospace;
  --sc-shadow-color: 32 38% 22%;
  --papier: #FBFAF6;
  --thermo: #F7F6F1;
  --holz: url("assets/holz.webp");
  --wand: #E3E6E0;
  --r: 3px;
  --schatten: 0 1px 1px hsl(32 38% 22% / .18), 0 6px 14px -4px hsl(32 38% 22% / .28), 0 22px 40px -18px hsl(32 38% 22% / .35);
  --register-b: 64px;
}

body { background: var(--sc-canvas); }
.sc-display { font-weight: 600; }
:where(.sc-nums, td, dd) { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Tisch -- */
.tisch { background: var(--holz) center / 1024px repeat, var(--sc-canvas); }
.tisch__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

.papier {
  background: var(--papier);
  color: var(--sc-ink);
  border-radius: var(--r);
  position: relative;
}
.papier::after { /* Papierfaser: feines Rauschen auf jeder Fläche */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: .5;
  background-image: radial-gradient(hsl(40 20% 50% / .08) 0.6px, transparent 0.7px);
  background-size: 5px 5px;
}
.papier--karte { box-shadow: var(--schatten); padding: clamp(1.1rem, 2vw, 1.8rem); }
.schatten { filter: drop-shadow(0 2px 2px hsl(32 38% 22% / .2)) drop-shadow(0 14px 18px hsl(32 38% 22% / .25)); }

.stempel {
  position: absolute; right: .7rem; top: 42%;
  font: 600 .78rem/1 var(--sc-font-display); letter-spacing: .14em; text-transform: uppercase;
  color: #9A3B2E; border: 2px solid currentColor; border-radius: 4px; padding: .3rem .5rem .25rem;
  transform: rotate(-14deg); opacity: .78; mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------- Kopf -- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem var(--sc-gutter); pointer-events: none;
}
.kopf > * { pointer-events: auto; }
.wortmarke { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--sc-ink);
  font: 700 1.2rem/1 var(--sc-font-display); letter-spacing: -.02em;
  background: var(--papier); padding: .45rem .8rem .45rem .5rem; border-radius: var(--r); box-shadow: var(--schatten); }
.wortmarke svg { width: 1.5rem; height: 1.5rem; color: var(--sc-accent); }
.kopf__demo { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink); background: color-mix(in oklab, var(--papier) 82%, transparent);
  padding: .3rem .6rem; border-radius: var(--r); margin-right: 58px; }

/* ------------------------------------------------------------ Register -- */
.register { position: fixed; right: 0; top: 50%; translate: 0 -50%; z-index: 55; }
.register ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.register a {
  display: flex; align-items: center; justify-content: flex-end;
  width: 54px; height: 30px; padding-right: 9px;
  background: var(--papier); color: var(--sc-ink-soft); text-decoration: none;
  font: 600 .8rem/1 var(--sc-font-display); letter-spacing: .02em;
  border-radius: 5px 0 0 5px; box-shadow: -2px 2px 6px hsl(32 38% 22% / .22);
  transform: translateX(10px);
  transition: transform 180ms var(--sc-ease-out), background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out);
}
.register a.ist-voll { background: var(--sc-accent); color: var(--sc-accent-ink); }
.register a.ist-dran { transform: translateX(0); box-shadow: -3px 2px 10px hsl(32 38% 22% / .35); color: var(--sc-ink); outline: 2px solid var(--sc-accent); outline-offset: -2px; }
.register a.ist-voll.ist-dran { color: var(--sc-accent-ink); }
.register__ordner { margin-top: 10px; }
.register__ordner a { width: 74px; background: var(--sc-ink); color: var(--papier); }
@media (hover: hover) and (pointer: fine) { .register a:hover { transform: translateX(0); } }

/* ----------------------------------------------------------------- Knopf -- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .8rem 1.4rem;
  background: var(--sc-accent); color: var(--sc-accent-ink); border: 0; border-radius: var(--r); cursor: pointer;
  font: 600 1rem/1.1 var(--sc-font-display); text-decoration: none; white-space: nowrap; position: relative; overflow: hidden;
  box-shadow: 0 1px 0 hsl(160 40% 60% / .35) inset, 0 6px 14px -6px hsl(160 50% 15% / .6);
  transition: transform 140ms var(--sc-ease-out), box-shadow 180ms var(--sc-ease-out);
}
.knopf::before { /* Linienraster im Knopf, ein Schimmer zieht alle 5 s durch */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, hsl(0 0% 100% / .06) 0 1px, transparent 1px 6px);
  -webkit-mask: linear-gradient(100deg, transparent 30%, #000 50%, transparent 70%) -200% 0 / 250% 100% no-repeat;
          mask: linear-gradient(100deg, transparent 30%, #000 50%, transparent 70%) -200% 0 / 250% 100% no-repeat;
  animation: schimmer 5s var(--sc-ease-in-out) infinite;
}
@keyframes schimmer { 0%, 55% { -webkit-mask-position: -200% 0; mask-position: -200% 0; } 100% { -webkit-mask-position: 200% 0; mask-position: 200% 0; } }
.knopf:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .knopf:hover { transform: translateY(-2px); } }
.textknopf { background: none; border: 0; padding: .6rem .2rem; cursor: pointer; color: var(--sc-ink);
  font: 600 1rem/1.2 var(--sc-font-display); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; }

/* ------------------------------------------------------------ 1 Karton -- */
.briefbogen {
  position: absolute; z-index: 5; left: var(--sc-gutter); top: clamp(5.5rem, 13vh, 8rem);
  width: min(35rem, 46vw); padding: clamp(1.4rem, 2.6vw, 2.4rem);
  background: var(--papier); border-radius: var(--r); box-shadow: var(--schatten); rotate: -1.2deg;
}
.briefbogen__kopf { margin: 0 0 1.4rem; padding-bottom: .7rem; border-bottom: 2px solid var(--sc-accent);
  font: 600 .92rem/1.2 var(--sc-font-display); letter-spacing: .01em; color: var(--sc-accent);
  display: flex; justify-content: space-between; gap: 1rem; }
.briefbogen__kopf span { color: var(--sc-ink-soft); }
.briefbogen__titel { margin: 0; font: 700 clamp(2.3rem, 1.2rem + 3.1vw, 4.3rem)/1 var(--sc-font-display); letter-spacing: -.035em; text-wrap: balance; }
.briefbogen__text { margin: 1.1rem 0 1.5rem; color: var(--sc-ink-soft); max-width: 40ch; text-wrap: pretty; }
.briefbogen__klein { margin: .7rem 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.ding { position: absolute; z-index: 3; pointer-events: none; }
.ding--stift { width: min(30rem, 40vw); left: 38%; bottom: 7%; rotate: -16deg; }
.ding--klammern { width: 7rem; left: 44%; top: 15%; }

/* ------------------------------------------------------------ 2 Belege -- */
.tisch--belege { display: flex; align-items: center; }
.leiste { gap: clamp(2.5rem, 5vw, 5rem); padding-inline: var(--sc-gutter) calc(var(--sc-gutter) + 70px); align-items: center; }
.leiste__kopf, .leiste__ende { flex: 0 0 min(25rem, 80vw); }
.leiste__kopf h2 { margin: 0 0 .9rem; text-wrap: balance; }
.leiste__kopf p, .leiste__ende p { margin: 0; color: var(--sc-ink-soft); }
.leiste__ende h3 { margin: 0 0 .6rem; font: 600 var(--sc-t-xl)/1.1 var(--sc-font-display); letter-spacing: -.02em; }
.leiste__ende { rotate: 1.5deg; }
.probe { flex: 0 0 auto; display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.2rem); }
.probe > .schatten { rotate: var(--dreh); }
.probe__notiz { width: min(19rem, 70vw); background: var(--papier); padding: 1.1rem 1.25rem; border-radius: var(--r); box-shadow: var(--schatten); }
.probe__notiz h3 { margin: 0 0 .5rem; font: 600 1.15rem/1.2 var(--sc-font-display); letter-spacing: -.01em; }
.probe__notiz p { margin: 0; color: var(--sc-ink-soft); font-size: .98rem; line-height: 1.55; }

/* Kassenzettel: Thermopapier mit Zackenrand oben und unten */
.papier--bon {
  --z: 7px; width: 15.5rem; padding: 1.5rem 1.2rem 1.6rem; background: var(--thermo); border-radius: 0;
  font: 400 .8rem/1.45 var(--sc-font-mono); color: #2A2F2C;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--z)) 51% repeat-x,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) 51% repeat-x;
          mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--z)) 51% repeat-x,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) 51% repeat-x;
}
.bon__kopf { margin: 0 0 .9rem; text-align: center; }
.bon__kopf b { display: block; font-weight: 600; font-size: .9rem; }
.bon__posten { width: 100%; border-collapse: collapse; }
.bon__posten td { padding: .1rem 0; vertical-align: top; }
.bon__posten td:last-child { text-align: right; padding-left: .6rem; }
.bon__summe { display: flex; justify-content: space-between; margin: .7rem 0 .6rem; padding-top: .45rem; border-top: 1px dashed #6E7470; font-weight: 600; font-size: .92rem; }
.bon__fuss { margin: 0; text-align: center; color: #4E5551; }
.bon__hand { margin: .8rem 0 0; font: italic 400 .95rem/1.3 var(--sc-font-text); color: #1F3A5E; rotate: -2deg; }

.papier--rechnung { width: 17rem; aspect-ratio: 1 / 1.414; padding: 1.4rem 1.3rem; font-size: .78rem; line-height: 1.45; }
.re__absender { margin: 0 0 1.4rem; padding-bottom: .5rem; border-bottom: 2px solid #7A5A3A; color: #4E5551; }
.re__absender b { color: #2A2F2C; display: block; font: 700 .95rem/1.2 var(--sc-font-display); }
.re__titel { margin: 0; font: 700 1rem/1.2 var(--sc-font-display); }
.re__datum { margin: 0 0 1rem; color: #4E5551; }
.re__tabelle { width: 100%; border-collapse: collapse; }
.re__tabelle td { padding: .25rem 0; border-bottom: 1px solid #E2E2DC; }
.re__tabelle td:last-child { text-align: right; }
.re__summe td { font-weight: 700; border-bottom: 2px solid #2A2F2C; }
.re__fuss { margin: 1rem 0 0; color: #4E5551; }

.papier--auszug { width: 21rem; padding: 1.1rem 1.2rem 1.3rem; background: #EEF1F1; font-size: .78rem; }
.az__kopf { display: flex; justify-content: space-between; margin: 0 0 .8rem; padding-bottom: .5rem; border-bottom: 2px solid #3E5C6E; }
.az__kopf b { font-family: var(--sc-font-display); }
.az__tabelle { width: 100%; border-collapse: collapse; }
.az__tabelle td { padding: .3rem .3rem .3rem 0; border-bottom: 1px solid #D5DCDC; }
.az__tabelle td:last-child { text-align: right; }

.papier--spende { width: 17rem; padding: 1.3rem; background: #F5F3EA; font-size: .82rem; border: 1px solid #DCD8C8; }
.sp__kopf { margin: 0 0 .3rem; font: 700 .95rem/1.2 var(--sc-font-display); }
.sp__titel { margin: 0 0 1rem; color: #4E5551; }
.sp__felder { margin: 0; display: grid; gap: .55rem; }
.sp__felder div { border-bottom: 1px solid #BEB9A6; padding-bottom: .2rem; }
.sp__felder dt { font-size: .7rem; color: #5A5F58; }
.sp__felder dd { margin: 0; font: italic 400 1rem/1.3 var(--sc-font-text); color: #1F3A5E; }

/* ------------------------------------------------------------- 3 Brief -- */
.tisch--brief { padding-block: clamp(4rem, 8vw, 8rem); }
.brief__raster { display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 16rem); gap: clamp(2rem, 5vw, 5rem); align-items: start; justify-content: center; padding-right: calc(var(--sc-gutter) + 60px); }
.brief__schatten { rotate: .6deg; }
.papier--brief { padding: clamp(1.6rem, 4vw, 3.2rem); }
.papier--brief p { margin: 0; max-width: 60ch; text-wrap: pretty; }
.papier--brief > * + * { margin-top: 1rem; }
.papier--brief h2 { margin-top: 2rem; text-wrap: balance; }
.brief__kopf { font: 600 .9rem/1.3 var(--sc-font-display); color: var(--sc-accent); }
.brief__gruss { padding-top: .8rem; }
.unterschrift { width: 11rem; margin-top: .3rem !important; }
.brief__name { color: var(--sc-ink-soft); }
.haftnotiz {
  margin-top: 6rem; padding: 1.3rem 1.2rem 1.6rem; rotate: -3deg;
  background: linear-gradient(#EDF1C9, #E4E9B8); color: #2A2F22; box-shadow: var(--schatten);
  font: 400 1.05rem/1.45 var(--sc-font-text);
}
.haftnotiz p { margin: 0; }

/* -------------------------------------------------------- 4 Sortieren -- */
.zettel {
  position: absolute; z-index: 5; left: var(--sc-gutter); top: clamp(5rem, 11vh, 7rem);
  width: min(27rem, 40vw); display: grid; rotate: -.8deg; align-items: start;
}
.zettel > div { grid-area: 1 / 1; background: var(--papier); border-radius: var(--r); box-shadow: var(--schatten); padding: 1.3rem 1.5rem; }
.zettel__titel { margin: 0 0 .45rem; font: 700 var(--sc-t-xl)/1.08 var(--sc-font-display); letter-spacing: -.025em; }
.zettel p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }

/* ------------------------------------------------------------- 5 Regal -- */
.regal { background: var(--wand); color: var(--sc-ink); position: relative; padding-block: clamp(4rem, 9vw, 9rem); }
.regal::before { /* Kante der Tischplatte oben, Schatten auf die Wand */
  content: ""; position: absolute; inset: 0 0 auto; height: 18px; background: var(--holz) center / 1024px, var(--sc-canvas);
  box-shadow: 0 6px 14px hsl(32 38% 22% / .28);
}
.regal__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-right: calc(var(--sc-gutter) + 60px); }
.regal .sc-body { color: var(--sc-ink-soft); }
.leistungen { margin: 1.6rem 0 0; display: grid; gap: 0; }
.leistungen div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid hsl(150 8% 40% / .3); }
.leistungen dt { font: 600 1rem/1.4 var(--sc-font-display); }
.leistungen dd { margin: 0; color: var(--sc-ink-soft); }
.regal__bild { margin: 0; }
.brett {
  display: flex; align-items: flex-end; gap: 6px; height: clamp(18rem, 34vw, 26rem);
  padding: 0 1.4rem; border-bottom: 22px solid #B79F7C; position: relative;
  background: linear-gradient(180deg, hsl(80 6% 84%) , hsl(80 6% 78%));
  box-shadow: inset 0 18px 30px -18px hsl(150 10% 20% / .35), 0 18px 24px -14px hsl(32 38% 22% / .45);
}
.ordner {
  --f: #3D4744; flex: 0 0 clamp(3.2rem, 5.6vw, 4.6rem); height: 92%; position: relative;
  background: linear-gradient(90deg, color-mix(in oklab, var(--f) 80%, #000) 0 6%, var(--f) 12% 88%, color-mix(in oklab, var(--f) 75%, #000) 94%);
  border-radius: 3px 3px 0 0; box-shadow: 2px 0 4px hsl(150 10% 10% / .25);
}
.ordner i { /* Rückenschild */
  position: absolute; left: 16%; right: 16%; top: 9%; height: 52%; background: var(--papier); border-radius: 2px;
  font: normal 600 .82rem/1 var(--sc-font-display); color: var(--sc-ink); writing-mode: vertical-rl; rotate: 180deg;
  display: flex; align-items: center; justify-content: center; letter-spacing: .02em; overflow: hidden;
}
.ordner::after { content: ""; position: absolute; left: 50%; bottom: 12%; width: 46%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: color-mix(in oklab, var(--f) 55%, #000); box-shadow: inset 0 2px 3px hsl(0 0% 0% / .5); }
.ordner--schief { rotate: -7deg; transform-origin: bottom right; margin-left: 10px; }
.ordner--neu { --f: var(--sc-accent); transform: translateY(var(--rein, 0px)); }
.ordner--neu i { color: var(--sc-accent); }
.regal__bild figcaption { margin-top: 1.2rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* ----------------------------------------------------------- 6 Ordner -- */
.tisch--ordner { display: flex; flex-direction: column; justify-content: center; }
.schluss { display: grid; grid-template-columns: minmax(0, 36rem) auto; gap: clamp(2rem, 6vw, 6rem); align-items: center; justify-content: center;
  padding: 5rem calc(var(--sc-gutter) + 70px) 3.5rem var(--sc-gutter); }
.schluss__links { rotate: -.5deg; }
.schluss__links h2 { margin: 0; }
.schluss__lead { margin: .7rem 0 1.2rem; color: var(--sc-ink-soft); }
.arten { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1rem; }
.arten legend { padding: 0; margin-bottom: .5rem; font: 600 .95rem/1.2 var(--sc-font-display); }
.arten label { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; cursor: pointer; font-size: .98rem; }
.arten input { width: 1.15rem; height: 1.15rem; margin: 0; flex: none; }
.schluss__knoepfe { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.3rem; }
.schluss__hinweis { margin: .7rem 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); min-height: 1.5em; }

.ruecken { /* Ordnerrücken: grüner Karton, Etikett, Griffloch. Verhältnis 80 mm Ordner */
  width: clamp(9rem, 12vw, 11rem); height: min(66svh, 34rem); position: relative; rotate: 2deg;
  background: linear-gradient(90deg, #17483A 0 5%, var(--sc-accent) 12% 88%, #17483A 95%);
  border-radius: 4px; box-shadow: var(--schatten); padding: 9% 12% 0;
}
.ruecken__etikett { background: var(--papier); height: 64%; border-radius: 2px; padding: .8rem .7rem; display: flex; flex-direction: column; overflow: hidden; }
.ruecken__loch { position: absolute; left: 50%; bottom: 8%; translate: -50% 0; width: 46%; aspect-ratio: 1; border-radius: 50%; background: #123A2E; box-shadow: inset 0 3px 5px hsl(0 0% 0% / .55); }
.et__kanzlei { margin: 0; font: 600 .7rem/1.2 var(--sc-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-accent); }
.et__jahr { margin: .3rem 0 0; font: 700 2.4rem/1 var(--sc-font-display); letter-spacing: -.04em; }
.et__was { margin: .2rem 0 .6rem; font-size: .78rem; line-height: 1.3; color: var(--sc-ink-soft); }
.et__register { list-style: none; margin: 0; padding: .4rem 0 0; border-top: 1px solid hsl(150 8% 40% / .35); font-size: .78rem; line-height: 1.25; display: grid; gap: .2rem; counter-reset: reg; }
.et__register li { counter-increment: reg; display: flex; gap: .4rem; }
.et__register li::before { content: counter(reg); min-width: 1.1em; font-weight: 700; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.et__kontakt { margin: auto 0 0; padding-top: .5rem; font-size: .75rem; line-height: 1.3; color: var(--sc-ink-soft); }
.et__kontakt b { color: var(--sc-ink); }

.fuss { position: absolute; left: var(--sc-gutter); right: calc(var(--sc-gutter) + 70px); bottom: .9rem; z-index: 6;
  font-size: .78rem; line-height: 1.4; color: var(--sc-ink); }
.fuss span { background: color-mix(in oklab, var(--papier) 85%, transparent); padding: .15rem .4rem; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* -------------------------------------------------------------- Handy -- */
@media (max-width: 760px) {
  :root { --sc-gutter: 1rem; }
  .kopf { padding-block: .7rem; }
  .kopf__demo { margin-right: 0; font-size: .74rem; white-space: nowrap; }
  .register { top: auto; bottom: 0; left: 0; right: 0; translate: none; padding: 0 .4rem; }
  .register ol { flex-direction: row; gap: 2px; justify-content: center; }
  .register li { flex: 1 1 0; }
  .register a { width: auto; height: 34px; padding: 0; justify-content: center; border-radius: 5px 5px 0 0; transform: translateY(6px);
    font-size: .7rem; box-shadow: 0 -2px 6px hsl(32 38% 22% / .22); }
  .register a span { overflow: hidden; width: 1ch; white-space: nowrap; }
  .register a.ist-dran { transform: translateY(0); }
  .register__ordner { margin: 0; flex: 0 0 auto !important; }
  .register__ordner a { width: auto; padding: 0 .5rem; }
  .register__ordner a span { width: auto; }

  .briefbogen { width: auto; right: var(--sc-gutter); top: 4.2rem; rotate: -.6deg; padding: 1.15rem 1.2rem; }
  .briefbogen__kopf { margin-bottom: .8rem; font-size: .7rem; }
  .briefbogen__titel { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .briefbogen__text { margin: .7rem 0 1rem; font-size: .95rem; line-height: 1.5; }
  .ding--stift { width: 15rem; left: auto; right: -2rem; bottom: 9%; }
  .ding--klammern { width: 4.5rem; left: 6%; top: auto; bottom: 22%; }

  .probe { flex-direction: column; align-items: flex-start; width: min(20rem, 84vw); }
  .probe__notiz { width: 100%; padding: .9rem 1rem; }
  .probe__notiz p { font-size: .9rem; }
  .papier--bon { width: 13rem; font-size: .72rem; padding: 1.2rem 1rem; }
  .papier--rechnung { width: 14rem; font-size: .7rem; padding: 1rem; }
  .papier--auszug { width: 18rem; font-size: .7rem; }
  .papier--spende { width: 14rem; }
  .leiste { padding-inline: var(--sc-gutter); }

  .tisch--brief { padding-bottom: 5rem; }
  .brief__raster { grid-template-columns: 1fr; padding-right: 0; }
  .haftnotiz { margin: 0 0 0 auto; max-width: 15rem; }

  .zettel { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: 4.2rem; rotate: -.4deg; }
  .zettel > div { padding: .9rem 1rem; }
  .zettel__titel { font-size: 1.3rem; }
  .zettel p { font-size: .88rem; line-height: 1.45; }

  .regal { padding-bottom: 5rem; }
  .regal__raster { grid-template-columns: 1fr; padding-right: 0; }
  .leistungen div { grid-template-columns: 1fr; gap: .2rem; }
  .brett { padding: 0 .6rem; gap: 4px; height: 15rem; }
  .ordner { flex-basis: 2.7rem; }
  .ordner i { font-size: .66rem; }

  .tisch--ordner { justify-content: flex-start; }
  .schluss { grid-template-columns: 1fr; gap: .9rem; padding: 3.9rem var(--sc-gutter) 0; }
  .schluss__links { rotate: 0deg; padding: .9rem 1rem; }
  .schluss__links h2 { font-size: 1.55rem; }
  .schluss__lead { font-size: .88rem; line-height: 1.4; margin: .35rem 0 .6rem; }
  .arten { gap: 0 .6rem; }
  .arten legend { font-size: .85rem; margin-bottom: .2rem; }
  .arten label { font-size: .86rem; padding: .22rem 0; gap: .4rem; }
  .arten input { width: 1rem; height: 1rem; }
  .schluss__knoepfe { margin-top: .6rem; gap: .5rem 1rem; }
  .knopf { min-height: 2.75rem; padding: .65rem 1.1rem; }
  .schluss__hinweis { font-size: .78rem; margin-top: .3rem; }
  /* Der Rücken liegt auf dem Handy quer auf dem Tisch */
  .ruecken { width: 100%; height: 5.6rem; rotate: -1deg; padding: 4% 3% 4% 5%; display: flex; }
  .ruecken__etikett { height: 100%; width: 74%; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 .6rem; padding: .45rem .6rem; }
  .et__kanzlei { width: 100%; font-size: .7rem; }
  .et__jahr { font-size: 1.5rem; margin: 0; }
  .et__was { display: none; }
  .et__register { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 .5rem; font-size: .72rem; flex: 1; }
  .et__kontakt { display: none; }
  .ruecken__loch { left: auto; right: 6%; top: 50%; bottom: auto; translate: 0 -50%; width: auto; height: 62%; }
  .fuss { right: var(--sc-gutter); bottom: 42px; font-size: .7rem; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .schluss__lead { display: none; }
  .schluss__links h2 { font-size: 1.35rem; margin-bottom: .4rem; }
  .ruecken { height: 4.8rem; }
  .et__kanzlei { display: none; }
  .ruecken__etikett { align-items: center; }
}

/* ---------------------------------------------------- Ruhige Bewegung -- */
@media (prefers-reduced-motion: reduce) {
  .knopf::before { animation: none; }
  .ordner--neu { transform: none; }
}

/* ------------------------------------------------------------- Druck -- */
@media print {
  @page { size: A4; margin: 15mm; }
  body { background: #fff; }
  body * { visibility: hidden; }
  .kopf, .register { display: none; }
  .ruecken__etikett, .ruecken__etikett * { visibility: visible; }
  .ruecken__etikett { position: fixed; left: 0; top: 0; width: 60mm; height: 190mm; border: .3mm solid #999; border-radius: 0;
    padding: 6mm 5mm; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; background: #fff; }
  .et__was, .et__kontakt { display: block !important; }
  .et__jahr { font-size: 26pt; } .et__register { display: grid !important; font-size: 10pt; border-top: .3mm solid #999; }
}