/* WN-Portal v2 – "Werkbank"
   Keine Verläufe, keine Schatten, kein Standard-Radius. Linien nur dort, wo sie Bedeutung tragen. */

:root {
  --werkbank: #F1F5F9;
  --papier: #FFFFFF;
  --tinte: #1E293B;
  --loetzinn: #64748B;
  --linie: #CBD5E1;
  --signal: #1E40AF;
  --signal-tief: #1E3A8A;
  --fertig: #2F7D4F;
  --wartet: #9A6700;
  --dringend: #B42318;
  --neu: #3B82F6;
  --font: "Bahnschrift", "DIN Alternate", "DIN", "Arial Narrow", Arial, sans-serif;
  --step-0: 17px;
  --step-1: 22px;
  --step-2: 30px;
  --step-3: 44px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--werkbank);
  color: var(--tinte);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.45;
}
a { color: var(--tinte); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--signal-tief); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

/* ---------- Kopfzeile ---------- */
.kopf {
  background: var(--tinte);
  color: var(--papier);
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  min-height: 64px;
}
.kopf .name {
  display: flex; align-items: center; gap: .6rem;
  padding: 0 1.4rem; font-weight: 700; font-size: var(--step-1); color: var(--papier); text-decoration: none;
  letter-spacing: .01em;
}
.kopf .name i { display: inline-block; width: 14px; height: 14px; background: var(--signal); }
.kopf nav { display: flex; flex-wrap: wrap; }
.kopf nav a {
  display: flex; align-items: center; padding: 0 1.1rem;
  color: #C9D2CD; text-decoration: none; font-size: var(--step-0);
  border-bottom: 4px solid transparent;
}
.kopf nav a:hover { color: var(--papier); }
.kopf nav a[aria-current="page"] { color: var(--papier); border-bottom-color: var(--signal); }
.kopf .rest { margin-left: auto; display: flex; align-items: center; gap: 1rem; padding: 0 1.4rem; }
.kopf .rest span { color: #C9D2CD; }
.kopf button {
  background: transparent; color: var(--papier); border: 2px solid #55635D; padding: .4rem .8rem; font: inherit; cursor: pointer;
}
.kopf button:hover { border-color: var(--papier); }

main { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1.4rem 3rem; }

h1 { font-size: var(--step-3); font-weight: 700; line-height: 1.05; margin: 0 0 .4rem; letter-spacing: -.01em; }
h2 { font-size: var(--step-2); font-weight: 700; margin: 0 0 .8rem; }
h3 { font-size: var(--step-1); font-weight: 700; margin: 0 0 .5rem; }
p { margin: 0 0 .7rem; }
.lead { font-size: var(--step-1); color: var(--loetzinn); margin: 0 0 1.4rem; }
.muted { color: var(--loetzinn); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Meldungen ---------- */
.hinweis {
  border-left: 8px solid var(--fertig); background: var(--papier); padding: .9rem 1.1rem; margin: 0 0 1.4rem;
  font-size: var(--step-1); font-weight: 600;
}
.hinweis.fehler { border-left-color: var(--dringend); }

/* ---------- Schaltflächen ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .7rem 1.4rem; border: 2px solid var(--tinte);
  background: var(--papier); color: var(--tinte); font: inherit; font-size: var(--step-1); font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.knopf:hover { background: var(--tinte); color: var(--papier); }
.knopf.haupt { background: var(--signal); border-color: var(--signal); color: #fff; }
.knopf.haupt:hover { background: var(--signal-tief); border-color: var(--signal-tief); color: #fff; }
.knopf.klein { min-height: 40px; font-size: var(--step-0); padding: .45rem .9rem; }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
.knopf.leise { border-color: var(--linie); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.2rem; }

/* ---------- Formulare ---------- */
label { display: block; font-weight: 700; margin-bottom: .35rem; }
.feld { margin-bottom: 1.1rem; }
.feld small, .hilfe { display: block; color: var(--loetzinn); margin-top: .3rem; font-size: .95rem; }
.fehler-text { color: var(--dringend); font-weight: 700; margin-top: .3rem; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search],
input[type=date], select, textarea {
  width: 100%; min-height: 52px; padding: .6rem .8rem; background: var(--papier); color: var(--tinte);
  border: 2px solid var(--tinte); border-radius: 0; font: inherit; font-size: var(--step-1);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--signal); outline-offset: 0; }
.wahl { display: flex; align-items: center; gap: .6rem; font-weight: 600; margin: .25rem 0; }
.wahl input { width: 24px; height: 24px; accent-color: var(--tinte); }
.zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.zeile3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.2rem; }
@media (max-width: 760px) { .zeile2, .zeile3 { grid-template-columns: 1fr; } }

/* ---------- Tabellen ---------- */
.tabelle { width: 100%; border-collapse: collapse; background: var(--papier); }
.tabelle th { text-align: left; font-size: var(--step-0); color: var(--loetzinn); font-weight: 600; padding: .7rem .8rem; border-bottom: 2px solid var(--tinte); }
.tabelle td { padding: .85rem .8rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle tbody tr:hover td { background: #EEF2EF; }
.tabelle td a.name { font-weight: 700; font-size: var(--step-1); text-decoration: none; }
.tabelle td a.name:hover { text-decoration: underline; }
.tabellen-rahmen { overflow-x: auto; }

/* ---------- Status-Flächen ---------- */
.status {
  display: inline-block; padding: .2rem .6rem; color: #fff; font-weight: 700; font-size: .95rem; background: var(--loetzinn);
}
.status.fertig { background: var(--fertig); }
.status.wartet { background: var(--wartet); }
.status.dringend { background: var(--dringend); }
.status.neu { background: var(--neu); }
.status.leise { background: transparent; color: var(--tinte); border: 2px solid var(--linie); }

/* ---------- Start ---------- */
.start-kacheln { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr; gap: 0; margin-bottom: 2.2rem; }
.kachel {
  display: flex; flex-direction: column; justify-content: space-between; min-height: 170px; padding: 1.2rem 1.3rem;
  background: var(--tinte); color: var(--papier); text-decoration: none; border: 0;
}
.kachel:hover { color: var(--papier); background: #26332D; }
.kachel.haupt { background: var(--signal); }
.kachel.haupt:hover { background: var(--signal-tief); }
.kachel strong { font-size: var(--step-2); line-height: 1.1; }
.kachel span { font-size: var(--step-0); opacity: .9; }
.kachel-suche { background: var(--papier); color: var(--tinte); border: 2px solid var(--tinte); padding: 1.2rem 1.3rem; }
.kachel-suche:hover { background: var(--papier); }
.kachel-suche form { display: flex; flex-direction: column; gap: .7rem; }
.kachel-suche input { font-size: var(--step-1); }
@media (max-width: 860px) { .start-kacheln { grid-template-columns: 1fr; } }

.abschnitt { margin-top: 1.8rem; }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; flex-wrap: wrap; }
.abschnitt-kopf a { font-weight: 700; }
.leer {
  padding: 1.6rem; border: 2px dashed var(--loetzinn); background: transparent; color: var(--loetzinn); font-size: var(--step-1);
}
.leer a { color: var(--tinte); font-weight: 700; }

/* ---------- Kundenseite: Kopf und Reiter ---------- */
.kunde-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; border-bottom: 3px solid var(--tinte); padding-bottom: 1rem; margin-bottom: 1rem; }
.kunde-kopf .nummer { font-size: var(--step-1); color: var(--loetzinn); font-weight: 600; }
.reiter { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 1.4rem; border-bottom: 2px solid var(--linie); }
.reiter a {
  padding: .7rem 1.1rem; text-decoration: none; font-size: var(--step-1); font-weight: 600; color: var(--loetzinn);
  border-bottom: 4px solid transparent; margin-bottom: -2px;
}
.reiter a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--tinte); }
.reiter a:hover { color: var(--tinte); }

.spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 860px) { .spalten { grid-template-columns: 1fr; } }
.angaben dt { color: var(--loetzinn); font-size: var(--step-0); }
.angaben dd { margin: 0 0 .9rem; font-size: var(--step-1); font-weight: 600; }

/* ---------- Laufzettel (Auftrag) ---------- */
.schritte { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--tinte); background: var(--papier); margin-bottom: 1.4rem; }
.schritte form { margin: 0; }
.schritt {
  width: 100%; min-height: 64px; padding: .7rem .9rem; background: var(--papier); color: var(--loetzinn);
  border: 0; border-right: 2px solid var(--tinte); font: inherit; font-size: var(--step-1); font-weight: 600; text-align: left; cursor: pointer;
}
.schritt:last-child { border-right: 0; }
.schritt:hover { background: #EEF2EF; color: var(--tinte); }
.schritt.aktiv { background: var(--tinte); color: var(--papier); }
.schritt.erledigt { color: var(--tinte); }
.schritt.erledigt::before { content: "✓ "; color: var(--fertig); }
.schritt.aktiv::before { content: ""; }
@media (max-width: 760px) { .schritte { grid-template-columns: 1fr 1fr; } .schritt:nth-child(2) { border-right: 0; } }

.laufzettel { display: grid; grid-template-columns: 1.2fr 1fr; background: var(--papier); border: 2px solid var(--tinte); position: relative; }
.laufzettel > div { padding: 1.3rem 1.4rem; }
.laufzettel > div + div { border-left: 2px dashed var(--tinte); }
.laufzettel .block + .block { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); }
@media (max-width: 760px) { .laufzettel { grid-template-columns: 1fr; } .laufzettel > div + div { border-left: 0; border-top: 2px dashed var(--tinte); } }
.laufzettel .gross { font-size: var(--step-2); font-weight: 700; line-height: 1.15; }

.aktionen { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: center; margin-top: 1.2rem; }

/* ---------- Gerätekarte ---------- */
.geraet-liste { display: grid; gap: 0; border-top: 2px solid var(--tinte); }
.geraet-zeile { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--linie); align-items: center; }
.geraet-zeile a.name { font-weight: 700; font-size: var(--step-1); text-decoration: none; }
@media (max-width: 760px) { .geraet-zeile { grid-template-columns: 1fr; } }

/* ---------- Anmeldung ---------- */
.anmeldung { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.anmeldung .links { background: var(--tinte); color: var(--papier); padding: 3rem; display: flex; flex-direction: column; justify-content: flex-end; }
.anmeldung .links h1 { color: var(--papier); }
.anmeldung .rechts { padding: 3rem; display: flex; flex-direction: column; justify-content: center; max-width: 520px; width: 100%; }
@media (max-width: 760px) { .anmeldung { grid-template-columns: 1fr; } .anmeldung .links { min-height: 200px; } }

/* ---------- Tablet (Vollbild) ---------- */
body.tablet { background: var(--werkbank); }
.tablet-rahmen { max-width: 900px; margin: 0 auto; padding: 1.2rem 1.2rem 3rem; }
.tablet-rahmen h1 { font-size: 3rem; }
.tablet-rahmen .feld label { font-size: 1.35rem; }
.tablet-rahmen input[type=text], .tablet-rahmen input[type=email], .tablet-rahmen input[type=tel], .tablet-rahmen select, .tablet-rahmen textarea {
  min-height: 76px; font-size: 1.6rem; padding: .8rem 1rem;
}
.tablet-rahmen .wahl { font-size: 1.35rem; }
.tablet-rahmen .wahl input { width: 32px; height: 32px; }
.tablet-rahmen .knopf { min-height: 84px; font-size: 1.6rem; padding: 1rem 2rem; }
.tablet-kopf { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--tinte); padding-bottom: .8rem; margin-bottom: 1.6rem; }
.tablet-kopf strong { font-size: 1.6rem; }
.unterschrift { border: 3px solid var(--tinte); background: var(--papier); position: relative; touch-action: none; }
.unterschrift canvas { width: 100%; height: 260px; display: block; }
.unterschrift .platzhalter { position: absolute; left: 1.1rem; bottom: .6rem; color: var(--loetzinn); pointer-events: none; font-size: 1.3rem; }
.dank { text-align: left; padding: 2rem 0; }
.dank strong { font-size: 2.4rem; }

/* ---------- Druck (Bestätigung) ---------- */
@media print {
  .nicht-drucken { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
}
.bestaetigung { background: #fff; color: #111; padding: 2rem 2.2rem; max-width: 820px; margin: 0 auto; border: 1px solid var(--linie); }
.bestaetigung h1 { font-size: 2rem; }
.bestaetigung table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.bestaetigung td { padding: .4rem .5rem; border-bottom: 1px solid #ddd; vertical-align: top; }
.bestaetigung td.k { width: 32%; color: #555; }

/* ---------- Abgerundete Variante ---------- */
:root {
  --radius-klein: 8px;
  --radius: 14px;
  --schatten: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .08);
}
.knopf, .kopf button { border-radius: var(--radius-klein); }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search],
input[type=date], select, textarea { border-radius: var(--radius-klein); border-width: 1px; border-color: var(--linie); }
input:focus, select:focus, textarea:focus { border-color: var(--signal); }
.hinweis { border-radius: var(--radius); }
.leer { border-radius: var(--radius); }
.status { border-radius: 999px; padding: .2rem .7rem; }
.status.leise { border-width: 1px; }
.kachel { border-radius: var(--radius); }
.kachel:first-child { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); }
.kachel:last-child { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.kachel-suche { border: 0; box-shadow: var(--schatten); border-radius: var(--radius); }
.start-kacheln { gap: 1rem; }
.laufzettel { border: 0; border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.laufzettel > div + div { border-left-style: dashed; }
.tabellen-rahmen { border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; background: var(--papier); }
.tabelle th { border-bottom-width: 1px; }
.schritte { border: 0; border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.schritt { border-right: 1px solid var(--linie); }
.schritt:last-child { border-right: 0; }
.kopf { border-radius: 0; }
.geraet-liste { border-top: 1px solid var(--linie); }
.reiter a[aria-current="page"] { border-bottom-width: 3px; }
.anmeldung .rechts form, .anmeldung .rechts .hinweis { border-radius: var(--radius); }
.unterschrift { border-width: 2px; border-radius: var(--radius); overflow: hidden; }
.tablet-rahmen .knopf { border-radius: var(--radius); }
.tablet-rahmen input[type=text], .tablet-rahmen input[type=email], .tablet-rahmen input[type=tel], .tablet-rahmen select, .tablet-rahmen textarea { border-radius: var(--radius); }

/* ---------- Logo ---------- */
.logo { height: 32px; width: auto; display: block; }
.logo-box { display: inline-flex; align-items: center; background: #FFFFFF; padding: 5px 8px; border-radius: 8px; }
.logo-gross { height: 48px; width: auto; display: block; }

/* ---------- Logo in der Kopfzeile: fest, mittig, nicht zu groß ---------- */
.kopf .name { padding: 0 1.2rem; align-items: center; }
.kopf .name .logo-box { padding: 4px 8px; border-radius: 6px; }
.kopf .name img.logo { height: 28px; width: auto; }

/* ---------- Tablet ohne Scrollen: jeder Schritt passt auf den Bildschirm ---------- */
[hidden] { display: none !important; }
body.tablet { height: 100vh; height: 100dvh; overflow: hidden; }
.tablet-rahmen { height: 100%; max-width: 980px; padding: .6rem 1rem; display: flex; flex-direction: column; box-sizing: border-box; }
.tablet-kopf { margin-bottom: .4rem; padding-bottom: .4rem; }
.tablet-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tablet-fortschritt { font-size: 1rem; color: var(--loetzinn); margin-bottom: .2rem; }
.tablet-panel { display: none; flex: 1; min-height: 0; flex-direction: column; gap: .5rem; }
.tablet-panel.aktiv { display: flex; }
.tablet-titel { font-size: 1.9rem; margin: 0 0 .3rem; }
.tablet-felder { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .9rem; }
.tablet-felder .voll { grid-column: 1 / -1; }
.tablet-form .feld { margin-bottom: 0; }
.tablet-form label { font-size: 1.05rem; margin-bottom: .15rem; }
.tablet-form input[type=text], .tablet-form input[type=email], .tablet-form input[type=tel] {
  min-height: 58px; font-size: 1.3rem; padding: .4rem .7rem;
}
.tablet-wahlen { display: flex; gap: 1.5rem; }
.tablet-wahlen .wahl { font-size: 1.2rem; }
.tablet-unterschrift { flex: 1; min-height: 160px; position: relative; }
.tablet-unterschrift canvas { height: 100%; }
.tablet-links { display: flex; gap: .8rem; flex-wrap: wrap; }
.tablet-navi { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: auto; padding-top: .5rem; }
.tablet-navi .knopf { min-height: 70px; font-size: 1.4rem; min-width: 200px; }
.tablet-link { background: none; border: 0; color: var(--tinte); text-decoration: underline; font-size: 1.15rem; padding: .3rem 0; cursor: pointer; font-weight: 700; text-align: left; }
.tablet-dialog { border: 2px solid var(--tinte); border-radius: var(--radius); max-width: 720px; width: 90%; max-height: 85vh; overflow: auto; padding: 1.2rem 1.5rem; font-size: 1.1rem; background: var(--papier); color: var(--tinte); }
.tablet-dialog::backdrop { background: rgba(23, 32, 28, .5); }
.tablet-dialog h2 { font-size: 1.6rem; margin-top: 0; }

/* ---------- Tablet im Hochformat (Samsung): alles auf einer Seite, ohne Scrollen ---------- */
.tablet-seite { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5rem; }
.tablet-zeile { display: flex; flex-direction: column; gap: .2rem; }
.tablet-zeile > label { font-size: 1rem; font-weight: 700; }
.tablet-zeile input[type=text], .tablet-zeile input[type=tel], .tablet-zeile input[type=email] {
  min-height: 54px; font-size: 1.2rem; padding: .35rem .7rem;
}
.tablet-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.tablet-zwei > div { display: flex; flex-direction: column; gap: .2rem; }
.tablet-zwei label { font-size: 1rem; font-weight: 700; }
.tablet-kopfzeile { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.tablet-titel { font-size: 1.7rem; margin: 0; }
.tablet-wahlen { display: flex; gap: 1.2rem; }
.tablet-wahlen .wahl { font-size: 1.15rem; margin: 0; }
.tablet-datenschutz { flex-direction: row; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.tablet-datenschutz .wahl { font-size: 1rem; margin: 0; max-width: 72%; }
.tablet-unterschrift-zeile { flex: 1; min-height: 220px; }
.tablet-unterschrift-zeile .tablet-unterschrift { flex: 1; min-height: 160px; }
.tablet-absenden { min-height: 72px; font-size: 1.4rem; width: 100%; }
.tablet-hinweis { font-size: 1.1rem; margin: 0; }
.tablet-links { display: flex; gap: .6rem; }

/* Unterschriftsfeld kompakt (feste Höhe, Hochformat) */
.tablet-unterschrift-zeile { flex: 0 0 auto; min-height: 0; }
.tablet-unterschrift-zeile .tablet-unterschrift { flex: none; height: 150px; min-height: 0; }

/* ---------- Tablet Hochformat: Größen passen sich der Bildschirmhöhe an ---------- */
.tablet-seite { gap: clamp(.5rem, 1.3vh, 1.1rem); }
.tablet-titel { font-size: clamp(1.8rem, 3.8vh, 2.5rem); }
.tablet-zeile > label, .tablet-zwei label { font-size: clamp(1.05rem, 2.1vh, 1.35rem); font-weight: 700; }
.tablet-zeile input[type=text], .tablet-zeile input[type=tel], .tablet-zeile input[type=email] {
  min-height: clamp(56px, 7.2vh, 76px); font-size: clamp(1.2rem, 2.5vh, 1.6rem); padding: .4rem .8rem;
}
.tablet-wahlen .wahl { font-size: clamp(1.1rem, 2.3vh, 1.45rem); }
.tablet-datenschutz .wahl { font-size: clamp(1rem, 2.1vh, 1.25rem); }
.tablet-datenschutz .wahl input { width: clamp(24px, 3vh, 34px); height: clamp(24px, 3vh, 34px); }
.tablet-link { font-size: clamp(1.05rem, 2.1vh, 1.3rem); }
.tablet-unterschrift-kopf { display: flex; justify-content: space-between; align-items: center; }
.tablet-unterschrift-zeile { flex: 1 1 auto; min-height: 220px; }
.tablet-unterschrift-zeile .tablet-unterschrift { flex: 1 1 auto; height: auto; min-height: 220px; }
.tablet-absenden { min-height: clamp(64px, 9vh, 90px); font-size: clamp(1.3rem, 2.7vh, 1.8rem); }

/* ---------- Adressvorschläge als sichtbare Liste ---------- */
.tablet-zeile, .tablet-zwei > div { position: relative; }
.tablet-vorschlaege { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #FFFFFF; border: 2px solid var(--tinte); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.tablet-vorschlaege[hidden] { display: none !important; }
.tablet-vorschlag { display: block; width: 100%; text-align: left; background: #FFFFFF; border: 0; border-bottom: 1px solid var(--linie); padding: .75rem 1rem; font: inherit; font-size: clamp(1.1rem, 2.3vh, 1.4rem); color: var(--tinte); cursor: pointer; }
.tablet-vorschlag:last-child { border-bottom: 0; }
.tablet-vorschlag:active, .tablet-vorschlag:hover { background: #E0E7FF; }

/* Unterschrift: halbe Höhe */
.tablet-unterschrift-zeile { flex: 0 0 auto; min-height: 0; }
.tablet-unterschrift-zeile .tablet-unterschrift { flex: none; height: 200px; min-height: 0; }
/* Mehr Abstand oben auf dem Tablet */
.tablet-rahmen { padding-top: clamp(1.2rem, 4.5vh, 3.2rem); }
.tablet-kopf { margin-bottom: clamp(.6rem, 2vh, 1.4rem); }