/* BriefJetzt – Stylesheet (ohne externe Abhängigkeiten) */

@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff") format("woff"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/inter-display-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --ink: #13294b;
  --ink-2: #43536d;
  --brand: #1a63c7;
  --brand-strong: #124c9c;
  --sky: #3aa0e0;
  --sky-soft: #e4f1fb;
  --paper: #f2f5f9;
  --line: #d3dbe6;
  --white: #ffffff;
  --stamp: #b3261e;
  --stamp-soft: #fbeceb;
  --ok: #17703f;
  --ok-soft: #e7f4ec;
  --focus: #f2b705;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-letter: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem;
  --r-sm: 6px; --r: 10px; --r-lg: 16px;
  --shadow-paper: 0 1px 1px rgba(19,41,75,.06), 0 12px 32px -8px rgba(19,41,75,.22);
  --wrap: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--white); display: flex; flex-direction: column; min-height: 100vh; text-rendering: optimizeLegibility; }
main { flex: 1; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-strong); text-decoration-thickness: 2px; }
p { margin: 0 0 var(--s-4); }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--sky); color: var(--white); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s-4); top: -4rem; z-index: 100; background: var(--ink); color: var(--white); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-weight: 600; }
.skip-link:focus { top: var(--s-4); color: var(--white); }

/* ---------- Typografie ---------- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 var(--s-4); color: var(--ink); text-wrap: balance; }
h1, .h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); letter-spacing: -.03em; line-height: 1.06; }
h2, .h2 { font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.35rem); }
h3, .h3 { font-size: 1.3rem; letter-spacing: -.01em; }
h4, .h4 { font-size: 1.125rem; letter-spacing: -.005em; }
.lead { font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); color: var(--ink-2); max-width: 38em; }
.small { font-size: .9375rem; }
.muted { color: var(--ink-2); }
.measure { max-width: 42rem; }
.prose { max-width: 44rem; }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose li { margin-bottom: var(--s-2); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-5); font-size: .9375rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--s-3); border-bottom: 1px solid var(--line); }
.prose th { background: var(--paper); font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-4); }
@media (min-width: 640px) { .wrap { padding: 0 var(--s-5); } }
.section { padding: var(--s-8) 0; }
.section--paper { background: var(--paper); }
.section--ink { background: var(--ink); color: #dfe7f2; }
.section--ink h2, .section--ink h3 { color: var(--white); }
.section--ink a { color: #9fd0f3; }
.section__head { max-width: 40rem; margin-bottom: var(--s-6); }
.section__head p { color: var(--ink-2); }
.section--ink .section__head p { color: #c3d0e2; }
.grid-2 { display: grid; gap: var(--s-6); }
@media (min-width: 880px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }

/* ---------- Kopfzeile ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(8px)) { .site-header { background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(10px); } }
.site-header__bar { display: flex; align-items: center; gap: var(--s-4); min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; margin: 0; }
.brand img { width: 2.1rem; height: 2.1rem; }
.brand__word { font: 700 1.55rem/1 var(--font-display); letter-spacing: -.035em; color: var(--ink); }
.brand__word span { color: #2b8fd4; }
.brand--light .brand__word { color: var(--white); }
.brand--light .brand__word span { color: #7cc3f2; }
.site-footer .brand { margin-bottom: var(--s-4); }
.mainnav { margin-left: auto; }
.mainnav ul { list-style: none; display: flex; gap: var(--s-5); margin: 0; padding: 0; }
.mainnav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9688rem; padding: var(--s-2) 0; }
.mainnav a:hover { color: var(--brand); text-decoration: underline; }
.site-header__actions { display: flex; align-items: center; gap: var(--s-3); margin-left: var(--s-5); }
.is-flow .site-header__actions { margin-left: 0; }
.menu-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); width: 2.75rem; height: 2.75rem; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.lang-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: 0 var(--s-3); border: 1px solid var(--line); background: var(--white); border-radius: var(--r-sm); font: 600 .875rem var(--font); color: var(--ink); cursor: pointer; }
.lang-btn:hover { border-color: var(--ink-2); }
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .mainnav { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line); display: none; }
  .nav-open .mainnav { display: block; }
  .mainnav ul { flex-direction: column; gap: 0; padding: var(--s-2) var(--s-4) var(--s-4); }
  .mainnav a { display: block; padding: var(--s-3) 0; font-size: 1.0625rem; border-bottom: 1px solid var(--paper); }
  .site-header__actions { margin-left: auto; }
}
@media (max-width: 480px) { .site-header__actions .btn--sm { display: none; } .brand__word { font-size: 1.35rem; } .brand img { width: 1.8rem; height: 1.8rem; } }

/* Bestellschritte */
.steps { margin-left: auto; margin-right: auto; }
.steps ol { list-style: none; display: flex; gap: var(--s-2); margin: 0; padding: 0; counter-reset: s; }
.steps li { display: flex; align-items: center; gap: var(--s-2); font-size: .875rem; color: var(--ink-2); }
.steps li + li::before { content: ""; width: 1.5rem; height: 1px; background: var(--line); margin-right: var(--s-1); }
.steps__n { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid var(--line); font-weight: 600; font-size: .8125rem; }
.steps .is-current { color: var(--ink); font-weight: 600; }
.steps .is-current .steps__n { background: var(--brand); border-color: var(--brand); color: var(--white); }
.steps .is-done .steps__n { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
@media (max-width: 860px) {
  .steps li:not(.is-current) .steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .steps li + li::before { width: .6rem; }
}
@media (max-width: 560px) { .is-flow .brand__word { display: none; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 2.9rem; padding: .7rem 1.35rem; border-radius: var(--r-sm); border: 2px solid transparent; font: 600 1rem/1.2 var(--font); text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; text-align: center; }
.btn--primary { background: var(--brand); color: var(--white); }
.btn--primary:hover { background: var(--brand-strong); color: var(--white); text-decoration: none; }
.btn--ghost { background: var(--white); border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--sky-soft); color: var(--ink); }
.btn--sm { min-height: 2.75rem; padding: .5rem 1rem; font-size: .9375rem; }
.btn--lg { min-height: 3.5rem; padding: .9rem 1.6rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn.is-busy { opacity: .75; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; text-underline-offset: .18em; }

/* ---------- Hero ---------- */
.hero { padding: var(--s-6) 0 var(--s-8); background:
  linear-gradient(180deg, var(--paper) 0, var(--white) 70%); overflow: hidden; }
.hero__grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--s-8); } }
.hero h1 { max-width: 13em; }
.hero .lead { margin-bottom: var(--s-5); }
.facts { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: .9375rem; color: var(--ink-2); }
.facts li { display: flex; align-items: center; gap: .45rem; }
.facts svg { color: var(--ok); flex: none; }

/* ---------- Das Briefblatt (Erkennungsmerkmal) ---------- */
.letter-stage { position: relative; padding: var(--s-4) 0 var(--s-7) var(--s-5); }
@media (max-width: 999px) { .letter-stage { max-width: 34rem; margin: 0 auto; } }
.sheet { position: relative; background: var(--white); aspect-ratio: 210 / 297; box-shadow: var(--shadow-paper); border-radius: 2px; padding: 9% 9.5% 8% 11.9%; font-family: var(--font-letter); color: #111; font-size: clamp(.5rem, .35rem + .55vw, .72rem); line-height: 1.5; overflow: hidden; }
.sheet::before, .sheet::after { content: ""; position: absolute; left: 0; width: 3.2%; height: 1px; background: #9aa6b6; }
.sheet::before { top: 35.35%; }         /* Falzmarke 105 mm */
.sheet::after { top: 70.7%; }           /* Falzmarke 210 mm */
.sheet__punch { position: absolute; left: 0; top: 50%; width: 4.8%; height: 1px; background: #9aa6b6; } /* Lochmarke */
.sheet__window { position: absolute; left: 9.5%; top: 15.2%; width: 40.7%; height: 15.4%; border: 1.5px dashed #9fc6e8; border-radius: 4px; }
.sheet__from { font-weight: 700; }
.sheet__return { position: absolute; left: 11%; top: 16.6%; font-size: .72em; color: #666; }
.sheet__to { position: absolute; left: 11%; top: 19.4%; }
.sheet__info { position: absolute; left: 59.5%; top: 19.4%; font-size: .9em; }
.sheet__info span { display: block; color: #666; }
.sheet__body { position: absolute; left: 11.9%; right: 9.5%; top: 35%; }
.sheet__subject { font-weight: 700; margin-bottom: 1.3em; }
.sheet__body p { margin: 0 0 .9em; }
.sheet__fade { color: #555; }
.sheet__fade::after { content: ""; display: block; height: 3.5em; margin-top: .3em; background: repeating-linear-gradient(180deg, #e6e9ee 0 .5em, transparent .5em 1.5em); }

.note { position: absolute; left: 0; bottom: 0; width: min(19rem, 64%); background: #fffdf3; border: 1px solid #eadfb3; border-left: 4px solid var(--sky); border-radius: var(--r-sm); box-shadow: 0 10px 24px -10px rgba(19,41,75,.35); padding: var(--s-4); font-size: .9375rem; line-height: 1.45; transform: rotate(-2.2deg); }
.note__lang { display: block; font-size: .8125rem; color: var(--ink-2); margin-bottom: var(--s-1); }
.note q { quotes: "„" "“"; }
@media (max-width: 520px) { .letter-stage { padding-left: 0; } .note { position: relative; transform: none; width: 100%; margin-top: calc(-1 * var(--s-6)); } }

/* ---------- Formulare ---------- */
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: 0 1px 2px rgba(19,41,75,.05); }
@media (min-width: 640px) { .panel { padding: var(--s-6); } }
.panel--hero { border-color: #c4d0df; box-shadow: 0 18px 40px -24px rgba(19,41,75,.35); }
.field { margin-bottom: var(--s-5); }
.field:last-child { margin-bottom: 0; }
.label, legend { display: block; font-weight: 600; margin-bottom: var(--s-2); color: var(--ink); font-size: 1rem; padding: 0; }
.hint { display: block; color: var(--ink-2); font-size: .9375rem; margin: -.25rem 0 var(--s-2); }
.input, .textarea, select.input { width: 100%; font: 400 1rem/1.5 var(--font); color: var(--ink); background: var(--white); border: 1.5px solid #8d9bb0; border-radius: var(--r-sm); padding: .7rem .85rem; min-height: 2.9rem; transition: border-color .15s, box-shadow .15s; }
.input:hover, .textarea:hover { border-color: var(--ink-2); }
.input:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(26,99,199,.25); }
.textarea { resize: vertical; min-height: 9rem; }
.textarea--letter { font-family: var(--font-letter); min-height: 18rem; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--stamp); }
.field-error { display: flex; gap: .35rem; color: var(--stamp); font-weight: 600; font-size: .9375rem; margin-top: var(--s-2); }
.counter { display: block; text-align: right; color: var(--ink-2); font-size: .8125rem; margin-top: var(--s-1); }
fieldset.panel > legend { float: left; width: 100%; }
fieldset.panel > legend + * { clear: both; }
fieldset { border: 0; margin: 0 0 var(--s-5); padding: 0; min-width: 0; }
.row { display: grid; gap: var(--s-3); }
@media (min-width: 520px) { .row--plz { grid-template-columns: 8rem 1fr; } }
.req { color: var(--stamp); }

.choice-grid { display: grid; gap: var(--s-3); }
form.panel, .panel { container-type: inline-size; }
@container (min-width: 30rem) { .choice-grid--3 { grid-template-columns: repeat(3, 1fr); } .choice-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.choice { position: relative; display: flex; gap: var(--s-3); align-items: flex-start; border: 1.5px solid var(--line); border-radius: var(--r); padding: var(--s-3) var(--s-4); cursor: pointer; background: var(--white); transition: border-color .15s, background-color .15s; }
.choice:hover { border-color: var(--ink-2); }
.choice input { margin: .3rem 0 0; width: 1.15rem; height: 1.15rem; accent-color: var(--brand); flex: none; }
.choice:has(input:checked) { border-color: var(--brand); background: #f3f8fe; box-shadow: inset 0 0 0 1px var(--brand); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice__title { display: block; font-weight: 600; line-height: 1.3; }
.choice__desc { display: block; font-size: .875rem; color: var(--ink-2); line-height: 1.4; margin-top: .15rem; }
.choice__price { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; white-space: nowrap; }

.check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: .9688rem; }
.check input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--brand); flex: none; }

.examples { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.chip { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .4rem .85rem; font: 500 .875rem var(--font); color: var(--ink); cursor: pointer; min-height: 2.25rem; }
.chip:hover { border-color: var(--ink-2); }
.form-foot { font-size: .875rem; color: var(--ink-2); margin: var(--s-3) 0 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.alert { border-radius: var(--r); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); border: 1px solid; }
.alert:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.alert--error { background: var(--stamp-soft); border-color: #e5b4b0; color: #5d1410; }
.alert--info { background: var(--sky-soft); border-color: #b7d8f1; color: var(--ink); }
.alert--ok { background: var(--ok-soft); border-color: #a9d3b9; color: #0f3d23; }
.alert--warn { background: #fff7e0; border-color: #ecd48b; color: #4d3a00; }
.alert h2, .alert h3 { font-size: 1.0625rem; margin-bottom: var(--s-2); color: inherit; }
.alert ul { margin: 0; }
.alert a { color: inherit; font-weight: 600; }

/* Lade-Overlay */
.overlay { position: fixed; inset: 0; z-index: 90; background: rgba(19,41,75,.72); display: grid; place-items: center; padding: var(--s-4); }
.overlay[hidden] { display: none; }
.overlay__box { background: var(--white); border-radius: var(--r-lg); padding: var(--s-6); max-width: 26rem; width: 100%; text-align: center; }
.spinner { width: 2.5rem; height: 2.5rem; margin: 0 auto var(--s-4); border-radius: 50%; border: 3px solid var(--sky-soft); border-top-color: var(--brand); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Ablauf (echte Reihenfolge) ---------- */
.process { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-6); counter-reset: p; }
@media (min-width: 860px) { .process { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.process li { counter-increment: p; position: relative; padding-top: var(--s-6); border-top: 2px solid var(--ink); }
.process li::before { content: counter(p); position: absolute; top: -1.15rem; left: 0; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--brand); color: var(--white); display: grid; place-items: center; font: 700 1.05rem var(--font-display); box-shadow: 0 0 0 5px var(--white); }
.section--paper .process li::before { box-shadow: 0 0 0 5px var(--paper); }
.process h3 { margin-bottom: var(--s-2); }
.process p { color: var(--ink-2); margin: 0; }

/* ---------- Vorher / Nachher ---------- */
.compare { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__item h3 { margin-bottom: var(--s-3); }
.compare__note { background: #fffdf3; border: 1px solid #eadfb3; border-left: 4px solid var(--sky); border-radius: var(--r-sm); padding: var(--s-4); font-size: .9688rem; margin-bottom: var(--s-3); }
.compare__note span { display: block; font-size: .8125rem; color: var(--ink-2); margin-bottom: var(--s-1); }
.compare__letter { background: var(--white); box-shadow: var(--shadow-paper); padding: var(--s-5); font-family: var(--font-letter); font-size: .9375rem; line-height: 1.55; border-radius: 2px; }
.compare__letter b { display: block; margin-bottom: var(--s-3); }
.compare__letter p { margin-bottom: var(--s-3); }
.compare__letter p:last-child { margin-bottom: 0; }
.compare__arrow { display: flex; align-items: center; gap: var(--s-2); font-size: .875rem; color: var(--ink-2); margin: 0 0 var(--s-3) var(--s-4); }

/* ---------- Preise ---------- */
.prices { display: grid; gap: var(--s-5); max-width: 56rem; }
@media (min-width: 760px) { .prices { grid-template-columns: 1fr 1fr; } }
.price { border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); background: var(--white); display: flex; flex-direction: column; }
.price--featured { border-color: var(--ink); }
.price__tag { align-self: flex-start; font-size: .8125rem; font-weight: 600; color: var(--stamp); border: 1.5px solid var(--stamp); border-radius: 4px; padding: .1rem .5rem; margin-bottom: var(--s-3); transform: rotate(-2deg); }
.price h3 { margin-bottom: var(--s-1); }
.price__amount { font: 700 2.6rem/1 var(--font-display); letter-spacing: -.03em; margin: var(--s-3) 0 var(--s-1); }
.price__vat { font-size: .875rem; color: var(--ink-2); margin-bottom: var(--s-4); }
.price ul { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.price li { display: flex; gap: var(--s-2); padding: .35rem 0; }
.price li svg { color: var(--ok); flex: none; margin-top: .3rem; }
.price .btn { margin-top: auto; }

/* ---------- Für wen ---------- */
.uses { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-6); }
@media (min-width: 860px) { .uses { grid-template-columns: repeat(3, 1fr); } }
.uses svg { color: var(--sky); margin-bottom: var(--s-3); }
.uses h3 { margin-bottom: var(--s-2); }
.uses p { margin: 0; color: #c3d0e2; }

/* ---------- Vorlagen-Liste ---------- */
.linklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 860px) { .linklist { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); } }
.linklist li { border-bottom: 1px solid var(--line); }
.linklist a { display: block; padding: var(--s-4) 0; text-decoration: none; color: var(--ink); }
.linklist a:hover .linklist__t { text-decoration: underline; color: var(--brand); }
.linklist__t { display: block; font-weight: 600; font-size: 1.0625rem; }
.linklist__d { display: block; color: var(--ink-2); font-size: .9375rem; }

/* ---------- Hinweise ---------- */
.limits { display: grid; gap: var(--s-5); }
@media (min-width: 860px) { .limits { grid-template-columns: 1fr 1fr; } }
.limits > div { border-left: 3px solid var(--line); padding-left: var(--s-4); }
.limits > .is-warn { border-left-color: var(--stamp); }
.limits h3 { font-size: 1.125rem; margin-bottom: var(--s-2); }
.limits p { color: var(--ink-2); margin: 0; }

/* ---------- FAQ ---------- */
.faq { max-width: 48rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-4) 2.5rem var(--s-4) 0; position: relative; font-weight: 600; font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .4rem; top: 1.45rem; width: .7rem; height: .7rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.faq summary:hover { color: var(--brand); }
.faq__a { padding: 0 0 var(--s-5); color: var(--ink-2); max-width: 42rem; }
.faq__a p:last-child { margin-bottom: 0; }

/* ---------- Abschluss-CTA ---------- */
.cta { background: var(--brand); color: var(--white); border-radius: var(--r-lg); padding: var(--s-6); display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 760px) { .cta { grid-template-columns: 1fr auto; padding: var(--s-7); } }
.cta h2 { color: var(--white); margin-bottom: var(--s-2); }
.cta p { margin: 0; color: #e3eefc; }

/* ---------- Ratgeber-Seiten ---------- */
.crumbs { font-size: .875rem; color: var(--ink-2); margin-bottom: var(--s-4); }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--line); }
.crumbs a { color: var(--ink-2); }
.page-hero { padding: var(--s-6) 0 var(--s-7); background: linear-gradient(180deg, var(--paper), var(--white)); }
.toc { background: var(--paper); border-radius: var(--r); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6); }
.toc ul { margin: 0; }
.keyfacts { display: grid; gap: var(--s-3); margin: 0 0 var(--s-6); padding: 0; list-style: none; }
@media (min-width: 640px) { .keyfacts { grid-template-columns: repeat(3, 1fr); } }
.keyfacts li { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-4); }
.keyfacts b { display: block; font: 700 1.35rem/1.2 var(--font-display); letter-spacing: -.01em; }
.keyfacts span { color: var(--ink-2); font-size: .9375rem; }
.aside-cta { position: sticky; top: 6rem; }
.article-grid { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) { .article-grid { grid-template-columns: minmax(0, 1fr) 22rem; } }

/* ---------- Bestellstrecke ---------- */
.flow { padding: var(--s-6) 0 var(--s-8); background: var(--paper); }
.flow__head { margin-bottom: var(--s-5); max-width: 46rem; }
.flow__head h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem); margin-bottom: var(--s-2); }
.flow__grid { display: grid; gap: var(--s-5); }
@media (min-width: 960px) { .flow__grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } .flow__grid--even { grid-template-columns: 1fr 1fr; } }
.panel h2 { font-size: 1.25rem; margin-bottom: var(--s-4); }
.summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); font-size: .9688rem; }
.summary dt { color: var(--ink-2); }
.summary dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.summary__total { border-top: 1px solid var(--line); margin-top: var(--s-4); padding-top: var(--s-4); display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.summary__total b { font: 700 1.6rem var(--font-display); }
.legal-note { font-size: .875rem; color: var(--ink-2); }
.trustline { display: flex; gap: var(--s-2); align-items: flex-start; font-size: .875rem; color: var(--ink-2); margin-top: var(--s-4); }
.trustline svg { flex: none; margin-top: .15rem; color: var(--ok); }

/* Briefvorschau A4 */
.a4 { background: var(--white); box-shadow: var(--shadow-paper); max-width: 52rem; margin: 0 auto; aspect-ratio: auto; padding: 7% 9% 8% 11.9%; font-family: var(--font-letter); color: #111; font-size: clamp(.8rem, .7rem + .35vw, 1rem); line-height: 1.55; position: relative; }
.a4__from { margin-bottom: 2.4em; line-height: 1.4; }
.a4__from b { font-size: 1.05em; }
.a4__head { display: flex; justify-content: space-between; gap: 2em; flex-wrap: wrap; margin-bottom: 2.8em; }
.a4__window { min-width: 16em; }
.a4__return { font-size: .7em; color: #666; border-bottom: 1px solid #ccc; padding-bottom: .2em; margin-bottom: .5em; }
.a4__info { font-size: .9em; min-width: 12em; }
.a4__info span { display: block; color: #666; font-size: .9em; }
.a4__subject { font-weight: 700; margin-bottom: 1.6em; }
.a4__text p { margin: 0 0 1em; white-space: pre-line; }
.a4__close { margin-top: 1.4em; }
.a4__name { margin-top: 2.2em; }

/* ---------- Status-Seite ---------- */
.status-icon { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; margin-bottom: var(--s-4); }
.status-icon--ok { background: var(--ok-soft); color: var(--ok); }
.status-icon--wait { background: var(--sky-soft); color: var(--brand); }
.status-icon--err { background: var(--stamp-soft); color: var(--stamp); }

/* ---------- Dialoge ---------- */
.dialog { border: 0; border-radius: var(--r-lg); padding: 0; max-width: 34rem; width: calc(100% - 2rem); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(19,41,75,.5); }
.dialog::backdrop { background: rgba(19,41,75,.55); }
.dialog__inner { padding: var(--s-6) var(--s-5) var(--s-5); position: relative; }
.dialog__close { position: absolute; top: var(--s-3); right: var(--s-3); width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: none; border: 0; border-radius: var(--r-sm); color: var(--ink); cursor: pointer; }
.dialog__close:hover { background: var(--paper); }
.lang-list { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--s-2); }
.lang-option { width: 100%; min-height: 2.75rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--white); font: 500 1rem var(--font); color: var(--ink); cursor: pointer; }
.lang-option:hover { border-color: var(--brand); }
.consent-box { background: var(--paper); border-radius: var(--r); padding: var(--s-4); margin-bottom: var(--s-3); }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--ink); color: #c3d0e2; font-size: .9688rem; margin-top: auto; }
.site-footer a, .site-footer .linklike { color: #e4ecf6; }
.site-footer a:hover, .site-footer .linklike:hover { color: var(--white); }
.site-footer__grid { display: grid; gap: var(--s-6); padding: var(--s-8) 0 var(--s-6); }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer__logo { height: 2rem; width: auto; margin-bottom: var(--s-4); }
.site-footer__h { font: 600 1rem var(--font); color: var(--white); margin-bottom: var(--s-3); letter-spacing: 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s-2); }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.14); padding: var(--s-5) 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: space-between; font-size: .875rem; }
.site-footer__bottom p { margin: 0; }
.site-footer__mini { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.is-flow .site-footer__bottom { padding: var(--s-5) 0; }

/* Google-Translate-Leiste ausblenden, Layout stabil halten */
body { top: 0 !important; }
.goog-te-banner-frame, .skiptranslate > iframe, #goog-gt-tt, .goog-te-balloon-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
  .flow { background: none; padding: 0; }
  .a4 { box-shadow: none; }
}