@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/newsreader-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/newsreader-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-600-normal.woff2) format('woff2');}
:root{--bg:#f6f5f1;--text:#1c2127;--gedaempft:#626568;--primaer:#24435c;--primaer-text:#24435c;--akzent:#9a6a2f;--akzent-text:#95672e;--knopf:#24435c;--auf-knopf:#ffffff;--knopf-hover:#1f394e;--linie:#8a8b8b;--haarlinie:#cfcfcd;--flaeche:#e7e9e7;--flaeche2:#ecebe8;--fokus:#9a6a2f;--fehler:#b3261e;--fehler-flaeche:#f1e4e0;--erfolg:#2e6b3a;--auf-primaer:#ffffff;--schrift-titel:'Newsreader', Georgia, 'Times New Roman', serif;--schrift-text:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;--schrift-mono:ui-monospace, Consolas, monospace;}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--schrift-text); font-size: var(--grund, 1.0625rem); line-height: 1.6;
  font-kerning: normal; font-variant-numeric: proportional-nums;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
main, .fuss, .kopf { overflow-wrap: break-word; }
h1, h2, h3, h4, .marke, summary, legend, label, dt, dd, .knopf { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
p, li, td, th, figcaption { hyphens: auto; -webkit-hyphens: auto; }
pre { overflow-x: auto; white-space: pre-wrap; }
.text, .abschnitt-inhalt, .einstieg, .sf, .sf-feld { min-width: 0; }
input, select, textarea { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht, 600); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.35rem + 3.2vw, 3.4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2.05rem); margin-top: 0; }
h3 { font-size: 1.2rem; margin-top: 1.6em; }
p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1.1em; }
p { text-wrap: pretty; }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: .3em; }
strong, b { font-weight: 600; }
a { color: var(--primaer-text); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
small { font-size: .875rem; }
hr { border: 0; border-top: 1px solid var(--haarlinie); margin: 2.5rem 0; }
blockquote { margin-left: 0; padding-left: 1rem; border-left: 3px solid var(--akzent); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .55rem .6rem .55rem 0; border-bottom: 1px solid var(--haarlinie); vertical-align: top; }
th { font-weight: 600; border-bottom-color: var(--linie); }
.tabelle-rahmen { overflow-x: auto; }
code { font-family: var(--schrift-mono); font-size: .92em; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.sprung { position: absolute; left: .5rem; top: -4rem; z-index: 10; background: var(--knopf); color: var(--auf-knopf); padding: .6rem 1rem; }
.sprung:focus { top: .5rem; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.breite { width: 100%; max-width: var(--breite, 70rem); margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.kopf { padding: .9rem 0; }
.kopf .breite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.5rem; }
.marke { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--schrift-titel); font-weight: var(--titel-gewicht, 600); font-size: 1.15rem; color: var(--text); text-decoration: none; }
.marke svg { width: 2rem; height: 2rem; flex: none; }
.hauptnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem 1.2rem; }
.hauptnav li + li { margin: 0; }
.hauptnav a { display: inline-block; padding: .55rem 0; color: var(--text); text-decoration: none; font-size: .98rem; }
.hauptnav a:hover, .hauptnav a[aria-current] { text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 2px; }
.krumen { font-size: .9rem; color: var(--gedaempft); margin: .5rem 0 1.5rem; }
.krumen ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .2rem; }
.krumen li + li { margin: 0; }
.krumen li + li::before { content: "/"; margin: 0 .45rem 0 .25rem; color: var(--linie); }
.krumen a { color: var(--gedaempft); }
.einstieg { padding: 1.5rem 0 2.25rem; position: relative; }
.einstieg h1 { max-width: 20ch; }
.einstieg .lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); max-width: 36rem; margin-bottom: 1.5rem; }
.einstieg .handlung { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.einstieg .handlung p { margin: 0; color: var(--gedaempft); font-size: .98rem; }
.einstieg-bild { display: none; margin: 0; }
.einstieg-bild img { display: block; width: 100%; background: #fff; border: 1px solid var(--haarlinie); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 40px -18px rgba(0,0,0,.35); }
.einstieg-bild figcaption { font-size: .9rem; color: var(--gedaempft); margin-top: .6rem; }
.held { margin: 2rem 0 0; position: relative; overflow: hidden; background: var(--flaeche2); }
.held picture, .held img { display: block; width: 100%; height: auto; }
.held video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.held.spielt video { opacity: 1; }
@media (min-width: 64rem) {
  .mit-bild .einstieg-innen { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; column-gap: 4rem; align-items: start; }
  .mit-bild .einstieg-bild { display: block; }
  .einstieg.mit-held { padding-top: 2.5rem; }
  .mit-held h1 { --h1-fs: clamp(2.2rem, 1.2rem + 2.6vw, 3.3rem); max-width: 16ch; }
  .mit-held .einstieg-innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  .mit-held .held { margin: 0; }
  .mit-held .held img { aspect-ratio: 5 / 4; object-fit: cover; }
}
.knopf, button.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.4rem; border: 2px solid var(--knopf); background: var(--knopf); color: var(--auf-knopf);
  font: 600 1.05rem/1.2 var(--schrift-text); text-decoration: none; cursor: pointer; border-radius: var(--radius, 4px);
}
.knopf:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .6; cursor: progress; }
.knopf-leise, button.knopf-leise {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem .2rem; background: none; border: 0;
  color: var(--primaer-text); font: 600 1rem/1.2 var(--schrift-text); text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.knopf-rahmen, button.knopf-rahmen {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1rem; background: transparent;
  border: 2px solid var(--linie); color: var(--text); font: 600 .98rem/1.2 var(--schrift-text); cursor: pointer; border-radius: var(--radius, 4px);
}
.knopf-rahmen:hover { border-color: var(--text); }
.text { max-width: none; }
.text > .abschnitt { max-width: var(--mass, 42rem); }
.text > .abschnitt.mit-bild, .text > .bestellen-abschnitt { max-width: none; }
.abschnitt { padding: 1.75rem 0; }
.abschnitt > h2 { scroll-margin-top: 1rem; }
.breit { max-width: none; }
.preisliste { list-style: none; padding: 0; margin: 0 0 1rem; }
.preisliste li { margin: 0; padding: .7rem 0; border-bottom: 1px solid var(--haarlinie); }
.preisliste .zeile { display: flex; align-items: baseline; gap: .5rem; }
.preisliste .name { font-weight: 600; }
.preisliste .punkte { flex: 1; border-bottom: 2px dotted var(--linie); transform: translateY(-.3em); min-width: 1.5rem; }
.preisliste .betrag { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.preisliste .dazu { display: block; color: var(--gedaempft); font-size: .95rem; margin-top: .15rem; }
.preis-fuss { color: var(--gedaempft); font-size: .95rem; }
.ablauf { list-style: none; padding: 0; counter-reset: schritt; }
.ablauf li { counter-increment: schritt; position: relative; padding-left: 2.6rem; margin: 0 0 1.1rem; }
.ablauf li::before { content: counter(schritt); position: absolute; left: 0; top: -.05em; font-family: var(--schrift-titel); font-size: 1.5rem; line-height: 1; color: var(--akzent-text); font-weight: var(--titel-gewicht, 600); }
.ablauf strong { display: block; }
.muster { display: grid; gap: 1rem 1.5rem; align-items: start; }
.muster img { border: 1px solid var(--haarlinie); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.25); background: #fff; }
.muster figcaption { font-size: .95rem; color: var(--gedaempft); }
@media (min-width: 40rem) { .muster { grid-template-columns: minmax(10rem, 15rem) 1fr; } }
.faq details { border-bottom: 1px solid var(--haarlinie); }
.faq summary { cursor: pointer; padding: .9rem 2rem .9rem 0; font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .75rem; font-size: 1.3rem; line-height: 1; color: var(--akzent-text); }
.faq details[open] summary::after { content: "\2212"; }
.faq .antwort { padding: 0 0 1rem; }
.faq .antwort > :last-child { margin-bottom: 0; }
.weiter { padding: 2rem 0 1rem; }
.weiter ul { list-style: none; padding: 0; }
.weiter li { margin: 0 0 .9rem; }
.weiter a { font-weight: 600; }
.weiter span { display: block; color: var(--gedaempft); font-size: .95rem; }
.fuss { margin-top: 3rem; padding: 2rem 0 2.5rem; font-size: .95rem; border-top: 1px solid var(--haarlinie); }
.fuss ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.fuss li + li { margin: 0; }
.fuss a { color: var(--text); display: inline-block; padding: .35rem 0; }
.fuss p { color: var(--gedaempft); margin: 0 0 .4rem; }
.bestellen { padding: 2rem 0; scroll-margin-top: .5rem; }
.sf { max-width: 40rem; min-height: 22rem; }
.sf-laden { color: var(--gedaempft); }
.sf-stand { margin: 0 0 1.25rem; font-size: .95rem; color: var(--gedaempft); }
.sf-stand b { color: var(--text); }
.sf-balken { height: 4px; background: var(--haarlinie); margin-top: .5rem; }
.sf-balken span { display: block; height: 100%; background: var(--primaer); transition: width .2s; }
.sf-schritt-titel { font-size: 1.35rem; margin: 0 0 1rem; }
.sf-schritt-titel:focus { outline: none; }
.sf-feld { margin: 0 0 1.35rem; border: 0; padding: 0; min-width: 0; }
.sf-feld > label:not(.sf-wahl), .sf-feld > legend, .sf-label { display: block; font-weight: 600; margin-bottom: .3rem; padding: 0; }
.sf-pflicht { color: var(--gedaempft); font-weight: 400; font-size: .9rem; }
.sf-hilfe { display: block; color: var(--gedaempft); font-size: .93rem; margin: -.1rem 0 .45rem; }
.sf input[type=text], .sf input[type=email], .sf input[type=tel], .sf input[type=number], .sf select, .sf textarea {
  width: 100%; min-height: 3rem; padding: .6rem .75rem; font: inherit; color: var(--text); background: var(--feld-bg, #fff);
  border: var(--feld-rahmen, 2px) solid var(--linie); border-radius: var(--radius-feld, var(--radius, 4px));
  appearance: none; -webkit-appearance: none;
}
.sf select { background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.3rem, calc(100% - .8rem) 1.3rem; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2.2rem; }
.sf textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.sf input:focus-visible, .sf select:focus-visible, .sf textarea:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; border-color: var(--text); }
.sf .sf-kurz { max-width: 12rem; }
.sf .sf-mittel { max-width: 20rem; }
.sf-geld { position: relative; max-width: 14rem; }
.sf-geld input { padding-right: 2rem; text-align: right; font-variant-numeric: tabular-nums; }
.sf-geld::after { content: "\20AC"; position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); color: var(--gedaempft); pointer-events: none; }
.sf-wahl { display: flex; align-items: flex-start; gap: .65rem; padding: .55rem 0; min-height: 2.75rem; cursor: pointer; }
.sf-wahl input { width: 1.35rem; height: 1.35rem; margin: .12rem 0 0; flex: none; accent-color: var(--primaer); cursor: pointer; }
.sf-wahl .sf-preis { margin-left: auto; padding-left: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.sf-wahl small { display: block; color: var(--gedaempft); }
.sf-jein { display: flex; gap: 1.5rem; }
.sf-fehler { display: flex; gap: .4rem; color: var(--fehler); font-weight: 600; font-size: .95rem; margin: .4rem 0 0; }
.sf-fehler::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; margin-top: .1rem; border-radius: 50%; background: var(--fehler); color: #fff; font-size: .8rem; }
.sf [aria-invalid="true"] { border-color: var(--fehler) !important; }
.sf-liste-zeile { border: 1px solid var(--linie); border-radius: var(--radius, 4px); padding: .9rem 1rem .25rem; margin: 0 0 .9rem; }
.sf-liste-zeile > legend { font-weight: 600; padding: 0 .35rem; margin-left: -.35rem; }
.sf-liste-felder { display: grid; gap: 0 1rem; }
@media (min-width: 34rem) { .sf-liste-felder { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
.sf-liste-zeile .sf-feld { margin-bottom: .9rem; }
.sf-entfernen { margin: -.4rem 0 .4rem; }
.sf-datei-wahl { display: block; border: 2px dashed var(--linie); border-radius: var(--radius, 4px); padding: 1.1rem 1rem; text-align: center; cursor: pointer; background: var(--feld-bg, #fff); }
.sf-datei-wahl.ueber { border-color: var(--primaer); background: var(--flaeche); }
.sf-datei-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sf-datei-wahl:focus-within { outline: 3px solid var(--fokus); outline-offset: 2px; }
.sf-datei-wahl span { display: block; color: var(--gedaempft); font-size: .93rem; }
.sf-datei-wahl b { color: var(--primaer-text); text-decoration: underline; }
.sf-dateien { list-style: none; padding: 0; margin: .6rem 0 0; }
.sf-dateien li { display: grid; grid-template-columns: 1fr auto; gap: .1rem .75rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--haarlinie); margin: 0; }
.sf-dateien progress { grid-column: 1 / -1; width: 100%; height: .4rem; accent-color: var(--primaer); }
.sf-dateien .sf-dname { overflow-wrap: anywhere; }
.sf-dateien small { color: var(--gedaempft); }
.sf-hinweis { padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--haarlinie); margin: 0 0 1.35rem; }
.sf-hinweis > :last-child { margin-bottom: 0; }
.sf-hinweis-werte dl { display: grid; grid-template-columns: minmax(7rem, 35%) 1fr; gap: .2rem 1rem; margin: .5rem 0 0; }
.sf-hinweis-werte dt { color: var(--gedaempft); }
.sf-hinweis-werte dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sf-hinweis-werte ul { margin: 0; padding-left: 1.1em; }
.sf-tasten { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.75rem; }
.sf-preisanzeige { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin: 1.5rem -1.25rem 0; padding: .75rem 1.25rem; background: var(--bg); border-top: 1px solid var(--linie); font-variant-numeric: tabular-nums; }
.sf-preisanzeige b { font-size: 1.2rem; }
.sf-preisanzeige small { color: var(--gedaempft); }
@media (min-width: 48rem) { .sf-preisanzeige { position: static; margin: 1.5rem 0 0; padding: .75rem 0 0; } }
.sf-zusammenfassung { margin: 0 0 1.5rem; }
.sf-zusammenfassung h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1.05rem; margin: 1.2rem 0 .3rem; padding-bottom: .3rem; border-bottom: 1px solid var(--haarlinie); }
.sf-zusammenfassung h3 button { font-size: .93rem; min-height: 2.75rem; }
.sf-zusammenfassung dl { display: grid; grid-template-columns: minmax(8rem, 40%) 1fr; gap: .25rem 1rem; margin: 0; font-size: .97rem; }
.sf-zusammenfassung dt { color: var(--gedaempft); }
.sf-zusammenfassung dd { margin: 0; overflow-wrap: anywhere; }
.sf-summe { display: flex; justify-content: space-between; font-weight: 600; font-size: 1.15rem; padding: .8rem 0; border-top: 2px solid var(--text); border-bottom: 1px solid var(--haarlinie); margin-bottom: 1.25rem; font-variant-numeric: tabular-nums; }
.sf-summe-posten { list-style: none; padding: 0; margin: 0; font-variant-numeric: tabular-nums; }
.sf-summe-posten li { display: flex; justify-content: space-between; gap: 1rem; margin: .2rem 0; }
.sf-zustimmung .sf-wahl { font-size: .97rem; line-height: 1.5; }
.sf-fehlerliste { border: 2px solid var(--fehler); padding: .9rem 1.1rem; margin: 0 0 1.5rem; background: var(--fehler-flaeche); border-radius: var(--radius, 4px); }
.sf-fehlerliste h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--fehler); }
.sf-fehlerliste ul { margin: 0; }
.sf-fehlerliste a { color: var(--fehler); }
.sf-kasse-hinweis { color: var(--gedaempft); font-size: .93rem; margin-top: .75rem; }
.sf-gesichert { color: var(--gedaempft); font-size: .9rem; }
@media print { .kopf nav, .fuss, .bestellen { display: none; } }
@media (max-width: 30rem) {
  .sf-zusammenfassung dl, .sf-hinweis-werte dl { grid-template-columns: 1fr; gap: 0; }
  .sf-zusammenfassung dd, .sf-hinweis-werte dd { margin-bottom: .55rem; }
}
.sf-stufe-info, .sf-datei-zaehler { margin: .5rem 0 0; color: var(--gedaempft); font-size: .95rem; }
.sf-stufe-info button, .sf-datei-zaehler button { margin-left: .5rem; }
.abschnitt-bild { margin: 0 0 1.25rem; }
.abschnitt-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 60rem) {
  .abschnitt.mit-bild { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); grid-template-areas: "titel bild" "inhalt bild"; column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .abschnitt.mit-bild.bild-links { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); grid-template-areas: "bild titel" "bild inhalt"; }
  .abschnitt.mit-bild > h2 { grid-area: titel; }
  .abschnitt.mit-bild > .abschnitt-inhalt { grid-area: inhalt; max-width: var(--mass, 42rem); }
  .abschnitt.mit-bild > .abschnitt-bild { grid-area: bild; margin: .4rem 0 0; }
}
.bildnachweis { list-style: none; padding: 0; }
.bildnachweis li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; align-items: start; margin: 0 0 1.25rem; }
.bildnachweis img { width: 7rem; height: auto; }
.bildnachweis p { margin: 0 0 .2rem; }
.fuss-klein { font-size: .88rem; }
@media (prefers-reduced-motion: no-preference) {
  .held img { animation: sf-ein-held .9s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes sf-ein-held { from { opacity: .001; transform: scale(1.03); } to { opacity: 1; transform: none; } }
  .knopf { transition: transform .18s ease, background-color .18s ease; }
  .knopf:hover { transform: translateY(-1px); }
  .knopf:active { transform: translateY(0); }
  .sf-feld, .sf-schritt-titel, .sf-zusammenfassung { animation: sf-ein .35s ease both; }
  @keyframes sf-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
.sf-feld:has(.sf-preis) > .sf-wahl { border: 1px solid var(--linie); border-radius: var(--radius-feld, var(--radius, 4px)); padding: .85rem 1rem; margin: 0 0 .55rem; background: var(--feld-bg, #fff); transition: border-color .15s ease; }
.sf-feld:has(.sf-preis) > .sf-wahl:has(input:checked) { border-color: var(--primaer); box-shadow: inset 0 0 0 1px var(--primaer); background: var(--flaeche); }
.sf input[type=text]:hover, .sf input[type=email]:hover, .sf input[type=tel]:hover, .sf select:hover, .sf textarea:hover { border-color: var(--gedaempft); }
.vs-logo { margin: 0 0 1.6rem; }
.vs-logo img { width: 100%; max-width: 280px; height: auto; display: block; }
:root { --breite: 72rem; --mass: 38rem; --radius: 10px; --radius-feld: 8px; --titel-gewicht: 500; --grund: 1.0625rem; }
body { line-height: 1.7; }
.kopf { padding: 1.4rem 0; }
.marke { font-weight: 500; }
.hauptnav a { color: var(--gedaempft); }
.hauptnav a:hover { color: var(--text); }
.einstieg { padding: 2.5rem 0 3rem; }
@media (min-width: 48rem) { .einstieg { padding: 5rem 0 4rem; } }
.einstieg h1 { font-weight: 400; --h1-fs: clamp(2.1rem, 1.2rem + 4vw, 4rem); line-height: 1.05; letter-spacing: -.025em; max-width: 16ch; }
.einstieg .lead { color: var(--gedaempft); }
.abschnitt { padding: 2.5rem 0; }
@media (min-width: 48rem) { .abschnitt { padding: 3.5rem 0; } }
.abschnitt h2 { font-weight: 400; letter-spacing: -.015em; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); }
h3 { font-weight: 600; font-family: var(--schrift-text); font-size: 1.1rem; }
.ablauf { position: relative; }
.ablauf li { padding-left: 2.25rem; padding-bottom: .4rem; }
.ablauf li::after { content: ""; position: absolute; left: .45rem; top: 1.7rem; bottom: -.9rem; width: 1px; background: var(--haarlinie); }
.ablauf li:last-child::after { display: none; }
.ablauf li::before { font-family: var(--schrift-text); font-size: 1rem; font-weight: 600; color: var(--gedaempft); top: .2rem; width: 1rem; text-align: center; }
.bestellen .sf { background: var(--flaeche); border-radius: 18px; padding: 1.5rem 1.25rem; }
@media (min-width: 40rem) { .bestellen .sf { padding: 2.25rem 2.5rem 2rem; } }
.bestellen { max-width: none; }
.sf-preisanzeige { background: var(--flaeche); border-top-color: var(--haarlinie); }
.sf-balken { height: 3px; border-radius: 3px; overflow: hidden; }
.preisliste li { border-bottom: 0; padding: .5rem 0; }
.preisliste .punkte { border-bottom: 1px solid var(--haarlinie); }
.faq details { border-bottom: 0; border-top: 1px solid var(--haarlinie); }
.fuss { border-top: 0; background: var(--flaeche2); margin-top: 4rem; padding-top: 2.5rem; }
blockquote { border-left-color: var(--haarlinie); color: var(--gedaempft); }
.einstieg-bild img { border: 0; border-radius: 10px; box-shadow: 0 24px 48px -24px rgba(20,30,50,.35); }
.held { border-radius: 22px; }
@media (min-width: 64rem) { .einstieg.mit-held { padding: 4rem 0 5rem; } .mit-held .held img { aspect-ratio: 4 / 5; } .mit-held .einstieg-innen { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.abschnitt-bild img { border-radius: 18px; }
.marke svg text{font-family:var(--schrift-titel);}
.einstieg-text { container-type: inline-size; }
.stil-ruhig, .stil-papier { --h1-k: 1.85; }
.stil-warm { --h1-k: 1.72; }
.einstieg h1 { font-size: var(--h1-fs, clamp(2rem, 1.35rem + 3.2vw, 3.4rem)); overflow-wrap: break-word; }
.einstieg h1[data-w] {
  font-size: min(var(--h1-fs, clamp(2rem, 1.35rem + 3.2vw, 3.4rem)), calc(100cqi / var(--h1-w) * var(--h1-k, 1.65)));
  max-width: max(16ch, calc(var(--h1-w) * 1ch + 3ch));
}
.einstieg .handlung p { color: var(--text); font-size: 1rem; }
.einstieg .handlung p strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.einstieg .stand { color: var(--gedaempft); font-size: .95rem; margin: -.5rem 0 1.25rem; }
.preiszettel { display: none; }
@media (min-width: 64rem) {
  .mit-zettel .einstieg-innen { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; column-gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  .preiszettel {
    display: block; background: var(--feld-bg, #fff); border: 1px solid var(--haarlinie); border-radius: var(--radius, 4px);
    padding: 1.4rem 1.5rem 1.1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 40px -24px rgba(0,0,0,.28);
  }
  .preiszettel .pz-titel { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht, 600); font-size: 1.25rem; margin: 0 0 .5rem; }
  .preiszettel ul { list-style: none; margin: 0 0 .9rem; padding: 0; }
  .preiszettel li { margin: 0; padding: .55rem 0; border-bottom: 1px solid var(--haarlinie); }
  .preiszettel li:last-child { border-bottom: 0; }
  .preiszettel .zeile { display: flex; align-items: baseline; gap: .5rem; }
  .preiszettel .name { font-weight: 600; font-size: .98rem; line-height: 1.35; }
  .preiszettel .punkte { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--linie); transform: translateY(-.3em); }
  .preiszettel .betrag { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .preiszettel .dazu { display: block; color: var(--gedaempft); font-size: .9rem; }
  .preiszettel li.gewaehlt .name { color: var(--primaer-text); }
  .preiszettel .pz-mehr { margin: 0 0 .6rem; font-size: .95rem; }
  .preiszettel .pz-fuss { margin: 0; color: var(--gedaempft); font-size: .88rem; line-height: 1.45; }
  .stil-sachlich .preiszettel { box-shadow: none; border: 2px solid var(--text); }
  .stil-papier .preiszettel { transform: rotate(.6deg); }
  .stil-warm .preiszettel { border-radius: 18px; }
}
.krumen.breite { margin-left: auto; margin-right: auto; }
.typ-ratgeber .einstieg, .typ-info .einstieg, .typ-faq .einstieg, .typ-preise .einstieg, .typ-beispiel .einstieg { padding-top: 1.25rem; padding-bottom: 1.25rem; }
@media (min-width: 48rem) {
  .typ-ratgeber .einstieg, .typ-info .einstieg, .typ-faq .einstieg, .typ-preise .einstieg, .typ-beispiel .einstieg { padding-top: 2rem; padding-bottom: 1.75rem; }
}
.preisliste.kompakt li { padding: .45rem 0; }
@media (min-width: 48rem) {
  .preisliste.kompakt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}
.buehne { position: relative; min-width: 0; }
.beleg { margin: 1.75rem 0 0; background: var(--bg); border: 1px solid var(--haarlinie); padding: .75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 16px 36px -18px rgba(20,25,35,.4); isolation: isolate; }
.beleg figcaption { font-size: .92rem; line-height: 1.45; color: var(--text); min-width: 0; }
.beleg figcaption strong { display: block; font-family: var(--schrift-titel); font-weight: var(--titel-gewicht, 600); font-size: 1.05rem; line-height: 1.25; margin-bottom: .2rem; }
.beleg .beleg-text { display: block; color: var(--gedaempft); }
.beleg .beleg-meta { color: var(--gedaempft); font-size: .86rem; }
.beleg span.beleg-meta:not(:last-child) { display: block; }
.beleg .beleg-link { display: inline-block; margin-top: .35rem; font-weight: 600; }
.beleg-blatt { position: relative; display: block; }
.beleg-blatt picture, .beleg-blatt img { display: block; width: 100%; height: auto; }
.beleg-blatt img { background: #fff; border: 1px solid var(--haarlinie); box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 10px 22px -12px rgba(20,25,35,.45); transition: transform .25s ease; }
.beleg-blatt.mehrseitig::before { content: ""; position: absolute; z-index: -1; inset: 0; background: #fff; border: 1px solid var(--haarlinie);
  transform: translate(7px, 6px) rotate(2.2deg); box-shadow: 0 8px 18px -10px rgba(20,25,35,.35); }
.beleg-blatt:hover img, .beleg-blatt:focus-visible img { transform: translateY(-3px); }
.beleg-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #111; }
.beleg-ton { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: center; }
.beleg-ton picture { display: block; width: 4.5rem; }
.beleg-ton img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--haarlinie); transform: rotate(-2deg); box-shadow: 0 6px 14px -8px rgba(20,25,35,.45); }
.beleg-ton audio { width: 100%; min-width: 0; height: 2.6rem; }
.beleg-ton:not(:has(picture)) { grid-template-columns: minmax(0, 1fr); }
.beleg-faecher { position: relative; display: grid; }
.beleg-faecher > picture { grid-area: 1 / 1; display: block; }
.beleg-faecher img { display: block; width: 100%; height: auto; border: 3px solid #fff; box-shadow: 0 8px 20px -10px rgba(20,25,35,.5); }
.beleg-faecher.n2 > picture:nth-child(1), .beleg-faecher.n3 > picture:nth-child(1) { transform: rotate(-6deg) translate(-8%, 3%) scale(.86); }
.beleg-faecher.n3 > picture:nth-child(2) { transform: rotate(5deg) translate(9%, 2%) scale(.86); }
.beleg-faecher.n2 > picture:nth-child(2), .beleg-faecher.n3 > picture:nth-child(3) { transform: rotate(-1deg); position: relative; }
@media (max-width: 63.99rem) {
  .buehne { display: flex; flex-direction: column; }
  .buehne .beleg { order: -1; }
  .buehne .held { margin-top: 1.5rem; width: 100%; }
  .beleg-pdf .beleg, .beleg-bild .beleg { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .9rem; }
  .beleg-bild .beleg { grid-template-columns: 8rem minmax(0, 1fr); }
  .beleg-video .beleg figcaption, .beleg-audio .beleg figcaption { margin-top: .7rem; }
}
@media (min-width: 64rem) {
  .mit-beleg .beleg { position: absolute; z-index: 2; margin: 0; left: -3.25rem; bottom: -2.5rem; width: 13rem; }
  .beleg-pdf .beleg figcaption, .beleg-bild .beleg figcaption { margin-top: .7rem; }
  .beleg-video .beleg { width: 22rem; left: -4rem; }
  .beleg-audio .beleg { width: 21rem; left: -4rem; }
  .beleg-bild .beleg { width: 15rem; }
  .beleg-video .beleg figcaption, .beleg-audio .beleg figcaption { margin-top: .65rem; }
  .mit-bild .buehne:not(:has(.held)) .beleg { position: static; width: auto; }
  .einstieg.mit-held:has(.mit-beleg) { margin-bottom: 1.5rem; }
}
.stil-papier .beleg { border-color: var(--haarlinie); }
@media (min-width: 64rem) {
  .stil-papier .mit-beleg .beleg { left: -2.5rem; bottom: -1.75rem; }
  .stil-papier .beleg-pdf .beleg, .stil-papier .beleg-bild .beleg { transform: rotate(-2deg); }
  .stil-warm .mit-beleg .beleg { border-radius: 14px; left: -3.5rem; bottom: -1.5rem; }
  .stil-warm .beleg-pdf .beleg, .stil-warm .beleg-bild .beleg { transform: rotate(-1.4deg); }
  .stil-ruhig .mit-beleg .beleg { border-radius: 12px; border-color: transparent; left: -3.75rem; bottom: -3rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 30px 60px -28px rgba(20,30,50,.5); }
  .stil-technisch .mit-beleg .beleg { border: 1px solid var(--text); box-shadow: 6px 6px 0 var(--haarlinie); left: -2.5rem; bottom: -2rem; }
  .stil-sachlich .einstieg.mit-held .buehne { position: static; }
  .stil-sachlich .einstieg.mit-held .beleg-pdf .beleg { width: 11.5rem; }
  .stil-sachlich .einstieg.mit-held .beleg { left: calc(50% + 2rem); bottom: 2rem; border: 2px solid var(--text); box-shadow: 8px 8px 0 rgba(0,0,0,.18); }
}
.stil-warm .beleg { border-radius: 14px; }
.stil-ruhig .beleg { border-radius: 12px; }
.stil-sachlich .beleg { border: 2px solid var(--text); box-shadow: none; }
.stil-technisch .beleg { border-color: var(--text); }
.stil-technisch .beleg .beleg-meta { font-family: var(--schrift-mono); font-size: .8rem; }
.stil-warm .beleg-faecher img, .stil-ruhig .beleg-faecher img { border-radius: 6px; }
.kurzablauf { padding: 1.75rem 0 .75rem; }
.kurzablauf .ka-titel { font-size: 1.15rem; margin: 0 0 .9rem; }
.kurzablauf ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.kurzablauf li { margin: 0; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); column-gap: .5rem; align-items: baseline; }
.kurzablauf .ka-nr { grid-row: span 2; font-family: var(--schrift-titel); font-size: 1.7rem; line-height: 1; color: var(--akzent-text); font-variant-numeric: lining-nums; }
.kurzablauf .ka-was { font-weight: 600; line-height: 1.3; }
.kurzablauf .ka-zeit { grid-column: 2; color: var(--gedaempft); font-size: .95rem; }
.kurzablauf .ka-preise { margin: 1.1rem 0 0; font-size: 1rem; }
@media (min-width: 48rem) {
  .kurzablauf ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .kurzablauf li { padding: .15rem 1.25rem; border-left: 1px solid var(--haarlinie); }
  .kurzablauf li:first-child { padding-left: 0; border-left: 0; }
}
@media (min-width: 64rem) { .kurzablauf { padding-top: 3rem; } }
.stil-sachlich .kurzablauf .ka-nr { font-weight: 700; color: var(--primaer-text); }
.stil-sachlich .kurzablauf li { border-left-color: var(--text); }
.stil-technisch .kurzablauf .ka-zeit { font-family: var(--schrift-mono); font-size: .85rem; }
.stil-papier .kurzablauf .ka-nr { font-style: italic; }
@media (prefers-reduced-motion: reduce) { .beleg-blatt img { transition: none; } }
.beleg-zitat { margin: .6rem 0 .15rem; padding: 0; }
.beleg-zitat > div { margin: 0 0 .55rem; padding-left: .7rem; border-left: 3px solid var(--akzent); }
.beleg-zitat dt { font-family: var(--schrift-titel); font-size: .95rem; line-height: 1.35; color: var(--text); }
.beleg-zitat dd { margin: .2rem 0 0; font-size: .88rem; line-height: 1.4; color: var(--gedaempft); }
.beleg-zitat dd b { color: var(--text); font-weight: 600; white-space: nowrap; }
@media (max-width: 63.99rem) {
  .beleg-pdf .beleg.mit-zitat { align-items: start; }
  .beleg-zitat > div + div { display: none; }
}
@media (min-width: 64rem) {
  .mit-beleg .beleg.mit-zitat { width: 24rem; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
  .beleg-pdf .beleg.mit-zitat figcaption { margin-top: 0; }
}
.beleg-faecher .beleg-handy { grid-area: 1 / 1; position: relative; margin: 0 9%; align-self: start; background: #16191d; padding: .45rem .4rem .6rem; border-radius: 1.35rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 14px 28px -12px rgba(20,25,35,.55); }
.beleg-handy::before { content: ""; display: block; width: 2.4rem; height: .28rem; border-radius: .2rem; background: #3b4148; margin: .1rem auto .4rem; }
.beleg-handy picture { display: block; }
.beleg-faecher .beleg-handy img { border: 0; border-radius: .3rem; box-shadow: none; }
.beleg-handy .bh-text { margin: .45rem .25rem 0; color: #eef0f2; font-size: .75rem; line-height: 1.3; }
.beleg-handy .bh-text b { font-weight: 600; }
.stil-warm .beleg-faecher .beleg-handy img, .stil-ruhig .beleg-faecher .beleg-handy img { border-radius: .3rem; }
@media (max-width: 63.99rem) { .beleg-handy .bh-text { display: none; } }
.einstieg h1[data-w="12"]{--h1-w:12}.einstieg h1[data-w="13"]{--h1-w:13}.einstieg h1[data-w="14"]{--h1-w:14}.einstieg h1[data-w="15"]{--h1-w:15}.einstieg h1[data-w="16"]{--h1-w:16}.einstieg h1[data-w="17"]{--h1-w:17}.einstieg h1[data-w="18"]{--h1-w:18}.einstieg h1[data-w="19"]{--h1-w:19}.einstieg h1[data-w="20"]{--h1-w:20}.einstieg h1[data-w="21"]{--h1-w:21}.einstieg h1[data-w="22"]{--h1-w:22}.einstieg h1[data-w="23"]{--h1-w:23}.einstieg h1[data-w="24"]{--h1-w:24}.einstieg h1[data-w="25"]{--h1-w:25}.einstieg h1[data-w="26"]{--h1-w:26}.einstieg h1[data-w="27"]{--h1-w:27}.einstieg h1[data-w="28"]{--h1-w:28}.einstieg h1[data-w="29"]{--h1-w:29}.einstieg h1[data-w="30"]{--h1-w:30}.einstieg h1[data-w="31"]{--h1-w:31}.einstieg h1[data-w="32"]{--h1-w:32}.einstieg h1[data-w="33"]{--h1-w:33}.einstieg h1[data-w="34"]{--h1-w:34}.einstieg h1[data-w="35"]{--h1-w:35}.einstieg h1[data-w="36"]{--h1-w:36}.einstieg h1[data-w="37"]{--h1-w:37}.einstieg h1[data-w="38"]{--h1-w:38}.einstieg h1[data-w="39"]{--h1-w:39}.einstieg h1[data-w="40"]{--h1-w:40}