/* Halmund Schreibgeräte. Seitenstil. Engine-Klassen (.sc-*, [data-sc-*]) bleiben
   unangetastet; hier stehen Marke, Bögen, Federzeichnung, Löschblatt, Umschlag. */
:root {
  --sc-canvas:     #F5F2EA;
  --sc-surface:    #FBF9F3;
  --sc-ink:        #1B2440;
  --sc-ink-soft:   #485170;
  --sc-accent:     #8C1D3A;
  --sc-accent-ink: #F5F2EA;
  --sc-font-display: "Brygada 1918", Georgia, serif;
  --sc-font-text:    "Literata", Georgia, serif;
  --sc-font-mono:    "Literata", Georgia, serif;
  --sc-shadow-color: 228 30% 18%;
  --papier: #FBF9F3;
  --papier-tief: #EDE7DA;
  --linie: rgb(27 36 64 / .085);
  --gold: #A8843F;
  color-scheme: light;
}
html { background: var(--sc-canvas); scrollbar-color: #B9B3A4 var(--sc-canvas); }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); }
::selection { background: var(--sc-ink); color: var(--papier); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 3px; }
input, select { caret-color: var(--sc-accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sc-grain { opacity: .06; mix-blend-mode: multiply; }

/* Schrift: Brygada für Überschriften, Literata für den Brieftext. */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.04;
  color: var(--sc-ink);
  text-wrap: balance;
}
.sc-display--lg { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.7rem); }
.sc-display--md { font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; }
.sc-body { color: var(--sc-ink-soft); font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem); line-height: 1.62; max-width: 36rem; }
.sc-display + .sc-body, .sc-display + p { margin-top: var(--sc-4); }

/* ---------- Wortmarke und Briefkopf ---------- */
.wortmarke {
  font: italic 600 1.7rem/1 var(--sc-font-display); letter-spacing: -.01em;
  color: var(--sc-ink); text-decoration: none;
}
.wortmarke--klein { font-size: 1.2rem; }
.briefkopf {
  position: absolute; top: 26px; left: var(--sc-gutter); right: var(--sc-gutter); z-index: 4;
  display: flex; align-items: baseline; gap: 18px;
  padding-bottom: 12px; border-bottom: 1px solid var(--linie);
}
.briefkopf__zeile { font-size: .95rem; font-style: italic; color: var(--sc-ink-soft); }

/* ---------- Knopf ---------- */
.knopf {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px;
  border-radius: 3px; white-space: nowrap; text-decoration: none;
  font: 600 1rem/1 var(--sc-font-text); letter-spacing: .01em;
  color: var(--papier); background: var(--sc-ink);
  box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 6px 18px -8px hsl(var(--sc-shadow-color) / .5);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.knopf::before { /* feine Schraffur wie Federstriche, darüber ein Lichtstreif */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 35%, rgb(245 242 234 / .22) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(115deg, rgb(245 242 234 / .06) 0 1px, transparent 1px 5px);
  animation: streif 5s var(--sc-ease-in-out) infinite;
}
@keyframes streif { 0%, 60% { background-position: -200% 0, 0 0; } 100% { background-position: 200% 0, 0 0; } }
.knopf:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .knopf:hover { background: #26315A; } }

/* ---------- Bögen: Papier, auf das die Feder schreibt ---------- */
.bogen { position: absolute; z-index: 2; }
.bogen__tinte { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.bogen--blatt {
  background:
    radial-gradient(120% 80% at 30% 0%, rgb(255 255 255 / .55), transparent 60%),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--zeile, 46px) - 1px), var(--linie) calc(var(--zeile, 46px) - 1px) var(--zeile, 46px)),
    var(--papier);
  background-position: 0 0, 0 var(--zeile-start, 30px), 0 0;
  box-shadow: 0 1px 1px hsl(var(--sc-shadow-color) / .06), 0 18px 40px -18px hsl(var(--sc-shadow-color) / .32), 0 0 0 1px rgb(27 36 64 / .05);
}
.bogen--blatt::after { /* Falzmarke am linken Rand, wie auf einem Briefbogen */
  content: ""; position: absolute; left: 10px; top: 33%; width: 12px; height: 1px; background: rgb(27 36 64 / .3);
}
.fueller {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  max-width: none; height: auto;
  filter: drop-shadow(calc(var(--luft, 0) * 10px + 6px) calc(var(--luft, 0) * 14px + 8px) calc(var(--luft, 0) * 6px + 6px) rgb(27 36 64 / .28));
  will-change: transform;
}

/* ---------- 1 Anrede ---------- */
.anrede__text { position: absolute; left: var(--sc-gutter); top: 24vh; width: min(34rem, 40vw); z-index: 3; }
.anrede__titel { font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.9rem); line-height: 1.02; max-width: 11ch; }
.anrede__text .knopf { margin-top: var(--sc-6); }
.bogen--anrede {
  right: var(--sc-gutter); top: 15vh; width: min(52vw, 760px); height: min(66vh, 600px);
  rotate: -1.2deg; --zeile: 54px; --zeile-start: 36px;
}

/* ---------- 2 Feder ---------- */
.feder { position: relative; }
.feder__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.feder__bild { margin: 0; }
.feder__bild img { width: 100%; height: auto; aspect-ratio: 1100 / 1375; object-fit: cover; border-radius: 2px; box-shadow: 0 24px 50px -24px hsl(var(--sc-shadow-color) / .45); }
.feder__text { position: relative; }
.feder__text .sc-stack { margin-top: var(--sc-5); }
.randnotiz { position: relative; width: 220px; height: 74px; margin-bottom: var(--sc-3); rotate: -3deg; }
.randnotiz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.daten { margin: var(--sc-6) 0 0; display: grid; gap: 0; max-width: 34rem; }
.daten div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--linie); }
.daten div:last-child { border-bottom: 1px solid var(--linie); }
.daten dt { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: .2rem; }
.daten dd { margin: 0; }

/* ---------- 3 Strich ---------- */
.strich__text { position: absolute; left: var(--sc-gutter); top: 12vh; width: min(30rem, 38vw); z-index: 4; }
.strich__text > div { position: absolute; inset: 0 0 auto 0; }
.strich__lupe { position: absolute; right: var(--sc-gutter); top: 9vh; width: min(25rem, 36vw); margin: 0; z-index: 4; display: grid; grid-template-columns: 150px 1fr; gap: 10px 22px; align-items: center; }
.strich__lupe .spitze { width: 150px; }
.messwerte { display: grid; gap: 8px; font-variant-numeric: tabular-nums; }
.messwerte span { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--linie); padding-bottom: 6px; font-size: 1rem; }
.messwerte i { font-style: normal; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: .15rem; }
.messwerte em { font-style: normal; white-space: nowrap; }
.messwerte b { font-weight: 600; }
.formel { grid-column: 1 / -1; margin: 6px 0 0; font-size: .86rem; line-height: 1.5; color: var(--sc-ink-soft); font-style: italic; }
.bogen--strich { left: var(--sc-gutter); right: var(--sc-gutter); bottom: 6vh; height: 50vh; }
.bogen--strich::before { /* Grundlinie, leicht wie Bleistift */
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--grund, 30%); height: 1px; background: rgb(27 36 64 / .14);
}

/* Federzeichnung: Draufsicht, Tinte auf Papier */
.spitze { overflow: visible; }
.spitze__haelfte { transform-box: view-box; transform-origin: 100px 150px; transition: rotate 90ms linear; }
.spitze__haelfte path { fill: var(--papier); stroke: var(--sc-ink); stroke-width: 2; stroke-linejoin: round; }
.spitze__loch { fill: var(--sc-canvas); stroke: var(--sc-ink); stroke-width: 2; }
.spitze__gravur { fill: none; stroke: var(--sc-ink); stroke-width: 1; opacity: .45; }
.spitze__haelfte[data-tine="l"] { rotate: calc(var(--spreiz, 0) * -1deg); }
.spitze__haelfte[data-tine="r"] { rotate: calc(var(--spreiz, 0) * 1deg); }

/* ---------- 4 Breiten ---------- */
.breiten { display: flex; align-items: center; }
.leiste { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); padding-inline: var(--sc-gutter); }
.leiste__kopf { flex: 0 0 min(30rem, 78vw); }
.leiste__ende { flex: 0 0 min(22rem, 72vw); }
.probe {
  flex: 0 0 clamp(16rem, 24vw, 21rem); padding: 22px 24px 24px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 41px, var(--linie) 41px 42px) 0 58px / 100% 100% no-repeat,
    var(--papier);
  box-shadow: 0 1px 1px hsl(var(--sc-shadow-color) / .06), 0 16px 32px -18px hsl(var(--sc-shadow-color) / .3), 0 0 0 1px rgb(27 36 64 / .05);
}
.probe:nth-child(odd) { rotate: -.8deg; }
.probe:nth-child(even) { rotate: .6deg; translate: 0 14px; }
.probe h3 { margin: 0; font: italic 600 2.4rem/1 var(--sc-font-display); }
.probe canvas { width: 100%; height: 118px; margin: 14px 0 10px; }
.probe p { margin: 0; font-size: .96rem; line-height: 1.5; color: var(--sc-ink-soft); }
.probe p b { color: var(--sc-ink); font-weight: 600; }

/* ---------- 5 Werkstatt: der dunkle Absatz ---------- */
.werkstatt { position: relative; min-height: 112vh; background: #141A30; color: var(--papier); overflow: clip; display: flex; align-items: center; }
.werkstatt__bild { position: absolute; inset: 0; overflow: hidden; }
.werkstatt__bild picture { position: absolute; inset: -12% 0; display: block; }
.werkstatt__bild img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 50%;
  mask-image: linear-gradient(to right, transparent 0%, transparent 18%, rgb(0 0 0 / .3) 36%, #000 62%); }
.werkstatt__text { position: relative; z-index: 2; padding: var(--sc-section) var(--sc-gutter); max-width: min(40rem, 46vw); }
.werkstatt__text .sc-display { color: var(--papier); letter-spacing: -.004em; font-weight: 650; }
.werkstatt__text .sc-body { color: #D8D2C4; line-height: 1.68; letter-spacing: .005em; }
.randnotiz--hell { width: 260px; height: 80px; }

/* ---------- 6 Dein Name ---------- */
.werkzeug { position: absolute; left: var(--sc-gutter); top: 10vh; width: min(22rem, 30vw); z-index: 5; display: grid; gap: 18px; }
.feld { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.feld label, .feld legend { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--sc-ink-soft); padding: 0; }
.feld input[type="text"], .feld input:not([type]), .feld input[type="email"], .feld select {
  width: 100%; min-height: 46px; padding: 8px 2px; border: 0; border-bottom: 1.5px solid rgb(27 36 64 / .45);
  background: transparent; font: italic 500 1.35rem/1.2 var(--sc-font-display); color: var(--sc-ink); border-radius: 0;
  transition: border-color 160ms var(--sc-ease-out);
}
.feld select { font-size: 1.1rem; }
.feld input:focus-visible, .feld select:focus-visible { outline: none; border-bottom-color: var(--sc-accent); box-shadow: 0 1.5px 0 var(--sc-accent); }
.feld--zwei { grid-template-columns: 1fr; gap: 16px; }
.feld--zwei fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.feld output { font-variant-numeric: tabular-nums; color: var(--sc-ink); text-transform: none; letter-spacing: 0; margin-left: 4px; }
input[type="range"] { width: 100%; accent-color: var(--sc-ink); min-height: 36px; }
.wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.wahl label { position: relative; text-transform: none; letter-spacing: 0; }
.wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding: 0 10px;
  border: 1px solid rgb(27 36 64 / .3); border-radius: 3px; font: 600 .95rem/1 var(--sc-font-text); color: var(--sc-ink);
  transition: background-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out), border-color 150ms var(--sc-ease-out);
}
.wahl input:checked + span { background: var(--sc-ink); color: var(--papier); border-color: var(--sc-ink); }
.wahl input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .wahl label:hover span { border-color: var(--sc-ink); } }
.wahl--klein span { min-width: 0; font-size: .86rem; padding: 0 9px; }
.name__text { position: absolute; left: var(--sc-gutter); bottom: 12vh; width: min(22rem, 30vw); height: 15rem; z-index: 4; }
.name__text > div { position: absolute; inset: auto 0 0 0; }
.bogen--name { left: calc(var(--sc-gutter) + min(22rem, 30vw) + 4vw); right: var(--sc-gutter); top: 11vh; bottom: 13vh; rotate: .5deg; --zeile: 64px; --zeile-start: 20px; }
.lupe {
  position: absolute; right: 18px; top: 18px; z-index: 4; width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center; background: var(--sc-canvas);
  box-shadow: 0 0 0 1px rgb(27 36 64 / .25), 0 0 0 6px var(--papier), 0 0 0 7px rgb(27 36 64 / .15), 0 12px 24px -12px hsl(var(--sc-shadow-color) / .4);
}
.lupe .spitze { width: 58px; margin-top: -10px; }
.lupe span { position: absolute; bottom: 14px; font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--sc-ink); }

/* ---------- 7 Umschlag ---------- */
.umschlag { position: relative; padding: var(--sc-section) var(--sc-gutter) 120px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 4vw, 4rem) clamp(2rem, 5vw, 5rem); align-items: start; min-height: 100svh; }
.umschlag__kopf { grid-column: 1; align-self: start; padding-top: 1rem; }
.gravur { grid-column: 1 / -1; grid-row: 2; position: relative; margin: 0 auto; width: min(100%, 1180px); }
.gravur img { width: 100%; height: auto; filter: drop-shadow(10px 16px 14px rgb(27 36 64 / .22)); }
.gravur canvas { position: absolute; left: 30%; top: 14%; width: 40%; height: 72%; mix-blend-mode: screen; }
.umschlag__huelle { grid-column: 2; grid-row: 1; }
.brief {
  position: relative; padding: 84px clamp(20px, 3vw, 40px) 30px;
  background:
    linear-gradient(rgb(255 255 255 / .4), transparent 40%),
    repeating-linear-gradient(32deg, rgb(27 36 64 / .018) 0 2px, transparent 2px 7px),
    #F8F4EA;
  box-shadow: 0 0 0 1px rgb(27 36 64 / .1), 0 26px 50px -26px hsl(var(--sc-shadow-color) / .45);
}
.brief__klappe { position: absolute; inset: 0 0 auto 0; height: 70px; background: #EFE8DA; clip-path: polygon(0 0, 100% 0, 50% 100%); box-shadow: inset 0 -1px 0 rgb(27 36 64 / .1); }
.randnotiz--adresse { position: absolute; left: clamp(20px, 3vw, 40px); top: 70px; width: 230px; height: 70px; margin: 0; rotate: -2deg; }
.brief__adresse { margin: 64px 0 22px auto; width: max-content; font-size: .95rem; line-height: 1.5; color: var(--sc-ink-soft); text-align: right; }
.brief__felder { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.feld--breit { grid-column: 1 / -1; }
.feld__fehler { color: var(--sc-accent); font-size: .88rem; }
.brief__preis { margin: 22px 0 0; font-size: .98rem; color: var(--sc-ink); }
.brief__siegel { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.siegel {
  flex: 0 0 auto; width: 84px; height: 84px; border: 0; padding: 0; cursor: pointer; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 36% 30%, #B23452, #8C1D3A 46%, #6C1229 100%);
  box-shadow: inset 0 2px 3px rgb(255 255 255 / .25), inset 0 -4px 8px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(27 36 64 / .45);
  display: grid; place-items: center;
  transition: transform 140ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.siegel span {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 2px 4px rgb(0 0 0 / .35), inset 0 -1px 0 rgb(255 255 255 / .2);
  font: italic 600 1.9rem/1 var(--sc-font-display); color: #F0D9DF; text-shadow: 0 -1px 0 rgb(0 0 0 / .35);
}
@media (hover: hover) and (pointer: fine) { .siegel:hover { transform: translateY(-2px) rotate(-4deg); } }
.siegel:active { transform: scale(.96); }
.brief.ist-versiegelt .siegel { animation: stempel 520ms var(--sc-ease-out); }
@keyframes stempel { 0% { transform: scale(1.18) rotate(-8deg); } 60% { transform: scale(.94); } 100% { transform: none; } }
.brief__hinweis { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--sc-ink-soft); max-width: 30rem; }
.fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: .9rem; color: var(--sc-ink-soft); }

/* ---------- Löschblatt (Navigation) ---------- */
.loesch {
  position: fixed; left: 50%; bottom: 12px; z-index: var(--sc-z-chrome); translate: -50% 0;
  width: min(820px, calc(100% - 24px));
  background:
    radial-gradient(rgb(27 36 64 / .05) 1px, transparent 1.3px) 0 0 / 5px 5px,
    #E7E0D2;
  box-shadow: 0 10px 24px -14px hsl(var(--sc-shadow-color) / .5), 0 0 0 1px rgb(27 36 64 / .08);
  border-radius: 2px;
  mask-image: linear-gradient(#000, #000), radial-gradient(circle at 50% 0, #000 1.2px, transparent 1.6px);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out);
}
.loesch.ist-an { opacity: 1; transform: none; pointer-events: auto; }
.loesch ol { list-style: none; margin: 0; padding: 4px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.loesch a { position: relative; display: grid; grid-template-rows: 30px auto; justify-items: center; padding: 4px 2px 5px; text-decoration: none; border-radius: 2px; transition: background-color 160ms var(--sc-ease-out); }
.loesch canvas { width: 100%; height: 30px; transform: scaleX(-1); opacity: 0; filter: blur(.35px); transition: opacity 600ms var(--sc-ease-out); }
.loesch canvas.ist-gedrueckt { opacity: .62; }
.loesch span { font-size: .75rem; line-height: 1.2; color: var(--sc-ink-soft); white-space: nowrap; }
.loesch a.ist-hier { background: rgb(27 36 64 / .07); }
.loesch a.ist-hier span { color: var(--sc-ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .loesch a:hover { background: rgb(27 36 64 / .05); } }

/* ---------- Handy ---------- */
@media (max-width: 860px) {
  .briefkopf { top: 16px; gap: 10px; flex-wrap: wrap; }
  .briefkopf__zeile { font-size: .82rem; }
  .wortmarke { font-size: 1.45rem; }
  .bogen--anrede { overflow: clip; left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: 86px; height: 34svh; --zeile: 34px; --zeile-start: 18px; }
  .anrede__text { top: auto; bottom: 108px; width: auto; right: var(--sc-gutter); }
  .anrede__titel { font-size: clamp(2.1rem, 1.3rem + 4vw, 2.8rem); max-width: 13ch; }
  .anrede__text .sc-body { font-size: 1rem; margin-top: var(--sc-3); }
  .anrede__text .knopf { margin-top: var(--sc-4); }

  .feder__raster { grid-template-columns: 1fr; }
  .feder__bild img { aspect-ratio: 4 / 3.4; }

  .strich__text { top: 70px; width: auto; right: var(--sc-gutter); }
  .strich__text .sc-body { font-size: .98rem; }
  .strich__lupe { top: auto; bottom: 86px; left: var(--sc-gutter); right: var(--sc-gutter); width: auto; grid-template-columns: 70px 1fr; gap: 6px 16px; }
  .strich__lupe .spitze { width: 70px; }
  .messwerte { gap: 4px; }
  .messwerte span { font-size: .9rem; padding-bottom: 3px; }
  .formel { display: none; }
  .bogen--strich { top: 40svh; bottom: auto; height: 26svh; }

  .probe { flex-basis: 78vw; }
  .probe h3 { font-size: 2rem; }

  .werkstatt { min-height: 100svh; align-items: flex-end; }
  .werkstatt__bild img { object-position: 70% 50%; mask-image: linear-gradient(to top, transparent 8%, rgb(0 0 0 / .4) 40%, #000 70%); }
  .werkstatt__text { max-width: none; padding-bottom: 110px; }

  .werkzeug { top: 18px; width: auto; right: var(--sc-gutter); gap: 8px; }
  .werkzeug .feld input:not([type]) { min-height: 40px; font-size: 1.2rem; padding: 4px 2px; }
  .wahl span { min-width: 40px; min-height: 36px; padding: 0 8px; font-size: .88rem; }
  .feld--zwei { gap: 12px; }
  .bogen--name { overflow: clip; left: var(--sc-gutter); right: var(--sc-gutter); top: 312px; bottom: auto; height: 27svh; rotate: 0deg; --zeile: 40px; }
  .lupe { width: 70px; height: 70px; right: 8px; top: 8px; }
  .lupe .spitze { width: 38px; margin-top: -8px; }
  .lupe span { font-size: .7rem; bottom: 9px; }
  .name__text { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: 80px; height: 9.5rem; }
  .name__text .sc-display--md { font-size: 1.45rem; }
  .name__text .sc-body { font-size: .95rem; line-height: 1.5; margin-top: var(--sc-2); }

  .umschlag { grid-template-columns: 1fr; padding-bottom: 110px; }
  .umschlag__kopf, .umschlag__huelle, .gravur { grid-column: 1; }
  .umschlag__kopf { grid-row: 1; }
  .gravur { grid-row: 2; }
  .umschlag__huelle { grid-row: 3; }
  .brief__felder { grid-template-columns: 1fr; }
  .randnotiz { width: 180px; height: 60px; }
  .randnotiz--adresse { width: 170px; height: 54px; }

  .loesch { bottom: 0; width: 100%; border-radius: 0; }
  .loesch ol { padding: 3px 4px calc(3px + env(safe-area-inset-bottom)); }
  .loesch a { grid-template-rows: 26px; padding: 4px 0; }
  .loesch canvas { height: 26px; }
  .loesch span { display: none; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .bogen--anrede { height: 28svh; }
  .anrede__text .sc-body { display: none; }
  .werkzeug { gap: 6px; }
  .feld--zwei { grid-template-columns: 1fr; gap: 6px; }
  .feld--zwei > div label { display: flex; }
  .bogen--name { top: 292px; height: 18svh; }
  .name__text { height: 8.5rem; bottom: 64px; }
  .name__text .sc-body { font-size: .9rem; }
  .strich__text .sc-body { font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .knopf::before { animation: none; }
  .spitze__haelfte { transition: none; }
  .loesch { transition: opacity 200ms linear; transform: none; }
}