:root {
  --papier: #F6F5EF;
  --weiss: #FFFFFF;
  --flaeche: #ECEFE7;
  --tinte: #101915;
  --tinte-2: #3D4A43;
  --tinte-3: #59655E;
  --linie: rgba(16, 25, 21, .12);
  --linie-stark: rgba(16, 25, 21, .22);

  --gruen-950: #07241B;
  --gruen-900: #0B3B2C;
  --gruen-800: #0E4A37;
  --gruen-700: #12654B;
  --gruen-600: #177A5B;
  --gruen-100: #DCEBE2;
  --gruen-50: #EEF5EF;
  --gold: #C89B3C;
  --gold-tief: #8A6420;
  --gold-hell: #F4EBD3;
  --gold-flaeche: #F3EDDD;
  --minze: #8FE8C2;

  --hell: #F6F5EF;
  --hell-2: rgba(246, 245, 239, .78);
  --hell-3: rgba(246, 245, 239, .62);
  --linie-hell: rgba(246, 245, 239, .16);

  --schrift-titel: "Bricolage Grotesque", "Albert Sans", system-ui, sans-serif;
  --schrift-text: "Albert Sans", system-ui, sans-serif;

  --fs-mega: clamp(2.75rem, 1.3rem + 6.2vw, 6rem);
  --fs-1: clamp(2.1rem, 1.35rem + 3.1vw, 4rem);
  --fs-2: clamp(1.6rem, 1.25rem + 1.5vw, 2.5rem);
  --fs-3: clamp(1.25rem, 1.12rem + .55vw, 1.6rem);
  --fs-lead: clamp(1.125rem, 1.06rem + .3vw, 1.3rem);
  --fs-text: 1.0625rem;
  --fs-klein: .9375rem;
  --fs-mini: .8125rem;

  --a-1: .25rem; --a-2: .5rem; --a-3: .75rem; --a-4: 1rem; --a-5: 1.5rem;
  --a-6: 2rem; --a-7: 3rem; --a-8: 4rem; --a-9: 6rem; --a-10: 8rem;
  --luft: clamp(4rem, 2.5rem + 6vw, 8rem);
  --luft-dicht: clamp(3rem, 2rem + 4vw, 5rem);
  --rand: clamp(1.25rem, .6rem + 3vw, 3rem);
  --breite: 80rem;

  --r-klein: 10px;
  --r: 16px;

  --schatten-1: 0 1px 2px rgba(7, 36, 27, .06), 0 4px 14px -4px rgba(7, 36, 27, .10);
  --schatten-2: 0 2px 6px rgba(7, 36, 27, .06), 0 24px 48px -20px rgba(7, 36, 27, .28);
  --schatten-dunkel: 0 2px 8px rgba(0, 0, 0, .25), 0 30px 60px -24px rgba(0, 0, 0, .55);

  --aus: cubic-bezier(.23, 1, .32, 1);
  --quer: cubic-bezier(.77, 0, .175, 1);
  --kopf-h: 4.25rem;

  --vd-akzent: var(--gruen-700);
  --vd-fokus: var(--gruen-600);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-h) + 1rem);
  background: var(--papier);
  scrollbar-color: color-mix(in oklab, var(--gruen-900) 45%, transparent) var(--papier);
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--fs-text);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
  text-wrap: balance;
  font-optical-sizing: auto;
}
p, ul, ol, dl, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
strong, b { font-weight: 650; }
table { border-collapse: collapse; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--gruen-100); color: var(--gruen-950); }
.flaeche-wald ::selection, .schluss ::selection, .fuss ::selection { background: var(--minze); color: var(--gruen-950); }
:focus-visible { outline: 2px solid var(--gruen-600); outline-offset: 3px; border-radius: 4px; }
.flaeche-wald :focus-visible, .schluss :focus-visible, .fuss :focus-visible { outline-color: var(--minze); }
main:focus { outline: none; }
:focus:not(:focus-visible) { outline: none; }
.vd-fokusziel:focus { outline: none; }
input, textarea { caret-color: var(--gruen-700); }

.visuell-versteckt {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprung {
  position: fixed; z-index: 300; left: var(--a-4); top: var(--a-3);
  padding: var(--a-3) var(--a-4); border-radius: var(--r-klein);
  background: var(--gruen-900); color: var(--hell); font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform .2s var(--aus);
}
.sprung:focus-visible { transform: none; }

.huelle { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }

.t-mega { font-size: var(--fs-mega); }
.t-1 { font-size: var(--fs-1); font-stretch: 92%; line-height: 1.02; letter-spacing: -.03em; }
.t-2 { font-size: var(--fs-2); line-height: 1.08; }
.t-3 { font-size: var(--fs-3); line-height: 1.15; letter-spacing: -.015em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--tinte-2); max-width: 38em; }
.notiz { font-size: var(--fs-klein); color: var(--tinte-3); }
.hinweis { font-size: var(--fs-klein); }
.kleingedruckt { font-size: var(--fs-mini); color: var(--tinte-3); }
p.kleingedruckt:not(.huelle) { max-width: 70ch; }
.bildnotiz { margin-top: var(--a-3); font-size: var(--fs-mini); color: var(--tinte-3); }
.flaeche-wald .bildnotiz { color: var(--hell-3); }
.fliess { max-width: 68ch; }
.fliess > * + * { margin-top: 1em; }
.fliess h2 { font-size: var(--fs-2); margin-top: 1.6em; }
.fliess h3 { font-size: var(--fs-3); margin-top: 1.5em; letter-spacing: -.015em; }
.fliess h2 + *, .fliess h3 + * { margin-top: .6em; }
.fliess ul, .fliess ol { padding-left: 1.25em; }
.fliess ul { list-style: none; padding-left: 0; }
.fliess ul > li { position: relative; padding-left: 1.4em; }
.fliess ul > li::before { content: ""; position: absolute; left: .15em; top: .72em; width: .5em; height: 2px; background: var(--gold); border-radius: 2px; }
.fliess ol { list-style: decimal; }
.fliess ol > li::marker { color: var(--gruen-700); font-weight: 650; }
.fliess li + li { margin-top: .45em; }
.fliess a { color: var(--gruen-700); font-weight: 550; }
.fliess strong { color: var(--tinte); }
.fliess blockquote { padding: var(--a-4) var(--a-5); background: var(--gruen-50); border-radius: var(--r); font-size: var(--fs-lead); }
.fliess table { width: 100%; font-size: var(--fs-klein); }
.fliess th, .fliess td { text-align: left; padding: var(--a-3) var(--a-3) var(--a-3) 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.fliess th { font-weight: 650; }
.tab-zahlen { font-variant-numeric: tabular-nums; }

.knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-3); align-items: center; }
.knopf {
  --k-grund: var(--gruen-700); --k-text: #fff; --k-rand: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3rem; padding: .75rem 1.4rem;
  border: 1px solid var(--k-rand); border-radius: 999px;
  background: var(--k-grund); color: var(--k-text);
  font-family: var(--schrift-text); font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--aus), border-color .2s var(--aus), color .2s var(--aus), transform .16s var(--aus), box-shadow .2s var(--aus);
}
@media (max-width: 26rem) { .knopf { white-space: normal; text-align: center; } }
.knopf > span { color: inherit !important; }
.knopf .i { flex: none; width: 1.1em; height: 1.1em; margin-right: -.2em; transition: transform .2s var(--aus); }
.knopf:active { transform: scale(.97); }
.knopf--gross { min-height: 3.5rem; padding: 1rem 1.75rem; font-size: 1.0625rem; }
.knopf--klein { min-height: 2.5rem; padding: .55rem 1.1rem; font-size: .9375rem; }
.knopf--rand { --k-grund: transparent; --k-text: var(--tinte); --k-rand: var(--linie-stark); }
.knopf--hell { --k-grund: var(--hell); --k-text: var(--gruen-950); }
.knopf--rand-hell { --k-grund: transparent; --k-text: var(--hell); --k-rand: rgba(246, 245, 239, .38); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { --k-grund: var(--gruen-800); box-shadow: 0 6px 18px -8px rgba(7, 36, 27, .5); }
  .knopf:hover .i { transform: translateX(3px); }
  .knopf--rand:hover { --k-grund: var(--weiss); --k-rand: var(--tinte); box-shadow: none; }
  .knopf--hell:hover { --k-grund: #fff; }
  .knopf--rand-hell:hover { --k-grund: rgba(246, 245, 239, .08); --k-rand: var(--hell); box-shadow: none; }
  .knopf[disabled]:hover { --k-grund: var(--gruen-700); box-shadow: none; }
}
.textlink {
  display: inline-flex; align-items: center; gap: .45em;
  color: var(--gruen-700); font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .3s var(--aus);
}
.textlink .i { width: 1.05em; height: 1.05em; flex: none; transition: transform .2s var(--aus); }
.textlink--hell { color: var(--minze); }
.textlink--lang { display: inline; }
.textlink--lang .i { display: inline-block; vertical-align: -.15em; margin-left: .35em; }
@media (hover: hover) and (pointer: fine) {
  .textlink:hover { background-size: 100% 1px; }
  .textlink:hover .i { transform: translateX(3px); }
}
.rund {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
  border: 1px solid var(--linie-hell); border-radius: 50%; background: transparent; color: var(--hell);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--aus), border-color .2s var(--aus), opacity .2s, transform .16s var(--aus);
}
.rund .i { width: 1.25rem; height: 1.25rem; }
.rund:active:not([aria-disabled="true"]) { transform: scale(.94); }
.rund:disabled, .rund[aria-disabled="true"] { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .rund:hover:not(:disabled):not([aria-disabled="true"]) { background: rgba(246, 245, 239, .1); border-color: var(--hell-2); } }
.i { width: 1.25rem; height: 1.25rem; flex: none; }

.haken-liste { display: grid; gap: var(--a-3); }
.haken-liste li { position: relative; padding-left: 1.9rem; }
.haken-liste li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--gruen-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312654B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.haken-liste--zwei { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); column-gap: var(--a-6); }

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--aus), box-shadow .25s var(--aus);
}
.kopf--gerollt { background: var(--papier); border-bottom-color: var(--linie); box-shadow: 0 8px 24px -20px rgba(7, 36, 27, .4); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf--gerollt { background: linear-gradient(180deg, rgba(246, 245, 239, .76), rgba(246, 245, 239, .64));
    -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.04); backdrop-filter: blur(20px) saturate(1.8) brightness(1.04); }
  .kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s var(--aus); }
  .kopf::before { background: radial-gradient(60% 160% at 50% -70%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 70%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -14px 18px -16px rgba(7, 36, 27, .16); }
  .kopf--gerollt::before { opacity: 1; }
  .kopf--gerollt.ist-fluessig { -webkit-backdrop-filter: blur(10px) url(#kopf-glas) saturate(1.8) brightness(1.06); backdrop-filter: blur(10px) url(#kopf-glas) saturate(1.8) brightness(1.06); }
  html.menue-offen .kopf { background: var(--papier); }
  html.menue-offen .kopf::before { opacity: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  .kopf--gerollt, .kopf--gerollt.ist-fluessig { background: var(--papier); }
  .kopf, .kopf.ist-fluessig { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .kopf::before { display: none; }
}
.kopf__innen { display: flex; align-items: center; gap: var(--a-5); min-height: var(--kopf-h); }
.marke { display: inline-flex; align-items: center; gap: .6rem; color: var(--gruen-950); text-decoration: none; flex: none; }
.marke__zeichen { width: 2.1rem; height: auto; color: var(--gruen-900); }
.marke__name { font-family: var(--schrift-titel); font-weight: 700; font-size: 1.4rem; letter-spacing: -.03em; line-height: 1; }
.hauptnav { margin-left: auto; }
.hauptnav__liste { display: flex; align-items: center; gap: .25rem; }
.nav-punkt { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; padding: .5rem .8rem;
  border: 0; border-radius: var(--r-klein); background: none; cursor: pointer;
  color: var(--tinte-2); font-size: .98rem; font-weight: 550; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s var(--aus), background-color .15s var(--aus);
}
.nav-link[aria-current="page"], .nav-punkt.ist-bereich > .nav-link { color: var(--gruen-950); }
.nav-link[aria-current="page"]::after, .nav-punkt.ist-bereich > .nav-link::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 2px; border-radius: 2px; background: var(--gold);
}
@media (hover: hover) and (pointer: fine) { .nav-link:hover { color: var(--gruen-950); background: rgba(16, 25, 21, .05); } }
.kopf__start { margin-left: var(--a-2); }

.menue-knopf {
  display: none; align-items: center; gap: .6rem; margin-left: auto;
  min-height: 2.75rem; padding: .5rem .35rem .5rem .9rem;
  border: 1px solid var(--linie-stark); border-radius: 999px; background: transparent; cursor: pointer;
  font-weight: 600; font-size: .95rem; color: var(--tinte);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
}
.menue-knopf:active { transform: scale(.97); }
.menue-knopf__striche { position: relative; display: block; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--gruen-900); }
.menue-knopf__striche span {
  position: absolute; left: .55rem; right: .55rem; height: 1.6px; border-radius: 2px; background: var(--hell);
  transition: transform .25s var(--aus);
}
.menue-knopf__striche span:first-child { top: calc(50% - 3px); }
.menue-knopf__striche span:last-child { top: calc(50% + 2px); }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche span:first-child { transform: translateY(2.5px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche span:last-child { transform: translateY(-2.5px) rotate(-45deg); }

.mobil {
  position: fixed; left: 0; right: 0; top: var(--kopf-h); bottom: auto; z-index: 90;
  height: calc(100vh - var(--kopf-h)); height: calc(100dvh - var(--kopf-h));
  background: var(--papier); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .16s ease-out, transform .16s ease-out, visibility 0s linear .16s;
}
.mobil.ist-offen { opacity: 1; visibility: visible; transform: none; transition: opacity .24s var(--aus), transform .28s var(--aus), visibility 0s; }
.mobil__innen { padding: var(--a-4) var(--rand) calc(var(--a-7) + env(safe-area-inset-bottom)); }
.mobil__liste > li { border-bottom: 1px solid var(--linie); }
.mobil__link {
  display: flex; align-items: center; min-height: 3.5rem; text-decoration: none;
  font-family: var(--schrift-titel); font-weight: 650; font-size: 1.6rem; letter-spacing: -.02em; color: var(--gruen-950);
}
.mobil__link[aria-current="page"]::after, .mobil__liste > li.ist-bereich > .mobil__link::after { content: ""; width: .45rem; height: .45rem; margin-left: .6rem; border-radius: 50%; background: var(--gold); }
.mobil__neben { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-5); margin-top: var(--a-5); }
.mobil__neben a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--tinte-2); font-weight: 550; }
.mobil__neben a[aria-current="page"] { color: var(--gruen-700); }
.mobil__start { width: 100%; margin-top: var(--a-5); }
.mobil__notiz { margin-top: var(--a-4); font-size: var(--fs-klein); color: var(--tinte-3); }
.mobil__notiz a { color: var(--gruen-700); }
html.menue-offen { overflow: hidden; }
html.menue-sofort .mobil, html.menue-sofort .menue-knopf__striche span { transition: none !important; }

@media (max-width: 66rem) {
  .hauptnav, .kopf__start { display: none; }
  .menue-knopf { display: inline-flex; }
  :root { --kopf-h: 4rem; }
}
@media (min-width: 66.01rem) { .mobil { display: none; } }

.abschnitt { padding-block: var(--luft); }
.abschnitt--dicht { padding-block: var(--luft-dicht); }
.abschnitt--luftig { padding-block: calc(var(--luft) * 1.25); }
.flaeche-weiss { background: var(--weiss); }
.flaeche-gold { background: var(--gold-flaeche); }
.flaeche-gruen-hell { background: var(--gruen-50); }
.flaeche-wald { background: var(--gruen-900); color: var(--hell); }
.flaeche-wald .lead, .flaeche-wald p { color: var(--hell-2); }
.flaeche-wald h2, .flaeche-wald h3 { color: var(--hell); }

.kopfzeile { display: grid; gap: var(--a-4); justify-items: start; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.kopfzeile > h2 { max-width: 22ch; text-wrap: balance; }
.kopfzeile__text { font-size: var(--fs-lead); line-height: 1.55; color: var(--tinte-2); max-width: 40em; }
.kopfzeile--hell .kopfzeile__text { color: var(--hell-2); }


.aufmacher__titel {
  font-size: var(--fs-mega); font-stretch: 86%; font-weight: 750; line-height: .96; letter-spacing: -.035em;
  color: var(--gruen-950); max-width: 15ch;
}
.aufmacher__titel .zeile { display: block; }
.zeile--akzent > span { position: relative; display: inline-block; color: var(--gruen-700); }
.unterstrich { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .16em; overflow: visible; }
.unterstrich path { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.aufmacher__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--tinte-2); max-width: 34em; }
.aufmacher__handlung { display: grid; gap: var(--a-4); align-content: start; }

.buehne { padding-top: clamp(1.25rem, .5rem + 2.2vw, 2.75rem); }
.buehne__kopf { display: grid; gap: var(--a-5) var(--a-8); padding-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }
.buehne .aufmacher__titel { font-size: clamp(2.6rem, 1rem + 5.3vw, 5.6rem); max-width: none; }
.buehne .aufmacher__lead { max-width: 36em; }
.buehne .aufmacher__handlung { gap: var(--a-3); }
.buehne .aufmacher__handlung .aufmacher__lead { margin-bottom: var(--a-3); }
.buehne .aufmacher__titel .zeile:first-child, .buehne .aufmacher__titel .zeile:nth-child(2) { display: inline; }
@media (min-width: 60rem) {
  .buehne .aufmacher__titel { font-size: clamp(3.6rem, 1rem + 5vw, 5.6rem); }
}
.buehne__band {
  --kante: clamp(7rem, 3rem + 14vw, 17rem);
  background: linear-gradient(to bottom, transparent var(--kante), var(--gruen-950) var(--kante));
  color: var(--hell); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.buehne__band .schaufenster__sicht { --spalte: min(84vw, 54rem); }
.buehne__band .schaufenster__reihe { padding-top: .25rem; }
.buehne__band .schaufenster__fuss { margin-top: var(--a-4); }
.buehne__band ::selection { background: var(--minze); color: var(--gruen-950); }
.buehne__band :focus-visible { outline-color: var(--minze); }
@media (max-width: 40rem) {
  .buehne .aufmacher__titel { font-size: clamp(2.35rem, 1.2rem + 5.4vw, 2.9rem); font-stretch: 80%; }
  .buehne .aufmacher__lead { font-size: 1.0625rem; }
  .buehne .knoepfe { display: grid; gap: .6rem; }
  .buehne .knoepfe .knopf { min-height: 3.25rem; }
}


.schaufenster__steuer { display: flex; align-items: center; gap: var(--a-3); }
.no-js [data-nur-js] { display: none !important; }
.schaufenster__zaehler { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--hell-3); font-size: var(--fs-klein); }
.schaufenster__zaehler b { color: var(--hell); font-weight: 600; }
.schaufenster__sicht {
  --versatz: max(var(--rand), calc((100vw - var(--breite)) / 2));
  --spalte: min(86vw, 50rem); --luecke: clamp(1rem, .5rem + 1.5vw, 2rem);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--versatz); scrollbar-width: none;
}
.schaufenster__sicht::-webkit-scrollbar { display: none; }
.schaufenster__sicht:focus-visible { outline-offset: -2px; }
.schaufenster__sicht.ist-gezogen, .schaufenster__sicht.ist-bewegt { scroll-snap-type: none; }
.schaufenster__sicht.ist-gezogen { cursor: grabbing; user-select: none; -webkit-user-select: none; }
@media (hover: hover) and (pointer: fine) { .schaufenster__sicht.ist-bereit:not(.ist-gezogen) { cursor: grab; } }
.schaufenster__reihe { display: flex; width: max-content; padding-inline: var(--versatz); padding-bottom: var(--a-4); }
.schaufenster__reihe img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.fenster { flex: 0 0 var(--spalte); min-width: 0; margin-right: var(--luecke); scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; gap: var(--a-4); }
.fenster:last-child { margin-right: 0; }
.fenster.ist-fern { scroll-snap-align: none; }
.fenster__link { display: block; text-decoration: none; color: inherit; border-radius: calc(var(--r) + 6px); }
.fenster__bild {
  display: block; overflow: hidden; border-radius: var(--r); aspect-ratio: 16 / 10;
  background: var(--gruen-900); box-shadow: var(--schatten-dunkel);
  outline: 2px solid transparent; outline-offset: 4px;
  transition: outline-color .25s var(--aus), box-shadow .25s var(--aus);
}
.fenster__bild img { width: 100%; height: 100%; object-fit: cover; }
.fenster__unter { flex-grow: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: .15rem var(--a-4); align-items: center; }
.fenster__name { font-family: var(--schrift-titel); font-size: var(--fs-3); font-weight: 650; letter-spacing: -.02em; }
.fenster__art { grid-row: 2; color: var(--hell-3); font-size: var(--fs-klein); }
.fenster__name, .fenster__art { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fenster__unter { container-type: inline-size; }
.fenster__name { font-size: min(var(--fs-3), 5.8cqi); }
.fenster__knopf { grid-row: 1 / 3; grid-column: 2; }
@media (hover: hover) and (pointer: fine) { .fenster__knopf:hover { --k-grund: var(--minze); } }
@media (max-width: 40rem) {
  .fenster__knopf { grid-row: 3; grid-column: 1 / -1; justify-self: start; margin-top: var(--a-3); }
}
@media (hover: hover) and (pointer: fine) {
  .fenster__link:hover .fenster__bild { outline: 2px solid var(--minze); outline-offset: 4px; }
}
.schaufenster__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-4); margin-top: var(--a-5); }
.schaufenster__fuss .hinweis { color: var(--hell-3); }

.warum__raster { display: grid; gap: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }
.warum__kopf h2 { max-width: 22ch; text-wrap: balance; }
.warum__liste li { padding-block: var(--a-5); border-top: 1px solid var(--linie-stark); display: grid; gap: var(--a-3); align-content: start; }
.warum__liste li:last-child { border-bottom: 1px solid var(--linie-stark); }
.warum__liste h3 { font-size: var(--fs-3); color: var(--gruen-950); text-wrap: balance; }
.warum__liste p { color: var(--tinte-2); max-width: 36em; }
@media (min-width: 60rem) {
  .warum__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--a-7); }
  .warum__liste li { padding-bottom: 0; }
  .warum__liste li:last-child { border-bottom: 0; }
}


.bearbeiten__seite {
  position: relative; overflow: hidden; border-radius: var(--r); background: var(--weiss);
  box-shadow: var(--schatten-2); outline: 1px solid var(--linie); outline-offset: -1px;
}
.bearbeiten__leiste {
  display: flex; align-items: center; gap: var(--a-3); padding: .7rem .85rem;
  background: var(--gruen-950); color: var(--hell); font-size: var(--fs-mini); font-weight: 550;
}
.bearbeiten__leiste .i { width: 1rem; height: 1rem; }
.bearbeiten__modus, .bearbeiten__fassung { display: inline-flex; align-items: center; gap: .4rem; }
.bearbeiten__modus { color: var(--minze); }
.bearbeiten__fassung { color: var(--hell-3); }
.bearbeiten__speichern { margin-left: auto; padding: .35rem .8rem; border-radius: 999px; background: var(--minze); color: var(--gruen-950); font-weight: 650; }
@media (max-width: 30rem) { .bearbeiten__fassung { display: none; } }
.bearbeiten__inhalt { padding: clamp(1.25rem, .8rem + 2vw, 2.25rem); display: grid; gap: var(--a-4); }
.bearbeiten__h { font-family: var(--schrift-titel); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.bearbeiten__h--klein { font-size: 1.15rem; margin-top: var(--a-3); }
.bearbeiten__zeiten div { display: flex; justify-content: space-between; gap: var(--a-4); padding: .6rem 0; border-bottom: 1px dashed var(--linie-stark); font-variant-numeric: tabular-nums; }
.bearbeiten__zeiten dt { color: var(--tinte-2); }
.bearbeiten__zeiten dd { margin: 0; font-weight: 600; }
.bearbeiten__zeiten .ist-aktiv { border-bottom-color: transparent; }
.bearbeiten__feld {
  position: relative; display: inline-flex; align-items: center; padding: .15rem .5rem; margin: -.15rem -.5rem;
  border-radius: 6px; background: var(--gruen-50); box-shadow: 0 0 0 2px var(--gruen-600);
}
.bearbeiten__marke { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; background: var(--gruen-700); }
.bearbeiten__text { color: var(--tinte-2); display: flex; justify-content: space-between; gap: var(--a-4); }
.bearbeiten__preis { font-weight: 650; color: var(--tinte); white-space: nowrap; font-variant-numeric: tabular-nums; }

.app__fenster {
  display: grid; grid-template-columns: 15rem minmax(0, 1fr); overflow: hidden;
  border-radius: var(--r); background: var(--gruen-950); color: var(--tinte);
  box-shadow: var(--schatten-dunkel);
  font-size: .9rem; line-height: 1.4;
}
.app__leiste { display: grid; align-content: start; gap: 2px; padding: var(--a-4) var(--a-3); background: var(--gruen-950); color: var(--hell-2); }
.app__marke { display: flex; align-items: center; gap: .55rem; padding: .3rem .6rem 1rem; font-family: var(--schrift-titel); font-weight: 650; color: var(--hell); font-size: 1.05rem; }
.app__punkt { width: 1.5rem; height: 1.5rem; border-radius: 7px; background: var(--gold); }
.app__nav { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 8px; }
.app__nav .i { width: 1.05rem; height: 1.05rem; opacity: .85; }
.app__nav b { margin-left: auto; min-width: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: var(--minze); color: var(--gruen-950); font-size: .75rem; text-align: center; }
.app__nav--an { background: rgba(246, 245, 239, .1); color: var(--hell); }
.app__nav--chat { margin-top: var(--a-5); color: var(--minze); }
.app__haupt { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--a-5); padding: var(--a-5); align-content: start; background: #FBFBF8; }
.app__kopf { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--a-3); }
.app__titel { font-family: var(--schrift-titel); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.app__datum { color: var(--tinte-3); }
.app__liste { display: grid; gap: .5rem; align-content: start; }
.app__eintrag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: .8rem .9rem; border-radius: 12px; background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); }
.app__ikon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 9px; background: var(--gruen-50); color: var(--gruen-700); }
.app__ikon .i { width: 1.1rem; height: 1.1rem; }
.app__text { display: grid; gap: .05rem; min-width: 0; }
.app__art { font-size: .72rem; font-weight: 650; color: var(--tinte-3); }
.app__wer { font-weight: 650; }
.app__was { color: var(--tinte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app__status { padding: .15rem .55rem; border-radius: 999px; background: var(--flaeche); color: var(--tinte-2); font-size: .74rem; font-weight: 600; }
.app__status--neu { background: var(--gold-hell); color: #6B4C12; }
.app__status--gut { background: var(--gruen-100); color: var(--gruen-800); }
.app__status--still { background: transparent; color: var(--tinte-3); box-shadow: inset 0 0 0 1px var(--linie); }
.app__zahlen { display: grid; gap: var(--a-4); grid-template-rows: auto 1fr; padding: var(--a-4); border-radius: 12px; background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); }
.app__zahlkopf { display: flex; justify-content: space-between; align-items: baseline; color: var(--tinte-2); font-size: .8rem; }
.app__summe { font-family: var(--schrift-titel); font-size: 1.6rem; font-weight: 700; color: var(--tinte); font-variant-numeric: tabular-nums; }
.app__balken { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; height: auto; min-height: 9rem; align-items: stretch; }
.app__saeule { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: .35rem; text-align: center; }
.app__saeule i { align-self: end; height: calc(var(--h) * 100%); border-radius: 4px 4px 2px 2px; background: var(--gruen-600); }
.app__saeule:nth-child(5) i, .app__saeule:nth-child(6) i { background: var(--gruen-800); }
.app__saeule em { font-style: normal; font-size: .7rem; color: var(--tinte-3); }
@media (max-width: 60rem) {
  .app__fenster { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
  .app__leiste { grid-auto-flow: column; grid-auto-columns: max-content; overflow: hidden; padding: .6rem; gap: .25rem; }
  .app__marke { padding: .3rem .4rem; }
  .app__nav:nth-child(n+4) { display: none; }
  .app__haupt { grid-template-columns: 1fr; padding: var(--a-4); }
}
@media (max-width: 30rem) { .app__marke { display: none; } }

.vierer { display: grid; gap: var(--a-6) var(--a-6); margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.vierer li { display: grid; gap: var(--a-2); padding-top: var(--a-4); border-top: 1px solid var(--linie-hell); align-content: start; }
.vierer h3 { font-size: 1.2rem; font-weight: 650; letter-spacing: -.01em; }
.vierer p { font-size: var(--fs-klein); line-height: 1.55; }
@media (min-width: 40rem) { .vierer { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .vierer { grid-template-columns: repeat(4, 1fr); } }

.mockup { position: relative; aspect-ratio: 100 / 58; }
.mockup .laptop { position: absolute; left: 0; top: 0; width: 89%; }
.mockup .iphone { position: absolute; right: 1%; bottom: 0; width: 22.5%; }

.abschnitt:has(> .huelle .mockup) { overflow-x: clip; }
.mockup { isolation: isolate; --schein-deckung: 1;
  --schein-1: #8FE8C2; --schein-2: #45D19A; --schein-3: #F2C14E; }
.mockup::before, .mockup::after { content: ""; position: absolute; z-index: -1; pointer-events: none;
  animation: schein-gross 16s ease-in-out infinite alternate paused; }
.mockup::before { inset: -2% -1% 0 -2%; border-radius: 34%; opacity: var(--schein-deckung); filter: blur(clamp(34px, 5.6vw, 96px));
  background: linear-gradient(125deg, var(--schein-1) 10%, var(--schein-2) 55%, var(--schein-3) 100%); }
.mockup::after { right: -5%; bottom: -6%; width: 30%; height: 78%; border-radius: 50%; opacity: var(--schein-deckung); filter: blur(clamp(28px, 4vw, 70px));
  background: radial-gradient(closest-side, var(--schein-3), transparent); animation-name: schein-klein; animation-duration: 12s; }
.mockup--sichtbar::before, .mockup--sichtbar::after { animation-play-state: running; }
@keyframes schein-gross { from { translate: -2% -2.5%; scale: .97; rotate: -3deg; } to { translate: 2.5% 2%; scale: 1.04; rotate: 4deg; } }
@keyframes schein-klein { from { translate: 6% 4%; scale: 1.1; } to { translate: -14% -8%; scale: .9; } }
@media (prefers-reduced-motion: reduce) { .mockup::before, .mockup::after { animation: none; } }
.flaeche-wald .mockup { --schein-deckung: .68; --schein-1: #8FE8C2; --schein-2: #2FBF86; --schein-3: #E4B04A; }

.laptop { container-type: inline-size; }
.laptop__deckel { position: relative; width: 88cqw; margin-inline: auto; padding: 1.9cqw 1.9cqw 3.2cqw; border-radius: 3cqw 3cqw .6cqw .6cqw;
  background: #0A0B0C; box-shadow: 0 0 0 .28cqw #A9ACB1, inset 0 0 0 .2cqw #26282B; }
.laptop__deckel::before { content: ""; position: absolute; left: 50%; top: .72cqw; width: .62cqw; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3E4A52, #121518 70%); }
.laptop__schirm { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .35cqw; background: #F4F4EF; isolation: isolate; }
.laptop__boden { position: relative; height: 2.3cqw; border-radius: .3cqw .3cqw 1.8cqw 1.8cqw / .3cqw .3cqw 1.5cqw 1.5cqw;
  background: linear-gradient(180deg, #F1F2F4 0%, #D4D6DA 30%, #B4B7BC 70%, #84878D 100%);
  box-shadow: inset 0 .12cqw 0 rgba(255, 255, 255, .9), 0 1.6cqw 2.6cqw -1.2cqw rgba(7, 20, 15, .45); }
.laptop__boden::before { content: ""; position: absolute; left: 50%; top: 0; width: 13cqw; height: 42%; translate: -50% 0; border-radius: 0 0 .9cqw .9cqw;
  background: linear-gradient(180deg, #A4A7AD, #CDD0D4); }
.laptop::after { content: ""; position: absolute; z-index: -1; left: 3%; right: 3%; bottom: -2.6cqw; height: 4cqw;
  background: radial-gradient(closest-side, rgba(7, 20, 15, .26), transparent); }

.iphone { container-type: inline-size; }
.iphone__koerper { position: relative; padding: 1.3cqw; border-radius: 17.5cqw;
  background: linear-gradient(150deg, #A7A9AE 0%, #55575C 14%, #34363A 45%, #4A4C51 80%, #9C9EA3 100%);
  box-shadow: inset 0 0 0 .35cqw rgba(255, 255, 255, .22), 0 2cqw 4cqw -1cqw rgba(7, 20, 15, .38), 0 14cqw 22cqw -8cqw rgba(7, 20, 15, .5); }
.iphone__glas { padding: 3.1cqw; border-radius: 16.3cqw; background: #030303; }
.iphone__schirm { position: relative; container-type: inline-size; aspect-ratio: 393 / 852; overflow: hidden; border-radius: 12.6cqw; background: #F4F4EF; isolation: isolate; }
.iphone__insel { position: absolute; z-index: 3; left: 50%; top: 2.8cqw; width: 32cqw; height: 9.4cqw; translate: -50% 0; border-radius: 99px; background: #000; }
.iphone__status { position: absolute; z-index: 3; inset: 0 0 auto 0; height: 13.7cqw; display: flex; align-items: center; justify-content: space-between;
  padding: 1.2cqw 7.6cqw 0 11.5cqw; color: #101915; font: 600 4.4cqw/1 -apple-system, BlinkMacSystemFont, "Albert Sans", system-ui, sans-serif; letter-spacing: -.01em; }
.iphone__status svg { width: 19cqw; height: auto; }
.iphone__balken { position: absolute; z-index: 3; left: 50%; bottom: 2cqw; width: 34.6cqw; height: 1.3cqw; translate: -50% 0; border-radius: 99px;
  background: #fff; mix-blend-mode: difference; }
.iphone__taste { position: absolute; width: 1.1cqw; border-radius: .6cqw 0 0 .6cqw; background: linear-gradient(90deg, #3A3C40, #8E9196); }
.iphone__taste--aktion { left: -.8cqw; top: 17%; height: 5.5%; }
.iphone__taste--laut { left: -.8cqw; top: 26%; height: 9%; }
.iphone__taste--leise { left: -.8cqw; top: 37%; height: 9%; }
.iphone__taste--seite { right: -.8cqw; top: 29%; height: 14%; border-radius: 0 .6cqw .6cqw 0; background: linear-gradient(270deg, #3A3C40, #8E9196); }

.buehne__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0;
  transition: opacity 0s linear .34s; user-select: none; -webkit-user-drag: none; }
.buehne__bild.ist-an { z-index: 1; opacity: 1; transition: opacity .34s var(--aus); }

.zeiger, .zeiger__y { position: absolute; inset: 0; pointer-events: none; }
.zeiger { z-index: 4; translate: 8% 0; opacity: 0; transition: translate .7s var(--aus), opacity .3s ease; }
.zeiger__y { translate: 0 25.7%; transition: translate .7s var(--quer); }
.zeiger__pfeil { position: absolute; left: 0; top: 0; width: clamp(11px, 2.4cqw, 22px); translate: -20% -9%; transform-origin: 21% 10%;
  fill: #fff; stroke: #101915; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); transition: scale .12s var(--aus); }
.zeiger--drueckt .zeiger__pfeil { scale: .84; }
.buehne--laeuft .zeiger { opacity: 1; }
.buehne__tipp { position: absolute; z-index: 4; left: var(--tx, 50%); top: var(--ty, 50%); width: var(--tipp-b, 16%); aspect-ratio: 1; translate: -50% -50%; scale: .3;
  border-radius: 50%; background: rgba(143, 232, 194, .3); box-shadow: inset 0 0 0 2px rgba(143, 232, 194, .95); opacity: 0; pointer-events: none; }
.laptop .buehne__tipp { --tipp-b: 4.5%; }
.buehne__tipp.ist-an { animation: buehne-tipp .6s var(--aus); }
@keyframes buehne-tipp { 0% { opacity: 0; scale: .4; } 20% { opacity: 1; } 100% { opacity: 0; scale: 1.4; } }

.flaeche-wald .laptop::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .4), transparent); }
.flaeche-wald .iphone__koerper { box-shadow: inset 0 0 0 .35cqw rgba(255, 255, 255, .22), 0 2cqw 4cqw -1cqw rgba(0, 0, 0, .45), 0 14cqw 22cqw -8cqw rgba(0, 0, 0, .55); }

@media (max-width: 35.99rem) {
  .mockup { aspect-ratio: auto; padding-block: .5rem 1.25rem; }
  .mockup::before { inset: 4% 3% 6%; border-radius: 30%; }
  .mockup::after { right: 0; bottom: 4%; width: 34%; height: 46%; }
  .mockup .laptop { position: relative; width: 100%; }
  .mockup .iphone { display: none; }
}

.app-schau { display: grid; gap: var(--a-5); grid-template-areas: "buehne" "nav" "satz"; }
.app-schau__buehne { grid-area: buehne; margin-bottom: var(--a-2); }
.app-nav { grid-area: nav; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); justify-self: center;
  width: min(100%, 34rem); padding: .3rem; border-radius: 1.15rem; background: rgba(7, 36, 27, .55); box-shadow: inset 0 0 0 1px var(--linie-hell); }
.app-nav__marke { position: absolute; left: .3rem; top: .3rem; bottom: .3rem; width: calc((100% - .6rem) / var(--n)); border-radius: .85rem;
  background: rgba(246, 245, 239, .09); box-shadow: inset 0 0 0 1px rgba(246, 245, 239, .07);
  translate: calc(var(--i) * 100%) 0; transition: translate .38s var(--quer); }
.app-nav__marke::after { content: ""; position: absolute; left: 24%; right: 24%; bottom: .28rem; height: 2px; border-radius: 2px; background: var(--minze);
  transform-origin: left; scale: 0 1; opacity: 0; transition: opacity .2s ease; }
.app-schau.ist-auto .app-nav__marke::after { opacity: 1; }
.app-schau.ist-auto .app-nav__marke.zaehlt::after { animation: schau-zeit var(--dauer, 5s) linear both; }
.app-schau.schau--steht .app-nav__marke::after { animation-play-state: paused; }
@keyframes schau-zeit { from { scale: 0 1; } to { scale: 1 1; } }
.app-nav__knopf { position: relative; display: grid; justify-items: center; align-content: center; gap: .3rem; min-height: 3.75rem; padding: .5rem .15rem .75rem;
  border: 0; border-radius: .85rem; background: none; color: var(--hell-3); font: inherit; font-size: .75rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color .2s ease; }
.app-nav__icon { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: color .2s ease, scale .14s var(--aus); }
.app-nav__knopf:active .app-nav__icon { scale: .9; }
.app-nav__knopf[aria-selected="true"] { color: var(--hell); }
.app-nav__knopf[aria-selected="true"] .app-nav__icon { color: var(--minze); }
.app-nav__lang { display: none; }
.app-nav__kurz { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .app-nav__knopf:hover { color: var(--hell-2); } .app-nav__knopf[aria-selected="true"]:hover { color: var(--hell); } }
.app-nav__knopf:focus-visible { outline: 2px solid var(--minze); outline-offset: -2px; }
.app-schau__saetze { grid-area: satz; display: grid; justify-self: center; width: min(100%, 34rem); text-align: center; }
.app-schau__satz { grid-area: 1 / 1; margin: 0; font-size: var(--fs-klein); line-height: 1.55; color: var(--hell-2);
  opacity: 0; translate: 0 .4rem; visibility: hidden; transition: opacity .16s ease, translate 0s linear .16s, visibility 0s linear .16s; }
.app-schau__satz.ist-an { opacity: 1; translate: 0 0; visibility: visible; transition: opacity .36s var(--aus) .1s, translate .36s var(--aus) .1s, visibility 0s; }
@media (min-width: 64rem) {
  .app-schau { grid-template-columns: minmax(17.5rem, 19.5rem) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". buehne" "nav buehne" "satz buehne" ". buehne"; column-gap: clamp(2.5rem, 1rem + 3vw, 4.5rem); row-gap: var(--a-5); }
  .app-schau__buehne { margin: 0; }
  .app-nav { grid-template-columns: none; grid-template-rows: repeat(var(--n), 3.25rem); justify-self: stretch; width: auto; padding: .4rem; border-radius: 1.25rem; }
  .app-nav__marke { left: .4rem; right: .4rem; top: .4rem; bottom: auto; width: auto; height: 3.25rem; border-radius: .9rem; translate: 0 calc(var(--i) * 100%); }
  .app-nav__marke::after { left: 1rem; right: 1rem; bottom: 0; }
  .app-nav__knopf { grid-auto-flow: column; justify-content: start; align-items: center; gap: .85rem; min-height: 0; padding: 0 1rem; font-size: 1.0625rem; letter-spacing: -.005em; }
  .app-nav__icon { width: 1.25rem; height: 1.25rem; }
  .app-nav__lang { display: inline; white-space: nowrap; }
  .app-nav__kurz { display: none; }
  .app-schau__saetze { justify-self: stretch; width: auto; padding-inline: 1rem; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .app-nav__marke { transition: none; }
  .app-schau__satz, .app-schau__satz.ist-an { translate: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .schritt__geld i::after { transform-origin: left; animation: geld-fuellen linear both; animation-timeline: view(); animation-range: entry 30% cover 30%; }
    .schritt:nth-child(2) .schritt__geld i::after { animation-range: entry 60% cover 36%; }
    .schritt:nth-child(3) .schritt__geld i::after { animation-range: entry 90% cover 42%; }
    .schritt:nth-child(4) .schritt__geld i::after { animation-range: cover 22% cover 52%; }
  }
}
@keyframes geld-fuellen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.flaeche-weiss .vierer li, .vierer--hell li { border-top-color: var(--linie-stark); }
.flaeche-weiss .vierer p, .vierer--hell p { color: var(--tinte-2); }

.funktionen__raster { display: grid; gap: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }
.funktionen__kopf { display: grid; gap: var(--a-4); align-content: start; justify-items: start; }
.funktionen__kopf h2 { max-width: 22ch; text-wrap: balance; }
.funktionen__kopf p { color: var(--tinte-2); font-size: var(--fs-lead); max-width: 40em; }
.funktion { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a-2) var(--a-5); align-content: start; padding-block: var(--a-5); border-top: 1px solid var(--linie-stark); }
.funktion:last-child { border-bottom: 1px solid var(--linie-stark); }
.funktion dt { font-family: var(--schrift-titel); font-size: var(--fs-3); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.funktion dd { margin: 0; grid-column: 1; color: var(--tinte-2); max-width: 38em; }
.funktion__paket { grid-column: 2 !important; grid-row: 1; align-self: start; padding: .2rem .7rem; border-radius: 999px; background: var(--gruen-50); color: var(--gruen-800) !important; font-size: var(--fs-mini); font-weight: 650; white-space: nowrap; }
@media (min-width: 60rem) {
  .funktionen__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-8); }
  .funktion:last-child { border-bottom: 0; }
}

.start-preise .kopfzeile { margin-bottom: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); }
.pillen { position: relative; margin-bottom: clamp(1.25rem, .9rem + 1.2vw, 2rem); }
.pillen__sicht {
  --blende-l: 0px; --blende-r: 2.5rem; --weich: 2.5rem;
  display: flex; gap: .5rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--rand); scrollbar-width: none;
  margin-inline: calc(-1 * var(--rand)); padding: .4rem var(--rand);
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--blende-l) - var(--weich)), #000 var(--blende-l), #000 calc(100% - var(--blende-r)), transparent calc(100% - var(--blende-r) + var(--weich)));
  mask-image: linear-gradient(90deg, transparent calc(var(--blende-l) - var(--weich)), #000 var(--blende-l), #000 calc(100% - var(--blende-r)), transparent calc(100% - var(--blende-r) + var(--weich)));
}
.pillen__sicht::-webkit-scrollbar { display: none; }
.pillen:not([data-pillen-am-anfang]) .pillen__sicht { --blende-l: 2.5rem; }
.pillen[data-pillen-am-ende] .pillen__sicht { --blende-r: 0px; }
.pille {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .3rem 1.05rem .3rem .3rem;
  border-radius: 999px; background: var(--weiss); box-shadow: 0 0 0 1px var(--linie);
  color: var(--tinte); font-size: var(--fs-klein); font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color .2s var(--aus), color .2s var(--aus), box-shadow .2s var(--aus), transform .16s var(--aus);
}
.pille:active { transform: scale(.97); }
.pille:focus-visible { border-radius: 999px; }
.pille__zeichen {
  flex: none; box-sizing: content-box; width: 1.1rem; height: 1.1rem; padding: .45rem; border-radius: 50%;
  background: var(--gruen-50); color: var(--gruen-700); stroke-width: 1.6;
  transition: background-color .2s var(--aus), color .2s var(--aus);
}
.pille[aria-selected="true"] { background: var(--gruen-900); color: var(--hell); box-shadow: 0 0 0 1px var(--gruen-900), 0 8px 18px -10px rgba(7, 36, 27, .5); }
.pille[aria-selected="true"] .pille__zeichen { background: rgba(143, 232, 194, .16); color: var(--minze); }
.pillen__pfeil { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pille:not([aria-selected="true"]):hover { box-shadow: 0 0 0 1px var(--gruen-600); color: var(--gruen-800); }
  .pillen__sicht { --weich: 2rem; --blende-r: calc(var(--rand) + 4.75rem); }
  .pillen:not([data-pillen-am-anfang]) .pillen__sicht { --blende-l: calc(var(--rand) + 4.75rem); }
  .pillen__pfeil {
    position: absolute; top: 50%; z-index: 1; display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem; padding: 0; margin-top: -1.25rem;
    border: 0; border-radius: 50%; background: var(--weiss); color: var(--tinte); cursor: pointer;
    box-shadow: 0 0 0 1px var(--linie), var(--schatten-1);
    transition: opacity .2s var(--aus), box-shadow .2s var(--aus), transform .16s var(--aus);
  }
  .pillen__pfeil .i { width: 1.1rem; height: 1.1rem; }
  .pillen__pfeil--zurueck { left: 0; }
  .pillen__pfeil--vor { right: 0; }
  .pillen__pfeil:hover { box-shadow: 0 0 0 1px var(--gruen-600), var(--schatten-1); }
  .pillen__pfeil:active { transform: scale(.94); }
  .pillen[data-pillen-am-anfang] .pillen__pfeil--zurueck, .pillen[data-pillen-am-ende] .pillen__pfeil--vor { opacity: 0; pointer-events: none; }
}
.start-preise__fuss { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--a-3) var(--a-6); margin-top: var(--a-5); }
.start-preise__fuss .kleingedruckt { max-width: 44em; }

.schritte { display: grid; gap: var(--a-6); counter-reset: schritt; }
.schritt { position: relative; display: grid; gap: var(--a-3); align-content: start; padding-top: var(--a-6); }
.schritt__nr {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--gruen-900); color: var(--hell); font-family: var(--schrift-titel); font-weight: 700; font-size: 1.15rem;
}
.schritt__titel { font-size: var(--fs-3); letter-spacing: -.02em; color: var(--gruen-950); }
.schritt p { color: var(--tinte-2); }
.schritt__marke { font-weight: 650; color: var(--gruen-800) !important; font-size: var(--fs-klein); }
.schritt__geld { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: .6rem; }
.schritt__geld i { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(16, 25, 21, .1); overflow: hidden; }
.schritt__geld i::after { content: ""; position: absolute; inset: 0; width: calc(var(--bezahlt) * 100%); background: var(--gold); border-radius: inherit; }
.schritt__geld em { font-style: normal; font-size: var(--fs-mini); color: var(--tinte-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 48rem) { .schritte { grid-template-columns: 1fr 1fr; column-gap: var(--a-6); } }
@media (min-width: 72rem) { .schritte { grid-template-columns: repeat(4, 1fr); } }
.ablauf-kurz__mehr { margin-top: var(--a-7); }

.vergleich-kurz__raster { display: grid; gap: var(--a-7); align-items: start; }
.vergleich-kurz__raster > div { display: grid; gap: var(--a-5); }
.vergleich-kurz__raster > div { justify-items: start; }
.vergleich-kurz__raster h2 { max-width: 22ch; text-wrap: balance; }
.gegenueber { width: 100%; font-size: var(--fs-klein); line-height: 1.5; }
.gegenueber th, .gegenueber td { text-align: left; vertical-align: top; padding: var(--a-4) var(--a-4) var(--a-4) 0; border-bottom: 1px solid var(--linie-stark); }
.gegenueber thead th { font-family: var(--schrift-titel); font-size: 1.1rem; font-weight: 650; padding-top: 0; color: var(--tinte-2); }
.gegenueber thead th:last-child { color: var(--gruen-700); }
.gegenueber tbody th { font-weight: 650; width: 22%; color: var(--tinte); }
.gegenueber td { color: var(--tinte-3); }
.gegenueber td:last-child { color: var(--tinte); font-weight: 550; }
.gegenueber td:last-child, .gegenueber thead th:last-child { padding-left: var(--a-4); background: var(--gruen-50); }
.gegenueber tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; }
.gegenueber thead th:last-child { border-top-left-radius: 12px; border-top-right-radius: 12px; padding-top: var(--a-4); }
.vergleich-kurz .kleingedruckt { margin-top: var(--a-6); }
@media (max-width: 40rem) {
  .gegenueber thead { display: none; }
  .gegenueber tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--a-3); padding-block: var(--a-4); border-bottom: 1px solid var(--linie-stark); }
  .gegenueber th, .gegenueber td { border: 0; padding: 0; }
  .gegenueber tbody th { grid-column: 1 / -1; width: auto; margin-bottom: var(--a-2); font-family: var(--schrift-titel); font-size: 1.1rem; }
  .gegenueber td::before { content: attr(data-kopf); display: block; font-size: var(--fs-mini); font-weight: 650; color: var(--tinte-3); margin-bottom: .2rem; }
  .gegenueber td:last-child { padding: var(--a-2) var(--a-3); border-radius: 10px !important; }
  .gegenueber td:first-of-type { padding-top: var(--a-2); }
}

.schluss { background: var(--gruen-800); color: var(--hell); padding-block: clamp(4rem, 2.5rem + 6vw, 8rem); position: relative; overflow: hidden; }
.schluss__raster { display: grid; gap: var(--a-5); position: relative; justify-items: center; text-align: center; }
.schluss__titel { font-size: var(--fs-1); font-stretch: 90%; letter-spacing: -.035em; line-height: 1; max-width: 16ch; text-wrap: balance; }
.schluss__text { display: grid; gap: var(--a-6); justify-items: center; }
.schluss__text > p:first-child { color: var(--hell-2); font-size: var(--fs-lead); max-width: 32em; text-wrap: balance; }
.schluss__text .knoepfe { justify-content: center; }
.schluss__notiz { color: var(--hell-3); font-size: var(--fs-klein); }
.schluss__notiz a { color: var(--hell); }
.schluss__text a:not(.knopf) { color: var(--hell); }
@media (max-width: 40rem) { .schluss .knopf { flex: 1 1 100%; } }

.fuss { background: var(--gruen-950); color: var(--hell-2); padding-block: var(--a-8) calc(var(--a-6) + env(safe-area-inset-bottom)); font-size: var(--fs-klein); }
.fuss a:not(.knopf) { color: var(--hell-2); text-decoration: none; }
.fuss__oben { display: grid; gap: var(--a-4); padding-bottom: var(--a-7); border-bottom: 1px solid var(--linie-hell); }
.fuss__marke { display: grid; gap: var(--a-3); justify-items: start; }
.fuss__satz { font-size: var(--fs-klein); line-height: 1.5; color: var(--hell-3); max-width: 30em; }
.fuss__mail { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; justify-self: start; color: var(--hell) !important; font-weight: 550; text-decoration: underline !important; text-decoration-color: var(--linie-hell) !important; text-underline-offset: .2em; }
.fuss__mail .i { color: var(--minze); }
.fuss__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-6) var(--a-5); padding-block: var(--a-7); }
.fuss__nav h2 { font-family: var(--schrift-text); font-size: var(--fs-mini); font-weight: 650; letter-spacing: .02em; color: var(--hell-3); margin-bottom: var(--a-3); }
.fuss__nav h2 a { color: inherit; }
.fuss__nav li a { display: inline-flex; align-items: center; min-height: 2.25rem; padding-block: .3rem; line-height: 1.35; }
.fuss__nav a[aria-current="page"] { color: var(--minze); }
@media (hover: hover) and (pointer: fine) { .fuss__nav a:hover, .fuss__mail:hover { color: var(--hell); text-decoration: underline; } }
.fuss__unten { display: grid; gap: var(--a-3); padding-top: var(--a-5); border-top: 1px solid var(--linie-hell); color: var(--hell-3); font-size: var(--fs-mini); }
.marke--fuss { color: var(--hell); justify-self: start; }
.marke--fuss .marke__zeichen { color: var(--hell); width: 1.8rem; }
.marke--fuss .marke__name { font-size: 1.2rem; }
.fuss__branchen { grid-column: 1 / -1; order: 4; }
.fuss__branchen ul { columns: 2; column-gap: var(--a-5); }
.fuss__branchen li { break-inside: avoid; }
@media (min-width: 48rem) {
  .fuss__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--a-7); }
  .fuss__branchen ul { columns: 3; }
}
@media (min-width: 64rem) {
  .fuss__nav { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 1rem + 2.5vw, 4rem); }
  .fuss__branchen { grid-column: auto; order: 0; }
  .fuss__branchen ul { columns: 2; }
}
@media (min-width: 60rem) {
  .fuss__oben { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--a-7); align-items: end; }
  .fuss__unten { grid-template-columns: auto 1fr; column-gap: var(--a-6); align-items: baseline; }
}

.krumen { padding-top: var(--a-5); font-size: var(--fs-mini); color: var(--tinte-3); }
.krumen ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.krumen li { display: inline-flex; align-items: center; gap: .5rem; }
.krumen li + li::before { content: ""; width: .35rem; height: .35rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.krumen a { color: var(--tinte-2); text-decoration: none; display: inline-flex; min-height: 1.75rem; align-items: center; }
.krumen [aria-current] { color: var(--tinte); font-weight: 550; }
@media (hover: hover) and (pointer: fine) { .krumen a:hover { text-decoration: underline; } }

.seitenkopf { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.seitenkopf__raster { display: grid; gap: var(--a-5); }
.seitenkopf__titel { font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5.25rem); font-stretch: 86%; font-weight: 750; letter-spacing: -.035em; line-height: .98; color: var(--gruen-950); max-width: 16ch; }
.seitenkopf__titel em { font-style: normal; color: var(--gruen-700); }
.seitenkopf__lead { font-size: var(--fs-lead); color: var(--tinte-2); max-width: 36em; line-height: 1.55; }
.seitenkopf--breit .seitenkopf__titel { max-width: 20ch; }
.seitenkopf__lead { max-width: 40em; }
@media (max-width: 40rem) { .seitenkopf__titel { font-stretch: 80%; } }

.sprungleiste { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--a-6); }
.sprungleiste a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: .4rem .95rem; border-radius: 999px;
  border: 1px solid var(--linie-stark); color: var(--tinte-2); text-decoration: none; font-size: var(--fs-klein); font-weight: 550;
  transition: background-color .15s var(--aus), border-color .15s var(--aus), color .15s var(--aus);
}
@media (hover: hover) and (pointer: fine) { .sprungleiste a:hover { background: var(--weiss); border-color: var(--tinte); color: var(--tinte); } }

.browser {
  display: block; overflow: hidden; border-radius: var(--r); background: var(--weiss);
  box-shadow: var(--schatten-2); outline: 1px solid var(--linie); outline-offset: -1px;
}
.browser__leiste { display: flex; align-items: center; gap: .35rem; padding: .55rem .8rem; background: #EDEEE8; border-bottom: 1px solid var(--linie); }
.browser__leiste i { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(16, 25, 21, .18); }
.browser__leiste span { flex: 1; margin-left: .6rem; padding: .2rem .7rem; border-radius: 999px; background: var(--weiss); color: var(--tinte-3); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser img { width: 100%; aspect-ratio: auto; }

.demo-reihe { padding-block: clamp(3rem, 2rem + 4vw, 6rem); border-top: 1px solid var(--linie); }
.demo-reihe:first-of-type { border-top: 0; }
.demo-reihe__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-6); align-items: center; }
.demo-reihe__bilder { position: relative; }
.demo-reihe__text { display: grid; gap: var(--a-4); align-content: start; }
.demo-reihe__art { color: var(--tinte-3); font-size: var(--fs-klein); font-weight: 550; order: -1; }
.demo-reihe__name { font-size: var(--fs-2); font-stretch: 92%; letter-spacing: -.03em; color: var(--gruen-950); }
.demo-reihe__satz { color: var(--tinte-2); }
.demo-reihe__punkte { display: grid; gap: .45rem; font-size: var(--fs-klein); color: var(--tinte-2); }
.demo-reihe__punkte li { position: relative; padding-left: 1.2rem; }
.demo-reihe__punkte li::before { content: ""; position: absolute; left: 0; top: .72em; width: .55rem; height: 2px; background: var(--gold); border-radius: 2px; }
.demo-reihe__paket { font-size: var(--fs-klein); color: var(--tinte-2); }
.demo-reihe__paket b { color: var(--gruen-800); }
.demo-reihe__links { display: flex; flex-wrap: wrap; gap: var(--a-3) var(--a-5); align-items: center; margin-top: var(--a-2); }
.demo-reihe__knoepfe { display: flex; flex-wrap: nowrap; gap: var(--a-3); flex: 0 0 100%; }
@media (max-width: 30rem) {
  .demo-reihe__knoepfe .knopf { flex: 1 1 0; min-width: 0; padding-inline: .75rem; gap: .45em; font-size: .9375rem; white-space: nowrap; }
}
@media (max-width: 22.5rem) { .demo-reihe__knoepfe .knopf .i { display: none; } }
@media (min-width: 60rem) {
  .demo-reihe__raster { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: var(--a-8); }
  .demo-reihe:nth-of-type(even) .demo-reihe__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .demo-reihe:nth-of-type(even) .demo-reihe__bilder { order: 2; }
}
@media (max-width: 59.99rem) { .demo-reihe__bilder { margin-bottom: var(--a-2); } }
.demo-reihe__bilder a { display: block; text-decoration: none; }

.leistung { padding-block: var(--luft); }
.leistung__raster { display: grid; gap: var(--a-7); align-items: center; }
.leistung__text { display: grid; gap: var(--a-5); align-content: start; }
.leistung__text > p { color: var(--tinte-2); max-width: 36em; }
.flaeche-wald .leistung__text > p { color: var(--hell-2); }
@media (min-width: 60rem) {
  .leistung__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--a-9); }
  .leistung__raster--links > :first-child { order: 2; }
}
.leistung__paket { display: inline-flex; width: fit-content; padding: .2rem .7rem; border-radius: 999px; background: var(--gruen-50); color: var(--gruen-800); font-size: var(--fs-mini); font-weight: 650; }
.collage { position: relative; }

.buchung__karte {
  max-width: 26rem; margin-inline: auto; padding: var(--a-5); border-radius: var(--r); background: var(--weiss);
  box-shadow: var(--schatten-2); display: grid; gap: var(--a-4);
}
.buchung__monat { font-family: var(--schrift-titel); font-weight: 650; font-size: 1.2rem; }
.buchung__tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.buchung__tage span { display: grid; gap: .1rem; padding: .45rem 0; border-radius: 10px; }
.buchung__tage small { font-size: .7rem; font-weight: 550; color: var(--tinte-3); }
.buchung__tage .ist-gewaehlt { background: var(--gruen-700); color: #fff; }
.buchung__tage .ist-gewaehlt small { color: rgba(255, 255, 255, .8); }
.buchung__tage .ist-zu { color: var(--tinte-3); text-decoration: line-through; text-decoration-color: rgba(16, 25, 21, .3); }
.buchung__zeiten { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; font-variant-numeric: tabular-nums; }
.buchung__zeiten span { padding: .55rem 0; text-align: center; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--linie-stark); font-weight: 550; }
.buchung__zeiten .ist-gewaehlt { box-shadow: inset 0 0 0 2px var(--gruen-700); background: var(--gruen-50); color: var(--gruen-800); font-weight: 700; }
.buchung__ok { display: flex; align-items: center; gap: .5rem; padding: .7rem .85rem; border-radius: 10px; background: var(--gruen-900); color: var(--hell); font-size: var(--fs-klein); font-weight: 550; }
.buchung__ok .i { color: var(--minze); width: 1.1rem; height: 1.1rem; }

.suche__fenster { max-width: 30rem; margin-inline: auto; padding: var(--a-5); border-radius: var(--r); background: var(--weiss); box-shadow: var(--schatten-2); }
.suche__feld { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie-stark); color: var(--tinte-2); }
.suche__feld .i { width: 1.1rem; height: 1.1rem; color: var(--tinte-3); }
.suche__liste { counter-reset: treffer; margin-top: var(--a-4); display: grid; }
.suche__liste li { counter-increment: treffer; display: grid; grid-template-columns: 2rem 1fr; padding: .8rem .4rem; border-bottom: 1px solid var(--linie); }
.suche__liste li::before { content: counter(treffer) "."; grid-row: 1 / 3; color: var(--tinte-3); font-variant-numeric: tabular-nums; }
.suche__liste b { font-weight: 650; }
.suche__liste span { color: var(--tinte-3); font-size: var(--fs-mini); }
.suche__liste .ist-ihrer { background: var(--gruen-50); border-radius: 10px; border-bottom-color: transparent; }
.suche__liste .ist-ihrer b { color: var(--gruen-700); }

.zwei-wege { display: grid; gap: var(--a-4); margin-top: var(--a-4); }
.zwei-wege > div { padding: var(--a-5); border-radius: var(--r); background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); display: grid; gap: var(--a-2); }
.zwei-wege h3 { font-size: 1.2rem; }
.zwei-wege p { color: var(--tinte-2); font-size: var(--fs-klein); }
@media (min-width: 48rem) { .zwei-wege { grid-template-columns: 1fr 1fr; } }

.liste-dicht { display: grid; gap: 0; border-top: 1px solid var(--linie-stark); }
.liste-dicht li { display: flex; gap: var(--a-3); align-items: baseline; padding-block: .8rem; border-bottom: 1px solid var(--linie-stark); }
.liste-dicht .i { width: 1.1rem; height: 1.1rem; color: var(--gruen-700); transform: translateY(.2rem); }
.flaeche-wald .liste-dicht, .flaeche-wald .liste-dicht li { border-color: var(--linie-hell); }
.flaeche-wald .liste-dicht .i { color: var(--minze); }

.pakete { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-4); }
.paket {
  display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--a-3); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-radius: var(--r); background: var(--weiss); box-shadow: 0 0 0 1px var(--linie);
}
.paket--betont { background: var(--gruen-900); color: var(--hell); box-shadow: var(--schatten-2); }
.paket__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-3); }
.paket__name { font-size: var(--fs-2); font-stretch: 92%; letter-spacing: -.03em; }
.paket__marke { padding: .2rem .7rem; border-radius: 999px; background: var(--gold); color: var(--gruen-950); font-size: var(--fs-mini); font-weight: 650; white-space: nowrap; }
.paket__motto { color: var(--tinte-3); margin-top: -.4rem; }
.paket__preis { display: grid; gap: .15rem; padding-block: var(--a-4); border-block: 1px solid var(--linie); }
.paket__preis b { font-family: var(--schrift-titel); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.paket__preis span { color: var(--tinte-3); font-size: var(--fs-klein); }
.paket__preis strong { font-size: 1.05rem; }
.paket__punkte { display: grid; gap: .6rem; align-content: start; font-size: var(--fs-klein); padding-block: var(--a-3); }
.paket__punkte li { position: relative; padding-left: 1.75rem; color: var(--tinte-2); }
.paket__punkte li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--gruen-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312654B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.paket__punkte li:first-child:not(:only-child) { font-weight: 650; color: var(--tinte); }
.paket__fuss { display: grid; gap: var(--a-3); }
.paket__fuer { font-size: var(--fs-mini); color: var(--tinte-3); }
.paket .knopf { width: 100%; }
.paket--betont .paket__motto, .paket--betont .paket__preis span, .paket--betont .paket__fuer { color: var(--hell-3); }
.paket--betont .paket__punkte li { color: var(--hell-2); }
.paket--betont .paket__punkte li:first-child { color: var(--hell); }
.paket--betont .paket__preis { border-color: var(--linie-hell); }
.paket--betont .paket__punkte li::before { background-color: rgba(143, 232, 194, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FE8C2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
@media (min-width: 64rem) { .pakete { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
@media (max-width: 63.999rem) {
  .pakete {
    display: flex; gap: var(--a-3); align-items: stretch;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rand); scrollbar-width: none;
    margin: -1rem calc(-1 * var(--rand)) -1.5rem; padding: 1rem var(--rand) 1.5rem;
  }
  .pakete::-webkit-scrollbar { display: none; }
  .pakete > .paket { flex: 0 0 min(calc(100% - 2.75rem), 24rem); scroll-snap-align: start; scroll-snap-stop: always; }
}
@media (max-width: 47.999rem) {
  .pakete { display: grid; gap: var(--a-4); overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; }
  .paket { gap: var(--a-3); padding: 1.375rem 1.25rem 1.25rem; }
  .paket__motto { margin-top: -.5rem; font-size: var(--fs-klein); }
  .paket__preis { gap: .1rem; padding-block: var(--a-4); }
  .paket__preis b { font-size: 2.6rem; }
  .paket__preis span { line-height: 1.45; }
  .paket__preis strong { margin-top: .5rem; }
  .paket__punkte { gap: .55rem; padding-block: var(--a-1) var(--a-2); }
  .paket__punkte li { line-height: 1.45; padding-left: 1.6rem; }
  .paket__punkte li::before { top: .12em; width: 1.05rem; height: 1.05rem; }
  .paket__fuss { gap: var(--a-3); }
  .paket__fuer { line-height: 1.5; }
}
.pakete-punkte { display: flex; justify-content: center; gap: .25rem; margin-top: var(--a-3); }
.pakete-punkte button {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pakete-punkte button::before {
  content: ''; width: .6rem; height: .6rem; border-radius: 999px; background: var(--linie);
  box-shadow: inset 0 0 0 1px rgba(7, 36, 27, .18); transition: width .25s var(--aus), background-color .25s var(--aus);
}
.pakete-punkte button[aria-current="true"]::before { width: 1.6rem; background: var(--gruen-900); box-shadow: none; }
.pakete-punkte button:focus-visible { outline: 2px solid var(--gruen-900); outline-offset: -.4rem; border-radius: 999px; }
@media (min-width: 64rem), (max-width: 47.999rem) { .pakete-punkte { display: none; } }
@media (prefers-reduced-motion: reduce) { .pakete-punkte button::before { transition: none; } }

.hinweisband { display: grid; gap: var(--a-3); margin-top: var(--a-6); padding: var(--a-5) var(--a-6); border-radius: var(--r); background: var(--gruen-50); }
.hinweisband p { color: var(--tinte-2); max-width: 60em; }
.hinweisband strong { color: var(--tinte); }
@media (min-width: 60rem) { .hinweisband { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--a-6); } }

.dreispaltig { display: grid; gap: 0 var(--a-6); }
.dreispaltig > div { padding-block: var(--a-5); border-top: 1px solid var(--linie-stark); display: grid; gap: var(--a-2); align-content: start; }
.dreispaltig h3 { font-size: 1.2rem; font-weight: 650; letter-spacing: -.01em; }
.dreispaltig p { color: var(--tinte-2); font-size: var(--fs-klein); }
@media (min-width: 40rem) { .dreispaltig { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .dreispaltig { grid-template-columns: repeat(3, 1fr); } }

.tabelle-huelle { position: relative; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--r); background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); }
.leistungstabelle { width: 100%; min-width: 44rem; font-size: var(--fs-klein); }
.leistungstabelle th, .leistungstabelle td { padding: .8rem 1rem; text-align: center; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.leistungstabelle thead th { position: sticky; top: 0; background: var(--weiss); font-family: var(--schrift-titel); font-weight: 650; font-size: 1.1rem; vertical-align: bottom; }
.leistungstabelle thead th span { display: block; font-family: var(--schrift-text); font-weight: 500; font-size: var(--fs-mini); color: var(--tinte-3); }
.leistungstabelle tbody th { text-align: left; font-weight: 500; color: var(--tinte-2); position: sticky; left: 0; background: var(--weiss); min-width: 15rem; }
.leistungstabelle .gruppe th { background: var(--papier); color: var(--tinte); font-family: var(--schrift-titel); font-weight: 650; font-size: 1rem; }
.leistungstabelle td:nth-child(3), .leistungstabelle thead th:nth-child(3) { background: var(--gruen-50); }
.leistungstabelle .ja { display: inline-block; width: 1.25rem; height: 1.25rem; color: var(--gruen-700); vertical-align: middle; }
.leistungstabelle .nein { display: inline-block; width: 1rem; height: 1rem; color: var(--tinte-3); opacity: .5; vertical-align: middle; }
.leistungstabelle td { color: var(--tinte-2); }

.preisliste { display: grid; gap: var(--a-7); }
.preisliste h3 { font-size: var(--fs-3); margin-bottom: var(--a-2); }
.preisliste__unter { color: var(--tinte-3); font-size: var(--fs-klein); margin-bottom: var(--a-4); }
.preisliste dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem var(--a-4); padding-block: var(--a-4); border-top: 1px solid var(--linie-stark); }
.preisliste dt { font-weight: 650; }
.preisliste dd { margin: 0; grid-column: 1; color: var(--tinte-2); font-size: var(--fs-klein); }
.preisliste dd.preisliste__preis { grid-column: 2; grid-row: 1 / 3; align-self: start; font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 650; color: var(--tinte); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
@media (min-width: 60rem) { .preisliste { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--a-8); } }

.druckstueck__muster { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r); background: var(--flaeche); overflow: hidden; }
.muster-aufsteller { width: 44%; aspect-ratio: 3 / 4; padding: 8%; border-radius: 8px 8px 3px 3px; background: var(--weiss); box-shadow: var(--schatten-2); display: grid; gap: 8%; justify-items: center; align-content: center; text-align: center; }
.muster-aufsteller svg { width: 70%; height: auto; color: var(--gruen-950); }
.muster-aufsteller span { font-family: var(--schrift-titel); font-weight: 650; font-size: .85rem; }

.fragen { border-top: 1px solid var(--linie-stark); }
.frage { border-bottom: 1px solid var(--linie-stark); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a-4); min-height: 3.5rem;
  padding-block: var(--a-4); cursor: pointer; list-style: none;
  font-family: var(--schrift-titel); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 650; letter-spacing: -.015em; line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ""; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--papier)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B3B2C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 1.1rem no-repeat;
  transition: transform .25s var(--aus), background-color .2s;
}
.flaeche-weiss .frage summary::after { background-color: var(--papier); }
.abschnitt:not(.flaeche-weiss) .frage summary::after { background-color: var(--weiss); }
.frage[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .frage summary:hover { color: var(--gruen-700); } }
.frage__antwort { padding: 0 3rem var(--a-5) 0; color: var(--tinte-2); max-width: 70ch; }
.frage__antwort > * + * { margin-top: .75em; }
.frage__antwort ol { list-style: decimal; padding-left: 1.25em; display: grid; gap: .5em; }
.frage__antwort a { color: var(--gruen-700); font-weight: 550; }
.fragen-raster { display: grid; gap: var(--a-6); }
.fragen-raster { gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.fragen-raster > :first-child { display: grid; gap: var(--a-4); align-content: start; justify-items: start; }
.fragen-raster > :first-child h2 { max-width: 22ch; text-wrap: balance; }
.fragen-raster > :first-child p { color: var(--tinte-2); max-width: 40em; }
.fragen-raster > :last-child { max-width: 58rem; }
.themen { display: grid; gap: var(--luft-dicht); }
.thema { display: grid; gap: var(--a-5); }
.thema__titel { font-size: var(--fs-2); color: var(--gruen-950); }
@media (min-width: 60rem) { .thema { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); column-gap: var(--a-8); align-items: start; } .thema__titel { position: sticky; top: calc(var(--kopf-h) + 2rem); } }

.alltag { display: grid; gap: var(--a-6); }
.alltag__punkte { display: grid; gap: var(--a-6); counter-reset: alltag; }
.alltag__punkt { display: grid; gap: var(--a-3); align-content: start; padding-top: var(--a-5); border-top: 2px solid var(--gruen-950); }
.alltag__punkt h3 { font-size: var(--fs-3); color: var(--gruen-950); }
.alltag__punkt p { color: var(--tinte-2); }
@media (min-width: 60rem) { .alltag__punkte { grid-template-columns: repeat(3, 1fr); column-gap: var(--a-6); } }
.funktionsliste { display: grid; gap: 0; border-top: 1px solid var(--linie-hell); }
.funktionsliste > div { display: grid; gap: var(--a-2) var(--a-6); padding-block: var(--a-5); border-bottom: 1px solid var(--linie-hell); }
.funktionsliste h3 { font-size: var(--fs-3); color: var(--hell); }
.funktionsliste p { color: var(--hell-2); max-width: 40em; }
.funktionsliste .paket-marke { justify-self: start; padding: .2rem .7rem; border-radius: 999px; background: rgba(143, 232, 194, .14); color: var(--minze); font-size: var(--fs-mini); font-weight: 650; }
@media (min-width: 60rem) {
  .funktionsliste > div { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) 12rem; align-items: baseline; }
  .funktionsliste .paket-marke { justify-self: end; text-align: right; }
}


.zeitplan { display: grid; gap: var(--a-4); }
.zeitplan__zeile { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--a-4); align-items: center; }
.zeitplan__name { font-family: var(--schrift-titel); font-weight: 650; font-size: 1.15rem; }
.zeitplan__balken { position: relative; height: 3rem; border-radius: 10px; background: rgba(16, 25, 21, .06); }
.zeitplan__balken i { position: absolute; inset: 0 auto 0 0; width: calc(var(--t) / 21 * 100%); border-radius: 10px; background: var(--gruen-700); display: flex; align-items: center; justify-content: flex-end; padding-right: .9rem; color: #fff; font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 40rem) { .zeitplan__etwa { display: none; } .zeitplan__balken i { padding-right: .6rem; } }
.zeitplan__skala { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--a-4); font-size: var(--fs-mini); color: var(--tinte-3); }
.zeitplan__skala span { display: flex; justify-content: space-between; }
@media (max-width: 30rem) { .zeitplan__zeile, .zeitplan__skala { grid-template-columns: 5rem minmax(0, 1fr); } }
.ablauf-schritte { display: grid; gap: 0; }
.ablauf-schritt { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--a-5); padding-block: var(--a-6); border-top: 1px solid var(--linie-stark); }
.ablauf-schritt__nr { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--gruen-900); color: var(--hell); font-family: var(--schrift-titel); font-weight: 700; font-size: 1.3rem; }
.ablauf-schritt__text { display: grid; gap: var(--a-3); }
.ablauf-schritt h2, .ablauf-schritt h3 { font-size: var(--fs-2); color: var(--gruen-950); }
.ablauf-schritt p { color: var(--tinte-2); max-width: 40em; }
.ablauf-schritt__geld { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; padding: .3rem .8rem; border-radius: 999px; background: var(--gold-hell); color: #6B4C12; font-size: var(--fs-klein); font-weight: 650; }
@media (min-width: 60rem) { .ablauf-schritt { grid-template-columns: 5rem minmax(0, 1fr); align-items: start; } .ablauf-schritt__nr { width: 4rem; height: 4rem; font-size: 1.6rem; } .ablauf-schritt__text { padding-top: .35rem; } }

.kontakt__raster { display: grid; gap: var(--a-7); align-items: start; }
@media (min-width: 64rem) { .kontakt__raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); column-gap: var(--a-8); } }
.formular { display: grid; gap: var(--a-5); padding: clamp(1.25rem, .8rem + 2vw, 2.5rem); border-radius: var(--r); background: var(--weiss); box-shadow: 0 0 0 1px var(--linie), var(--schatten-1); }
.formular__raster { display: grid; gap: var(--a-5); }
@media (min-width: 40rem) { .formular__raster { grid-template-columns: 1fr 1fr; } }
.feld { display: grid; gap: .4rem; }
.feld label { font-weight: 600; font-size: var(--fs-klein); display: flex; gap: .4rem; align-items: baseline; }
.feld__zusatz { font-weight: 500; color: var(--tinte-3); font-size: var(--fs-mini); }
.feld input, .feld textarea {
  width: 100%; min-height: 3.25rem; padding: .8rem 1rem; border: 1px solid var(--linie-stark); border-radius: var(--r-klein);
  background: var(--papier); color: var(--tinte); font: inherit; font-size: 1.0625rem; line-height: 1.4;
  transition: border-color .15s var(--aus), box-shadow .15s var(--aus), background-color .15s;
  -webkit-appearance: none; appearance: none;
}
.feld textarea { min-height: 9rem; resize: vertical; }
.feld input::placeholder, .feld textarea::placeholder { color: #6B766F; }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--gruen-600); background: var(--weiss); box-shadow: 0 0 0 3px rgba(23, 122, 91, .2); }
@media (hover: hover) and (pointer: fine) { .feld input:hover:not(:focus), .feld textarea:hover:not(:focus) { border-color: rgba(16, 25, 21, .4); } }
.feld[data-fehler] input, .feld[data-fehler] textarea { border-color: #B3261E; background: #FDF6F5; }
.feld__fehler { display: none; align-items: center; gap: .35rem; color: #A1231B; font-size: var(--fs-mini); font-weight: 550; }
.feld[data-fehler] .feld__fehler { display: flex; }
.formular__topf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__fuss { display: grid; gap: var(--a-4); }
.formular__recht { font-size: var(--fs-mini); color: var(--tinte-3); }
.formular__recht a { color: var(--gruen-700); }
.formular__meldung { padding: .8rem 1rem; border-radius: var(--r-klein); background: #FDF1EF; color: #8E1F18; font-weight: 550; font-size: var(--fs-klein); }
.formular .knopf { justify-self: start; }
.knopf.laedt { pointer-events: none; }
.knopf.laedt .i { animation: drehen .8s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.danke { display: grid; gap: var(--a-4); justify-items: start; padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: var(--r); background: var(--gruen-900); color: var(--hell); }
.danke h2 { font-size: var(--fs-2); color: var(--hell); }
.danke p { color: var(--hell-2); max-width: 32em; }
.danke__haken { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--minze); color: var(--gruen-950); }
.danke__haken .i { width: 1.75rem; height: 1.75rem; }
.wege { display: grid; gap: 0; border-top: 1px solid var(--linie-stark); }
.weg { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--a-2) var(--a-4); padding-block: var(--a-5); border-bottom: 1px solid var(--linie-stark); }
.weg__ikon { grid-row: 1 / 4; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--gruen-50); color: var(--gruen-700); }
.weg h2, .weg h3 { font-size: 1.25rem; letter-spacing: -.01em; }
.weg p { color: var(--tinte-2); font-size: var(--fs-klein); }
.weg a:not(.textlink) { color: var(--gruen-700); font-weight: 600; }

.artikel-kopf { padding-block: clamp(1.5rem, 1rem + 3vw, 4rem) var(--a-6); }
.artikel-kopf__titel { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.4rem); font-stretch: 88%; letter-spacing: -.035em; line-height: 1.02; color: var(--gruen-950); max-width: 18ch; }
.artikel-kopf__vorspann { margin-top: var(--a-5); font-size: var(--fs-lead); color: var(--tinte-2); max-width: 38em; line-height: 1.55; }
.artikel-kopf__meta { margin-top: var(--a-5); font-size: var(--fs-mini); color: var(--tinte-3); }
.artikel-bild { margin-block: var(--a-4) var(--a-7); }
.artikel-bild img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r); }
@media (max-width: 40rem) { .artikel-bild img { aspect-ratio: 4 / 3; } }
.artikel__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-7); padding-bottom: var(--luft); }
.artikel__rand { display: grid; gap: var(--a-4); align-content: start; }
.artikel__rand-kasten { padding: var(--a-5); border-radius: var(--r); background: var(--gruen-900); color: var(--hell); display: grid; gap: var(--a-3); }
.artikel__rand-kasten p { color: var(--hell-2); font-size: var(--fs-klein); }
.artikel__rand-kasten b { font-family: var(--schrift-titel); font-size: 1.3rem; color: var(--hell); line-height: 1.15; }
.artikel__inhalt { min-width: 0; font-size: 1.1rem; line-height: 1.7; }
.artikel__inhalt h2 { color: var(--gruen-950); }
.inhaltsverz { display: grid; gap: var(--a-2); font-size: var(--fs-klein); }
.inhaltsverz p { font-weight: 650; }
.inhaltsverz a { color: var(--tinte-2); text-decoration: none; display: block; padding-block: .3rem; border-bottom: 1px solid var(--linie); }
@media (hover: hover) and (pointer: fine) { .inhaltsverz a:hover { color: var(--gruen-700); } }
.inhalt-klein { border-block: 1px solid var(--linie); font-size: var(--fs-klein); }
.inhalt-klein summary { display: flex; justify-content: space-between; align-items: center; min-height: 3rem; font-weight: 650; cursor: pointer; list-style: none; }
.inhalt-klein summary::-webkit-details-marker { display: none; }
.inhalt-klein summary::after { content: "+"; font-size: 1.3rem; font-weight: 500; color: var(--gruen-700); }
.inhalt-klein[open] summary::after { content: "\2212"; }
.inhalt-klein nav { display: grid; padding-bottom: var(--a-3); }
.inhalt-klein a { color: var(--tinte-2); text-decoration: none; font-weight: 450; padding-block: .45rem; border-top: 1px solid var(--linie); }
@media (max-width: 63.99rem) { .artikel__rand { display: none; } }
@media (min-width: 64rem) { .inhalt-klein { display: none; } }
@media (min-width: 64rem) {
  .artikel__raster { grid-template-columns: minmax(0, 1fr) 17rem; column-gap: var(--a-9); }
  .artikel__rand { position: sticky; top: calc(var(--kopf-h) + 2rem); align-self: start; }
}
.checkliste { counter-reset: punkt; }

.vergleich-tabelle { width: 100%; min-width: 52rem; font-size: var(--fs-klein); }
.vergleich-tabelle th, .vergleich-tabelle td { text-align: left; vertical-align: top; padding: 1rem; border-bottom: 1px solid var(--linie); }
.vergleich-tabelle thead th { font-family: var(--schrift-titel); font-size: 1.05rem; font-weight: 650; background: var(--weiss); vertical-align: bottom; }
.vergleich-tabelle tbody th { font-weight: 650; position: sticky; left: 0; background: var(--weiss); min-width: 10rem; }
.vergleich-tabelle td { color: var(--tinte-2); }
.vergleich-tabelle .ist-vokuma { background: var(--gruen-50); color: var(--tinte); font-weight: 550; }
.vergleich-tabelle thead .ist-vokuma { color: var(--gruen-700); }

main { view-transition-name: inhalt; }
::view-transition { background: var(--papier); }
::view-transition-group(root), ::view-transition-group(inhalt) { animation: none; }
::view-transition-image-pair(root), ::view-transition-image-pair(inhalt), ::view-transition-image-pair(kopf) { isolation: auto; }
::view-transition-old(root), ::view-transition-old(inhalt) { animation: seite-weg 120ms var(--aus) both; mix-blend-mode: normal; }
::view-transition-new(inhalt) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: seite-wartet 120ms linear both; mix-blend-mode: normal; }
@keyframes seite-weg { to { opacity: 0; } }
@keyframes seite-wartet { from, to { opacity: 0; } }
html.seite-kommt main > *, html.seite-kommt .fuss { animation: seite-kommt-ruhig 420ms var(--aus) 120ms backwards; }
@keyframes seite-kommt { from { opacity: 0; transform: translateY(14px); } }
@keyframes seite-kommt-ruhig { from { opacity: 0; } }
.kopf { view-transition-name: kopf; }
.ladebalken { view-transition-name: ladebalken; }
::view-transition-group(kopf) { z-index: 2; animation: none; }
::view-transition-group(ladebalken) { z-index: 3; animation: none; }
::view-transition-old(kopf) { animation: seite-weg 120ms var(--aus) both; mix-blend-mode: normal; }
html:active-view-transition .mobil { transition: none; }
::view-transition-old(ladebalken) { display: none; }
::view-transition-new(kopf), ::view-transition-new(ladebalken) { animation: none; mix-blend-mode: normal; }
html.wechsel-aus-menue::view-transition-old(root), html.wechsel-aus-menue::view-transition-old(inhalt) { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  html.seite-kommt main > *, html.seite-kommt .fuss { animation-name: seite-kommt-ruhig; animation-duration: 320ms !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html.erstes-laden { --kommt-ab: 40ms; }
  html.seite-kommt { --kommt-ab: 140ms; }
  :is(html.erstes-laden, html.seite-kommt) :is(.krumen, .buehne .aufmacher__titel, .buehne .aufmacher__lead,
    .buehne .aufmacher__handlung .knoepfe, .buehne__band .schaufenster__fuss, .seitenkopf__titel, .seitenkopf__lead,
    .preis-kopf__rechts, .sprungleiste, .artikel-kopf__titel, .artikel-kopf__vorspann, .nicht-da__text > *, .nicht-da__wege) {
    animation: kopf-kommt .9s var(--aus) calc(var(--kommt-ab) + var(--kopf-i, 0) * 70ms) backwards;
  }
  :is(html.erstes-laden, html.seite-kommt) .buehne__band .schaufenster__sicht {
    animation: kopf-kommt-bild 1.1s var(--aus) calc(var(--kommt-ab) + 210ms) backwards;
  }
  :is(html.erstes-laden, html.seite-kommt) .buehne .unterstrich path {
    stroke-dasharray: 1; animation: strich-zieht .8s var(--quer) calc(var(--kommt-ab) + 420ms) backwards;
  }
}
.seitenkopf__titel, .artikel-kopf__titel, .nicht-da__code + .nicht-da__titel, .buehne .aufmacher__lead { --kopf-i: 1; }
.seitenkopf__lead, .preis-kopf__rechts, .artikel-kopf__vorspann, .buehne .aufmacher__handlung .knoepfe, .nicht-da__lead { --kopf-i: 2; }
.sprungleiste, .nicht-da__text .knoepfe { --kopf-i: 3; }
.nicht-da__wege, .buehne__band .schaufenster__fuss { --kopf-i: 4; }
@keyframes kopf-kommt { from { opacity: 0; translate: 0 22px; } }
@keyframes kopf-kommt-bild { from { opacity: 0; translate: 0 56px; } }
@keyframes strich-zieht { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

html.auftritt [data-auftritt=""] { opacity: 0; }
html.auftritt [data-auftritt="kommt"] { animation: auftritt .8s var(--aus) var(--verzug, 0ms) backwards; }
html.auftritt [data-auftritt="kommt"][data-auftritt-art="bild"] { animation-name: auftritt-bild; animation-duration: 1.1s; }
@keyframes auftritt { from { opacity: 0; translate: 0 28px; } }
@keyframes auftritt-bild { from { opacity: 0; translate: 0 48px; scale: .96; } }
@media (prefers-reduced-motion: reduce) { html.auftritt [data-auftritt] { opacity: 1; animation: none; } }
@media print { html.auftritt [data-auftritt] { opacity: 1 !important; animation: none !important; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .app-schau__buehne, .demo-reihe__bilder { animation: wachsen linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @media (min-width: 48rem) {
      .abschnitt.flaeche-wald, .schluss { animation: aufziehen linear both; animation-timeline: view(); animation-range: entry 0% entry 50vh; }
    }
  }
}
@keyframes wachsen { from { opacity: .45; translate: 0 8%; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes aufziehen { from { clip-path: inset(0 clamp(1rem, 3.5vw, 3.5rem) round clamp(1.25rem, 2.5vw, 2.5rem)); } to { clip-path: inset(0 0 round 0); } }

@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .frage { interpolate-size: allow-keywords; }
    .frage::details-content { block-size: 0; overflow: clip; opacity: 0;
      transition: block-size .3s var(--aus), opacity .3s var(--aus), content-visibility .3s allow-discrete; }
    .frage[open]::details-content { block-size: auto; opacity: 1; }
  }
}

html.vd-laedt::before { content: none; display: none; }
.ladebalken {
  position: fixed; z-index: 2147483000; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gruen-700); pointer-events: none;
  transform: scaleX(0); transform-origin: left center; opacity: 0;
}
@media (max-width: 40rem) { .ladebalken { height: 2px; } }
@media (prefers-reduced-motion: reduce) { html .ladebalken { transition-duration: .15s !important; } }

.vk-update {
  position: fixed; z-index: 400; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--a-4); padding: .6rem .6rem .6rem 1.1rem; border-radius: 999px;
  background: var(--gruen-950); color: var(--hell); box-shadow: var(--schatten-dunkel); font-size: var(--fs-klein);
  transform: translate(-50%, 150%); transition: transform .35s var(--aus);
}
.vk-update.an { transform: translate(-50%, 0); }
.vk-update button { border: 0; border-radius: 999px; padding: .5rem 1rem; background: var(--minze); color: var(--gruen-950); font-weight: 650; cursor: pointer; }

.abstand-oben { margin-top: var(--a-6); }
.abstand-unten { margin-bottom: var(--a-6); }
.seitenkopf__recht { margin-top: var(--a-5); }

.collage--buchung { padding-bottom: 0; }
.bestell-bild { position: relative; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--a-5); align-items: end; }
.bestell-bild__qr { aspect-ratio: 3 / 4; }
.bestell-bild__qr .muster-aufsteller { width: 70%; }
@media (max-width: 40rem) { .bestell-bild { grid-template-columns: minmax(0, 1fr); } .bestell-bild__qr { width: 60%; } }
.zwei-wege__titel { color: var(--hell); margin-bottom: var(--a-2); }
.flaeche-wald .zwei-wege > div { background: rgba(246, 245, 239, .07); }
.flaeche-wald .zwei-wege h3 { color: var(--hell); }
.flaeche-wald .zwei-wege p { color: var(--hell-2); }
.liste-dicht--gross li { font-size: var(--fs-lead); padding-block: 1rem; }

.demos__hinweis { padding-block: var(--a-6); }

.haken-liste--brauchen { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--a-5) var(--a-7); }
.haken-liste--brauchen li { color: var(--tinte-2); }
.haken-liste--brauchen strong { color: var(--tinte); }
.brauchen__notiz { margin-top: var(--a-7); padding-top: var(--a-5); border-top: 1px solid var(--linie-stark); font-size: var(--fs-lead); color: var(--tinte-2); max-width: 44em; }
.zahlplan { width: 100%; font-variant-numeric: tabular-nums; }
.zahlplan th, .zahlplan td { padding: .9rem .75rem; text-align: right; border-bottom: 1px solid var(--linie-hell); }
.zahlplan th:first-child { text-align: left; padding-left: 0; }
.zahlplan thead th { font-size: var(--fs-mini); font-weight: 600; color: var(--hell-3); vertical-align: bottom; }
.zahlplan tbody th { font-family: var(--schrift-titel); font-size: 1.2rem; font-weight: 650; color: var(--hell); }
.zahlplan td { color: var(--hell); font-size: 1.1rem; font-weight: 550; }
.zahlplan td:nth-child(3) { color: var(--minze); }
.zahlplan__notiz { margin-top: var(--a-4); color: var(--hell-3); }
.zeitplan__skala em { font-style: normal; }

.kontakt__formular { display: grid; }
.kontakt__wege { display: grid; gap: var(--a-6); align-content: start; }
.kontakt__hilft { display: grid; gap: var(--a-4); }
.kontakt__hilft h3 { font-size: 1.2rem; margin-top: var(--a-3); }
.kontakt__hilft .haken-liste li { color: var(--tinte-2); font-size: var(--fs-klein); }

.alltag__titel { max-width: 18ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }

.wege-raster { display: grid; gap: var(--a-4); }
.weg-block { display: grid; gap: var(--a-4); align-content: start; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--r); background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); }
.weg-block__titel { font-size: var(--fs-2); font-stretch: 92%; color: var(--gruen-950); }
.weg-block__teil { display: grid; gap: var(--a-2); }
.weg-block__teil h4 { font-family: var(--schrift-text); font-size: var(--fs-klein); font-weight: 650; color: var(--gruen-700); letter-spacing: 0; }
.weg-block__teil + .weg-block__teil h4 { color: var(--gold-tief); }
.weg-block__teil p { color: var(--tinte-2); font-size: var(--fs-klein); }
.weg-block--vokuma { background: var(--gruen-900); box-shadow: var(--schatten-2); }
.weg-block--vokuma .weg-block__titel { color: var(--hell); }
.weg-block--vokuma .weg-block__teil h4 { color: var(--minze); }
.weg-block--vokuma .weg-block__teil + .weg-block__teil h4 { color: var(--gold); }
.weg-block--vokuma .weg-block__teil p { color: var(--hell-2); }
@media (min-width: 48rem) { .wege-raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .wege-raster { grid-template-columns: repeat(3, 1fr); } .weg-block--vokuma { grid-row: span 2; } }
.drei-jahre__raster { display: grid; gap: var(--a-6); align-items: start; }
@media (min-width: 64rem) { .drei-jahre__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--a-7); } }
.drei-jahre-tabelle { width: 100%; font-size: var(--fs-klein); font-variant-numeric: tabular-nums; }
.drei-jahre-tabelle th, .drei-jahre-tabelle td { padding: .8rem 1rem; border-bottom: 1px solid var(--linie); text-align: right; }
.drei-jahre-tabelle th:first-child { text-align: left; }
.drei-jahre-tabelle thead th { font-size: var(--fs-mini); color: var(--tinte-3); font-weight: 600; vertical-align: bottom; }
.drei-jahre-tabelle tbody th { font-family: var(--schrift-titel); font-weight: 650; font-size: 1.05rem; }
.drei-jahre-tabelle td:nth-child(4) { font-weight: 700; color: var(--gruen-800); }
.drei-jahre__text { margin-top: var(--a-7); }
.spannen { display: grid; gap: .7rem; padding: var(--a-5); border-radius: var(--r); background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); }
.spannen__titel { font-size: var(--fs-mini); color: var(--tinte-3); margin-bottom: var(--a-2); }
.spanne { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 7.5rem; gap: var(--a-3); align-items: center; font-size: var(--fs-klein); }
.spanne__name { font-weight: 600; line-height: 1.2; }
.spanne__name small { display: block; font-weight: 500; color: var(--tinte-3); font-size: .75rem; }
.spanne__bahn { position: relative; height: .9rem; border-radius: 999px; background: var(--flaeche); }
.spanne__bahn i { position: absolute; top: 0; bottom: 0; left: calc(var(--von) * 100%); width: max(.9rem, calc((var(--bis) - var(--von)) * 100%)); border-radius: 999px; background: var(--tinte-3); }
.spanne--vokuma .spanne__bahn i { background: var(--gruen-700); }
.spanne--vokuma .spanne__name { color: var(--gruen-800); }
.spanne__wert { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinte-2); white-space: nowrap; }
@media (max-width: 36rem) { .spanne { grid-template-columns: minmax(0, 1fr) auto; } .spanne__bahn { grid-column: 1 / -1; grid-row: 2; } }

.artikel__hinweis { margin-top: var(--a-8) !important; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r); background: var(--gruen-900); color: var(--hell-2); }
.artikel__hinweis h2 { margin-top: 0 !important; color: var(--hell) !important; font-size: var(--fs-3) !important; }
.artikel__hinweis a { color: var(--minze) !important; }
.tabelle-huelle--fliess { margin-block: 1.5em; }
.tabelle-huelle--fliess table { min-width: 34rem; margin: 0; }
.tabelle-huelle--fliess th, .tabelle-huelle--fliess td { padding: .75rem 1rem !important; }
.tabelle-huelle--fliess thead th { background: var(--papier); font-size: var(--fs-mini); }
.checkliste li { padding-left: 2rem !important; }
.checkliste li::before { top: .3em !important; left: 0 !important; width: 1.25rem !important; height: 1.25rem !important; background-color: var(--gruen-100) !important; }
.fliess .haken-liste > li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--gruen-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312654B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 72% no-repeat; }
.preisliste__preis small { font-family: var(--schrift-text); font-size: var(--fs-mini); font-weight: 500; color: var(--tinte-3); }


.seitenkopf--wahl .seitenkopf__titel { max-width: 13ch; }
.preiszeile {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--a-6);
  border-block: 1px solid var(--linie-stark); font-variant-numeric: tabular-nums;
}
.preiszeile li { display: grid; gap: .1rem; padding: var(--a-4) var(--a-4) var(--a-4) 0; }
.preiszeile li + li { padding-left: var(--a-4); border-left: 1px solid var(--linie); }
.preiszeile b { font-family: var(--schrift-titel); font-weight: 650; font-size: 1.05rem; color: var(--gruen-950); }
.preiszeile__preis { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: -.02em; color: var(--tinte); }
.preiszeile__monat { font-size: var(--fs-klein); color: var(--tinte-2); }
@media (min-width: 60rem) { .preiszeile { max-width: 52rem; } }
@media (max-width: 30rem) {
  .preiszeile li { padding-right: .5rem; }
  .preiszeile li + li { padding-left: .6rem; }
  .preiszeile__preis { font-size: 1.1rem; }
  .preiszeile__monat { font-size: var(--fs-mini); }
}

.wahl { padding-top: 0; }
.wahl__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--a-4); }
@media (min-width: 48rem) { .wahl__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-5); } }
@media (min-width: 72rem) { .wahl__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wahl-kachel { display: grid; min-width: 0; }
.wahl-kachel a {
  display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  border-radius: var(--r); background: var(--weiss); box-shadow: 0 0 0 1px var(--linie);
  color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .25s var(--aus), transform .25s var(--aus);
}
.wahl-kachel a:active { transform: scale(.985); }
.wahl-kachel a:focus-visible { outline-offset: 3px; }
.wahl-kachel__bild { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gruen-900); color: var(--minze); }
.wahl-kachel__zeichen { display: block; width: 30%; height: auto; aspect-ratio: 1; stroke-width: 1.15; transition: transform .4s var(--aus); }
.wahl-kachel__bild--andere { background: var(--gold-flaeche); color: var(--gold-tief); box-shadow: inset 0 -1px 0 var(--linie); }
.wahl-kachel__text { display: grid; place-items: center; padding: 1rem 1.1rem 1.1rem; text-align: center; }
.wahl-kachel__name {
  max-width: 100%; overflow-wrap: break-word; hyphens: auto;
  font-size: clamp(1.1rem, .95rem + .5vw, 1.4rem); font-stretch: 94%; letter-spacing: -.02em; line-height: 1.12; color: var(--gruen-950); text-wrap: balance;
}
@media (hover: hover) and (pointer: fine) {
  .wahl-kachel a:hover { box-shadow: 0 0 0 1px var(--linie-stark), var(--schatten-2); transform: translateY(-2px); }
  .wahl-kachel a:hover .wahl-kachel__zeichen { transform: scale(1.06); }
}
@media (max-width: 40rem) {
  .wahl-kachel__text { padding: .7rem .6rem .75rem; }
  .wahl-kachel__name { font-size: 1.05rem; }
}
.wahl__notiz { margin-top: var(--a-6); max-width: 62ch; font-size: var(--fs-klein); color: var(--tinte-3); }

.seitenkopf--preis { padding-block: clamp(1.5rem, 1rem + 2.5vw, 3.25rem) clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
.seitenkopf--preis .seitenkopf__titel { font-size: clamp(2.3rem, 1.35rem + 3.3vw, 4.4rem); max-width: 17ch; text-wrap: balance; }
.preis-kopf__rechts { display: grid; gap: var(--a-4); align-content: end; }
.preis-kopf__wege { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.textlink--leise { color: var(--tinte-2); }
.seitenkopf--preis + .preise-pakete { padding-top: 0; }
.seitenkopf--kurz { padding-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.seitenkopf--kurz + .kontakt { padding-top: 0; }

.branchen-wahl { display: flex; min-width: 0; }
.branche-knopf {
  display: inline-flex; align-items: center; gap: .7rem; min-height: 3.5rem; max-width: 100%;
  padding: .45rem 1.1rem .45rem .45rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--weiss); box-shadow: 0 0 0 1px var(--linie-stark); color: var(--gruen-950);
  font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.2; text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .2s var(--aus), transform .2s var(--aus), background-color .2s var(--aus);
}
.branche-knopf:active { transform: scale(.97); }
.branche-knopf:focus-visible { outline: 2px solid var(--gruen-700); outline-offset: 3px; }
.branche-knopf__zeichen { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--gruen-900); color: var(--minze); }
.branche-knopf__zeichen .i { width: 1.35rem; height: 1.35rem; stroke-width: 1.5; }
.branche-knopf__name { min-width: 0; text-wrap: balance; }
@media (max-width: 25.999rem) { .branche-knopf__aendern { display: none; } }
.branche-knopf__aendern { flex: none; font-size: var(--fs-klein); font-weight: 500; color: var(--tinte-3); }
.branche-knopf__pfeil { flex: none; width: 1.15rem; height: 1.15rem; margin-left: -.25rem; }
.branche-knopf--stark { padding-left: 1.5rem; padding-right: 1.25rem; background: var(--gruen-900); color: var(--hell); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .branche-knopf:hover { box-shadow: 0 0 0 1px var(--tinte), var(--schatten-2); }
  .branche-knopf--stark:hover { background: var(--gruen-950); box-shadow: var(--schatten-2); }
}

.branchen-dialog {
  width: min(100% - 2rem, 54rem); max-width: none; max-height: min(88dvh, 46rem);
  margin: auto; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border: 0; border-radius: calc(var(--r) * 1.5);
  background: var(--papier); color: var(--tinte); box-shadow: 0 30px 80px -20px rgba(7, 36, 27, .5);
  overflow-y: auto; overscroll-behavior: contain;
}
.branchen-dialog::backdrop { background: rgba(7, 36, 27, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.branchen-dialog[open] { animation: overlay-auf .34s var(--aus) both; }
.branchen-dialog[open]::backdrop { animation: overlay-grund .3s ease both; }
.branchen-dialog.schliesst { animation: overlay-zu .18s ease-in both; }
.branchen-dialog.schliesst::backdrop { animation: overlay-grund-weg .18s ease-in both; }
@keyframes overlay-auf { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes overlay-zu { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes overlay-grund { from { opacity: 0; } }
@keyframes overlay-grund-weg { to { opacity: 0; } }
html:has(.branchen-dialog[open]) { overflow: hidden; }

.branchen-dialog__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a-4); }
.branchen-dialog__titel { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); letter-spacing: -.02em; line-height: 1.1; color: var(--gruen-950); }
.branchen-dialog__zu {
  display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); color: var(--tinte); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--aus), box-shadow .2s var(--aus);
}
.branchen-dialog__zu .i { width: 1.25rem; height: 1.25rem; }
.branchen-dialog__zu:active { transform: scale(.92); }
.branchen-dialog__text { margin-top: var(--a-2); max-width: 52ch; color: var(--tinte-2); }
.branchen-dialog__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: var(--a-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .branchen-dialog__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } }
.branchen-dialog__liste li { display: grid; min-width: 0; }
.branchen-dialog__liste a {
  display: flex; align-items: center; gap: .75rem; min-width: 0; min-height: 4rem; padding: .6rem .8rem .6rem .6rem;
  border-radius: var(--r); background: var(--weiss); box-shadow: 0 0 0 1px var(--linie);
  color: var(--gruen-950); font-weight: 650; line-height: 1.15; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .2s var(--aus), transform .2s var(--aus);
}
.branchen-dialog__liste a:active { transform: scale(.97); }
.branchen-dialog__liste a:focus-visible { outline: 2px solid var(--gruen-700); outline-offset: 2px; }
.branchen-dialog__liste a[aria-current="page"] { box-shadow: 0 0 0 2px var(--gruen-900); }
.branchen-dialog__zeichen { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--gruen-900); color: var(--minze); }
.branchen-dialog__zeichen .i { width: 1.45rem; height: 1.45rem; stroke-width: 1.4; }
.branchen-dialog__andere .branchen-dialog__zeichen { background: var(--gold-flaeche); color: var(--gold-tief); }
.branchen-dialog__name { min-width: 0; hyphens: manual; }
@media (hover: hover) and (pointer: fine) {
  .branchen-dialog__liste a:hover { box-shadow: 0 0 0 1px var(--linie-stark), var(--schatten-2); transform: translateY(-1px); }
  .branchen-dialog__liste a[aria-current="page"]:hover { box-shadow: 0 0 0 2px var(--gruen-900), var(--schatten-2); }
  .branchen-dialog__zu:hover { box-shadow: 0 0 0 1px var(--tinte); }
}
@media (max-width: 39.999rem) {
  .branchen-dialog { width: 100%; max-height: 90dvh; margin: auto 0 0; padding-top: 1.75rem; padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); border-radius: 1.5rem 1.5rem 0 0; }
  .branchen-dialog::before { content: ""; position: absolute; top: .6rem; left: 50%; width: 2.5rem; height: 4px; margin-left: -1.25rem; border-radius: 2px; background: var(--linie-stark); }
  .branchen-dialog[open] { animation: blatt-auf .4s var(--aus) both; }
  .branchen-dialog.schliesst { animation: blatt-zu .2s ease-in both; }
  .branchen-dialog__liste a { min-height: 3.75rem; gap: .6rem; padding: .5rem .6rem .5rem .5rem; font-size: .975rem; }
  .branchen-dialog__zeichen { width: 2.5rem; height: 2.5rem; }
}
@keyframes blatt-auf { from { transform: translateY(100%); } }
@keyframes blatt-zu { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .branchen-dialog, .branchen-dialog::backdrop { animation: none !important; } }
.no-js .branche-knopf, .no-js .branchen-dialog__zu { display: none; }
.no-js .branchen-dialog { position: static; display: block; width: auto; max-height: none; margin: 0; padding: 0; background: none; box-shadow: none; overflow: visible; }
.pakete__recht { margin-top: var(--a-4); }
.preise-pakete .hinweisband p strong { font-family: var(--schrift-titel); font-weight: 650; font-size: 1.1rem; letter-spacing: -.01em; }

.preis-demos .kopfzeile { margin-bottom: var(--a-4); }
.preis-demos .kopfzeile__text { display: grid; gap: var(--a-3); }
.preis-demos .demo-reihe { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.preis-demos .demo-reihe__name { font-size: var(--fs-2); }
.preis-demos__hinweis { padding-top: var(--a-2); }

.ohne-demo__raster { display: grid; gap: var(--a-6); align-items: center; }
.ohne-demo__zeichen { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--r); background: var(--gruen-900); color: var(--minze); }
.ohne-demo__zeichen .i { width: 26%; height: auto; stroke-width: 1.1; }
.ohne-demo__text { display: grid; gap: var(--a-5); align-content: start; }
.ohne-demo__text p { color: var(--tinte-2); max-width: 38em; }
.ohne-demo__text .t-1 { max-width: 18ch; }
@media (min-width: 60rem) { .ohne-demo__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: var(--a-8); } .ohne-demo__zeichen { aspect-ratio: 4 / 3; } }
@media (max-width: 40rem) { .ohne-demo__zeichen { aspect-ratio: 21 / 9; } .ohne-demo__zeichen .i { width: 18%; } }

.fragen__zwischen { margin: var(--a-7) 0 var(--a-3); font-size: var(--fs-3); color: var(--gruen-950); }
.preis-tabelle .leistungstabelle thead th span span { display: inline; }

.vergleich-wahl { display: none; min-width: 0; margin: 0 0 var(--a-5); padding: 0; border: 0; }
.vergleich-wahl__titel { float: left; width: 100%; margin-bottom: var(--a-3); padding: 0; font-size: var(--fs-mini); font-weight: 650; color: var(--tinte-3); }
.vergleich-wahl__knoepfe { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 36rem) { .vergleich-wahl__knoepfe { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vergleich-wahl__knopf { position: relative; display: block; -webkit-tap-highlight-color: transparent; }
.vergleich-wahl__knopf input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vergleich-wahl__knopf span {
  display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .4rem .75rem;
  border: 1px solid var(--linie-stark); border-radius: 999px; color: var(--tinte-2);
  font-size: var(--fs-klein); font-weight: 550; text-align: center; pointer-events: none;
  transition: background-color .18s var(--aus), border-color .18s var(--aus), color .18s var(--aus), transform .16s var(--aus);
}
.vergleich-wahl__knopf input:checked + span { background: var(--gruen-900); border-color: var(--gruen-900); color: var(--hell); }
.vergleich-wahl__knopf input:focus-visible + span { outline: 2px solid var(--gruen-700); outline-offset: 2px; }
.vergleich-wahl__knopf:active span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .vergleich-wahl__knopf:hover input:not(:checked) + span { border-color: var(--tinte); color: var(--tinte); } }

@media (max-width: 48rem) {
  .preis-tabelle .tabelle-huelle { overflow: hidden; overflow: clip; }
  .preis-tabelle .leistungstabelle { display: block; min-width: 0; }
  .preis-tabelle .leistungstabelle thead {
    display: block; position: sticky; top: var(--kopf-h); z-index: 2;
    background: var(--weiss); box-shadow: 0 1px 0 var(--linie-stark);
  }
  .preis-tabelle .leistungstabelle tbody { display: block; }
  .preis-tabelle .leistungstabelle tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: .375rem; padding-inline: .75rem; }
  .preis-tabelle .leistungstabelle th, .preis-tabelle .leistungstabelle td { display: block; position: static; min-width: 0; padding: 0; border: 0; }
  .preis-tabelle .leistungstabelle thead th:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .preis-tabelle .leistungstabelle thead th { padding: .8rem .25rem .7rem; font-size: 1rem; text-align: center; }
  .preis-tabelle .leistungstabelle thead th > span { display: none; }
  .preis-tabelle .leistungstabelle tbody tr { row-gap: .55rem; padding-block: .9rem; border-bottom: 1px solid var(--linie); }
  .preis-tabelle .leistungstabelle tbody tr:last-child { border-bottom: 0; }
  .preis-tabelle .leistungstabelle tbody th[scope="row"] { grid-column: 1 / -1; color: var(--tinte); font-weight: 550; line-height: 1.4; text-align: left; background: none; }
  .preis-tabelle .leistungstabelle td {
    display: grid; place-items: center; min-height: 2.25rem; padding: .4rem .3rem; border-radius: 8px;
    font-size: var(--fs-mini); line-height: 1.3; text-align: center; overflow-wrap: break-word; hyphens: auto;
  }
  .preis-tabelle .leistungstabelle .gruppe { padding-block: 1.1rem .7rem; background: var(--papier); }
  .preis-tabelle .leistungstabelle .gruppe th { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 66rem) {
  .vergleich-block .tabelle-huelle { overflow: visible; border-radius: 0; background: none; box-shadow: none; }
  .vergleich-tabelle { display: block; min-width: 0; line-height: 1.5; }
  .vergleich-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vergleich-tabelle tbody { display: block; border-top: 1px solid var(--linie-stark); }
  .vergleich-tabelle tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--a-3); padding-block: var(--a-4); border-bottom: 1px solid var(--linie-stark); }
  .vergleich-tabelle th, .vergleich-tabelle td { display: block; position: static; min-width: 0; padding: 0; border: 0; background: none; hyphens: auto; overflow-wrap: break-word; }
  .vergleich-tabelle tbody th { margin-bottom: var(--a-2); font-family: var(--schrift-titel); font-size: 1.1rem; color: var(--tinte); }
  .vergleich-tabelle td { padding-top: var(--a-2); color: var(--tinte-3); }
  .vergleich-tabelle td::before { content: attr(data-kopf); display: block; margin-bottom: .2rem; font-size: var(--fs-mini); font-weight: 650; color: var(--tinte-3); }
  .vergleich-tabelle td.ist-vokuma { order: 1; padding: var(--a-2) var(--a-3); border-radius: 10px; background: var(--gruen-50); color: var(--tinte); }
  .vergleich-tabelle td:not(.ist-vokuma) + td:not(.ist-vokuma) { margin-top: var(--a-2); }
}
@supports selector(:has(*)) {
  @media (max-width: 66rem) {
    .vergleich-wahl { display: block; }
    .vergleich-tabelle tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vergleich-tabelle tbody th { grid-column: 1 / -1; }
    .vergleich-tabelle td:not(.ist-vokuma) { display: none; margin-top: 0 !important; }
    .vergleich-block:has([value="3"]:checked) .vergleich-tabelle td:nth-child(3),
    .vergleich-block:has([value="4"]:checked) .vergleich-tabelle td:nth-child(4),
    .vergleich-block:has([value="5"]:checked) .vergleich-tabelle td:nth-child(5),
    .vergleich-block:has([value="6"]:checked) .vergleich-tabelle td:nth-child(6) { display: block; }
  }
}

@media (max-width: 39.99rem) {
  .zahlplan, .drei-jahre-tabelle { display: block; }
  .zahlplan thead, .drei-jahre-tabelle thead, .tabelle-huelle--fliess .tabelle--stapel thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  .zahlplan tbody, .drei-jahre-tabelle tbody { display: block; }
  .zahlplan tr, .drei-jahre-tabelle tr { display: grid; row-gap: .4rem; }
  .zahlplan th, .zahlplan td, .drei-jahre-tabelle th, .drei-jahre-tabelle td { padding: 0; border: 0; text-align: left; }
  .zahlplan tbody th, .drei-jahre-tabelle tbody th { margin-bottom: .15rem; }
  .zahlplan td, .drei-jahre-tabelle td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a-3); text-align: right; }
  .zahlplan td::before, .drei-jahre-tabelle td::before { content: attr(data-kopf); text-align: left; font-family: var(--schrift-text); font-size: var(--fs-klein); font-weight: 450; }
  .zahlplan tr { padding-block: var(--a-4); border-bottom: 1px solid var(--linie-hell); }
  .zahlplan tbody tr:first-child { border-top: 1px solid var(--linie-hell); }
  .zahlplan td::before { color: var(--hell-3); }
  .drei-jahre-tabelle tr { padding: var(--a-4) var(--a-5); border-bottom: 1px solid var(--linie); }
  .drei-jahre-tabelle tbody tr:last-child { border-bottom: 0; }
  .drei-jahre-tabelle tr { padding-inline: var(--a-4); }
  .drei-jahre-tabelle td { color: var(--tinte-2); white-space: nowrap; }
  .drei-jahre-tabelle td::before { min-width: 0; white-space: normal; font-size: var(--fs-mini); color: var(--tinte-3); }
  .drei-jahre-tabelle td:nth-child(4) { margin-top: .15rem; padding-top: .5rem; border-top: 1px solid var(--linie); font-size: 1.05rem; }
  .drei-jahre-tabelle td:nth-child(4)::before { font-size: var(--fs-klein); color: var(--tinte); font-weight: 650; }
  .drei-jahre-tabelle td:nth-child(5), .drei-jahre-tabelle td:nth-child(5)::before { font-size: var(--fs-mini); color: var(--tinte-3); }

  .tabelle-huelle--fliess table { min-width: 0; }
  .tabelle-huelle--fliess .tabelle--stapel, .tabelle-huelle--fliess .tabelle--stapel tbody { display: block; }
  .tabelle-huelle--fliess .tabelle--stapel tr { display: grid; row-gap: .45rem; padding: var(--a-4); border-bottom: 1px solid var(--linie); }
  .tabelle-huelle--fliess .tabelle--stapel tr:last-child { border-bottom: 0; }
  .tabelle-huelle--fliess .tabelle--stapel th, .tabelle-huelle--fliess .tabelle--stapel td { display: flow-root; padding: 0 0 0 7rem !important; border: 0; }
  .tabelle-huelle--fliess .tabelle--stapel td::before {
    content: attr(data-kopf); float: left; width: 6.25rem; margin: .25em .75rem 0 -7rem;
    font-size: var(--fs-mini); font-weight: 600; line-height: 1.45; color: var(--tinte-3);
  }
  .tabelle-huelle--fliess .tabelle--stapel tr > :first-child { padding: 0 !important; font-weight: 650; color: var(--tinte); }
  .tabelle-huelle--fliess .tabelle--stapel tr > :first-child::before { content: none; }
}


.recht-kopf { padding-bottom: var(--a-5); }
.recht-kopf__titel { max-width: 20ch; }
.recht-kopf__stand { margin-top: var(--a-4); }
.recht__raster { padding-top: var(--a-5); }
.recht__text { font-size: 1.0625rem; }
.recht__text > h2 { scroll-margin-top: calc(var(--kopf-h) + 1.5rem); }
.recht__text h3[id] { scroll-margin-top: calc(var(--kopf-h) + 1.5rem); }
.recht__text h2 { font-size: var(--fs-3); letter-spacing: -.02em; margin-top: 2.2em; padding-top: 1.1em; border-top: 1px solid var(--linie); }
.recht__text h3 { font-size: 1.15rem; letter-spacing: -.01em; margin-top: 1.7em; color: var(--gruen-950); }
.recht__text > .recht-kasten:first-of-type + h2, .recht__text > details + h2 { border-top: 0; padding-top: 0; }
.recht__text dl { display: grid; gap: var(--a-3); margin-top: 1em; }
.recht__text dt { font-weight: 650; color: var(--tinte); }
.recht__text dd { margin: .15em 0 0; color: var(--tinte-2); }
.recht__text .tabelle-huelle { margin-top: 1em; }
.recht__text td, .recht__text th { padding-right: var(--a-4); }
.recht__text thead th { color: var(--tinte); border-bottom-color: var(--linie-stark); }
.recht__text td { color: var(--tinte-2); }
.recht__text a[target="_blank"] { overflow-wrap: anywhere; }

.recht-kasten {
  display: grid; gap: var(--a-2); margin-top: 1.5em;
  padding: var(--a-5); border-radius: var(--r); background: var(--gruen-50);
}
.recht-kasten > b { font-family: var(--schrift-titel); font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; color: var(--gruen-950); }
.recht-kasten p { color: var(--tinte-2); margin: 0; }
.recht-kasten--gold { background: var(--gold-flaeche); }
.recht-kasten--gold b { color: var(--tinte); }

.luecke {
  padding: .05em .35em; border-radius: 4px;
  background: var(--gold-hell); color: #6B4C12;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  font-weight: 600;
}
mark.luecke--fehlt, .luecke--fehlt {
  background: #FDECEA; color: #8E1F18; outline: 1px dashed rgba(142, 31, 24, .55); outline-offset: 0;
  font-weight: 650; font-size: .95em;
}

@media (min-width: 64rem) {
  .recht__rand { max-height: calc(100vh - var(--kopf-h) - 3rem); max-height: calc(100dvh - var(--kopf-h) - 3rem); overflow-y: auto; overscroll-behavior: contain; padding-right: .25rem; scrollbar-width: thin; }
}
.recht__verz a { padding-block: .35rem; line-height: 1.35; }
.recht__verz a[aria-current="true"] { color: var(--gruen-700); font-weight: 600; }
.recht__frage { display: grid; gap: var(--a-2); padding: var(--a-5); border-radius: var(--r); background: var(--gruen-900); color: var(--hell); font-size: var(--fs-klein); }
.recht__frage p { color: var(--hell-2); }
.recht__frage a { color: var(--minze); font-weight: 600; overflow-wrap: anywhere; }
.recht__frage :focus-visible { outline-color: var(--minze); }

.impressum { display: grid; gap: 0 var(--a-7); margin-top: 0; }
.fliess .impressum { margin-top: 0; }
.impressum__block { padding-block: var(--a-5); border-top: 1px solid var(--linie-stark); }
.impressum__block h2 { margin: 0 0 var(--a-3); padding: 0; border: 0; font-size: 1.2rem; color: var(--gruen-950); }
.impressum__block p + p { margin-top: var(--a-3); }
@media (min-width: 48rem) { .impressum { grid-template-columns: 1fr 1fr; } }
.recht--impressum .recht__text > h2 { font-size: 1.2rem; }

.nicht-da { padding-block: clamp(2.5rem, 1rem + 6vw, 7rem) var(--luft); }
.nicht-da__raster { display: grid; gap: var(--a-8); align-items: end; }
.nicht-da__text { display: grid; gap: var(--a-5); justify-items: start; }
.nicht-da__code {
  font-family: var(--schrift-titel); font-weight: 750; font-stretch: 80%;
  font-size: clamp(4.5rem, 3rem + 7vw, 9rem); line-height: .8; letter-spacing: -.04em;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.nicht-da__titel { font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5.25rem); font-stretch: 86%; font-weight: 750; letter-spacing: -.035em; line-height: .98; color: var(--gruen-950); max-width: 14ch; }
.nicht-da__lead { font-size: var(--fs-lead); color: var(--tinte-2); max-width: 34em; line-height: 1.55; }
.nicht-da__lead a { color: var(--gruen-700); font-weight: 600; }
.nicht-da__wege ul { display: grid; border-top: 1px solid var(--linie-stark); }
.nicht-da__wege li { border-bottom: 1px solid var(--linie-stark); }
.nicht-da__wege a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a-4);
  padding-block: var(--a-4); text-decoration: none; color: var(--tinte);
}
.nicht-da__wege a > span { display: grid; gap: .1rem; }
.nicht-da__wege b { font-family: var(--schrift-titel); font-size: 1.3rem; letter-spacing: -.02em; color: var(--gruen-950); transition: color .2s var(--aus); }
.nicht-da__wege a > span > span { font-size: var(--fs-klein); color: var(--tinte-3); }
.nicht-da__wege .i { color: var(--gruen-700); transition: transform .2s var(--aus); }
@media (hover: hover) and (pointer: fine) {
  .nicht-da__wege a:hover b { color: var(--gruen-700); }
  .nicht-da__wege a:hover .i { transform: translateX(4px); }
}
@media (min-width: 60rem) { .nicht-da__raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: var(--a-9); } }

.ob { --ob-band-h: 3rem; padding-bottom: var(--luft-dicht); }
.ob-ohne-js { padding-block: var(--a-8); }
.ob-ohne-js a { color: var(--gruen-700); font-weight: 600; }

.ob-band {
  position: sticky; top: var(--kopf-h); z-index: 50;
  background: color-mix(in oklab, var(--papier) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linie);
}
.ob[data-ob-schritt="modus"] .ob-band { display: none; }
.ob-band__innen { display: flex; align-items: center; gap: var(--a-2); min-height: var(--ob-band-h); }
.ob-chip {
  display: inline-flex; align-items: center; min-height: 1.75rem; padding: .15rem .7rem; border-radius: 999px;
  background: var(--gruen-50); color: var(--gruen-800); font-size: var(--fs-mini); font-weight: 650; white-space: nowrap;
}
.ob-chip--gold { background: var(--gold-hell); color: #6B4C12; }
.ob-band__zahl { margin-left: auto; font-size: var(--fs-mini); font-weight: 600; color: var(--tinte-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ob-band__balken { height: 3px; background: transparent; overflow: hidden; }
.ob-band__balken i { display: block; height: 100%; background: linear-gradient(90deg, var(--gruen-700), var(--gold)); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--aus); }

.ob-raster { display: grid; gap: var(--a-7); padding-top: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 64rem) {
  .ob-raster { grid-template-columns: minmax(0, 1fr) 17.5rem; column-gap: clamp(3rem, 1rem + 4vw, 6rem); align-items: start; }
  .ob-rand { position: sticky; top: calc(var(--kopf-h) + var(--ob-band-h) + 2rem); }
  .ob[data-ob-schritt="modus"] .ob-raster, .ob[data-ob-schritt="fertig"] .ob-raster { grid-template-columns: minmax(0, 1fr); }
}
.ob-haupt { min-width: 0; max-width: 52rem; }
.ob[data-ob-schritt="modus"] .ob-haupt { max-width: none; }
.ob[data-ob-schritt="modus"] .ob-rand, .ob[data-ob-schritt="fertig"] .ob-rand { display: none; }
@media (max-width: 63.99rem) { .ob-rand { display: none; } }

.ob-schritt { display: none; }
.ob-schritt.aktiv { display: grid; gap: var(--a-6); align-content: start; }
@media (prefers-reduced-motion: no-preference) {
  .ob-schritt.aktiv { animation: ob-herein .45s var(--aus) both; }
}
@keyframes ob-herein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ob-kopf { display: grid; gap: var(--a-3); }
.ob-kopf__titel { font-size: var(--fs-2); color: var(--gruen-950); letter-spacing: -.03em; font-stretch: 92%; }
.ob-kopf__titel:focus { outline: none; }
.ob-kopf__text { font-size: var(--fs-lead); line-height: 1.55; color: var(--tinte-2); max-width: 38em; }

.ob-start { display: grid; gap: var(--a-5); padding-block: var(--a-2) var(--a-3); }
@media (min-width: 60rem) { .ob-start { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--a-8); align-items: end; } }
.ob-start__titel { font-size: clamp(2.5rem, 1.5rem + 3vw, 3.75rem); font-stretch: 86%; font-weight: 750; letter-spacing: -.035em; line-height: 1; color: var(--gruen-950); max-width: 15ch; text-wrap: balance; }
.ob-start__titel em { font-style: normal; color: var(--gruen-700); }
.ob-start__text { font-size: var(--fs-lead); color: var(--tinte-2); max-width: 32em; line-height: 1.55; }

.ob-modi { display: grid; gap: var(--a-4); }
@media (min-width: 52rem) { .ob-modi { grid-template-columns: 1fr 1fr; } }
.ob-modus {
  display: grid; gap: var(--a-3); align-content: start; text-align: left;
  padding: clamp(1.5rem, 1rem + 1vw, 2rem); border: 0; border-radius: var(--r);
  background: var(--weiss); color: var(--tinte); cursor: pointer;
  box-shadow: 0 0 0 1px var(--linie); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: box-shadow .25s var(--aus), transform .2s var(--aus), background-color .25s var(--aus);
}
.ob-modus:active { transform: scale(.99); }
.ob-modus--voll { background: var(--gruen-900); color: var(--hell); box-shadow: var(--schatten-2); }
.ob-modus__dauer { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; padding: .25rem .75rem .25rem .55rem; border-radius: 999px; background: var(--gruen-50); color: var(--gruen-800); font-size: var(--fs-mini); font-weight: 650; }
.ob-modus__dauer .i { width: 1rem; height: 1rem; }
.ob-modus--voll .ob-modus__dauer { background: rgba(143, 232, 194, .14); color: var(--minze); }
.ob-modus__titel { font-family: var(--schrift-titel); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 700; font-stretch: 92%; letter-spacing: -.03em; line-height: 1.05; margin-top: var(--a-2); }
.ob-modus__text { color: var(--tinte-2); max-width: 30em; }
.ob-modus--voll .ob-modus__text { color: var(--hell-2); }
.ob-modus__punkte { display: grid; gap: .5rem; padding-block: var(--a-2); font-size: var(--fs-klein); }
.ob-modus__punkte > span { position: relative; padding-left: 1.75rem; color: var(--tinte-2); }
.ob-modus__punkte > span::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--gruen-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312654B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.ob-modus--voll .ob-modus__punkte > span { color: var(--hell-2); }
.ob-modus--voll .ob-modus__punkte > span::before { background-color: rgba(143, 232, 194, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FE8C2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.ob-modus__fuss {
  display: inline-flex; align-items: center; gap: .6em; width: fit-content; margin-top: var(--a-2);
  min-height: 3rem; padding: .75rem 1.4rem; border-radius: 999px; background: var(--gruen-700); color: #fff; font-weight: 600;
  transition: background-color .2s var(--aus);
}
.ob-modus__fuss .i { width: 1.1em; height: 1.1em; transition: transform .2s var(--aus); }
.ob-modus--voll .ob-modus__fuss { background: var(--hell); color: var(--gruen-950); }
.ob-modus--voll:focus-visible { outline-color: var(--gruen-600); }
@media (hover: hover) and (pointer: fine) {
  .ob-modus:hover { box-shadow: 0 0 0 1px var(--linie-stark), var(--schatten-2); transform: translateY(-2px); }
  .ob-modus--voll:hover { box-shadow: var(--schatten-dunkel); }
  .ob-modus:hover .ob-modus__fuss { background: var(--gruen-800); }
  .ob-modus--voll:hover .ob-modus__fuss { background: #fff; }
  .ob-modus:hover .ob-modus__fuss .i { transform: translateX(3px); }
}

.ob-zusicherung { display: grid; gap: var(--a-5) var(--a-6); margin-top: var(--a-4); padding-top: var(--a-6); border-top: 1px solid var(--linie-stark); }
@media (min-width: 40rem) { .ob-zusicherung { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .ob-zusicherung { grid-template-columns: repeat(4, 1fr); } }
.ob-zusicherung li { display: grid; grid-template-columns: auto 1fr; gap: var(--a-3); align-items: start; }
.ob-zusicherung .i { width: 1.35rem; height: 1.35rem; color: var(--gruen-700); margin-top: .1rem; }
.ob-zusicherung p { font-size: var(--fs-klein); color: var(--tinte-2); }
.ob-zusicherung b { display: block; color: var(--tinte); margin-bottom: .15rem; }

.ob-weiter { display: none; gap: var(--a-3); padding: var(--a-5) var(--a-6); border-radius: var(--r); background: var(--gold-flaeche); }
.ob-weiter.an { display: grid; }
.ob-weiter__titel { font-family: var(--schrift-titel); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--gruen-950); }
.ob-weiter p { color: var(--tinte-2); }
.ob-weiter__knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-3); margin-top: var(--a-2); }

.ob-felder { display: grid; gap: var(--a-5); }
@media (min-width: 40rem) { .ob-felder--zwei { grid-template-columns: 1fr 1fr; } }
.ob-feld { display: grid; gap: .45rem; align-content: start; }
.ob-feld > label, .ob-frage { font-weight: 600; font-size: var(--fs-klein); color: var(--tinte); line-height: 1.4; }
.ob-frage--klein { font-weight: 550; color: var(--tinte-2); }
.ob-pflicht { color: var(--gruen-700); }
.ob-hinweis { font-size: var(--fs-mini); color: var(--tinte-3); line-height: 1.45; max-width: 44em; }
.ob-feld input[type="text"], .ob-feld input[type="email"], .ob-feld input[type="tel"], .ob-feld input[type="url"],
.ob-feld textarea, .ob-feld select, .ob-ext select {
  width: 100%; min-height: 3.25rem; padding: .8rem 1rem; border: 1px solid var(--linie-stark); border-radius: var(--r-klein);
  background: var(--weiss); color: var(--tinte); font: inherit; font-size: 1.0625rem; line-height: 1.4;
  transition: border-color .15s var(--aus), box-shadow .15s var(--aus);
  -webkit-appearance: none; appearance: none;
}
.ob-feld textarea { min-height: 7.5rem; resize: vertical; }
.ob-feld select, .ob-ext select {
  padding-right: 2.75rem; cursor: pointer;
  background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312654B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") right .9rem center / 1.15rem no-repeat;
}
.ob-feld input::placeholder, .ob-feld textarea::placeholder { color: #6B766F; }
.ob-feld input:focus, .ob-feld textarea:focus, .ob-feld select:focus, .ob-ext select:focus { outline: none; border-color: var(--gruen-600); box-shadow: 0 0 0 3px rgba(23, 122, 91, .2); }
@media (hover: hover) and (pointer: fine) {
  .ob-feld input:hover:not(:focus), .ob-feld textarea:hover:not(:focus), .ob-feld select:hover:not(:focus), .ob-ext select:hover:not(:focus) { border-color: rgba(16, 25, 21, .4); }
}
.ob-fehlertext { display: none; color: #A1231B; font-size: var(--fs-mini); font-weight: 550; }
.ob-feld.fehler .ob-fehlertext { display: block; }
.ob-bestaetigung { margin-top: 1.25rem; }
.ob-feld > label.ob-bestaetigung__zeile { display: flex; gap: .75rem; align-items: flex-start; font-weight: 450; font-size: var(--fs-klein); line-height: 1.5; cursor: pointer; }
.ob-bestaetigung__zeile input { flex: none; width: 1.2rem; height: 1.2rem; margin: .15rem 0 0; accent-color: var(--gruen-700); }
.ob-bestaetigung__zeile a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ob-feld.fehler .ob-bestaetigung__zeile input { outline: 2px solid #B3261E; outline-offset: 2px; }
.ob-feld.fehler input, .ob-feld.fehler textarea { border-color: #B3261E; background: #FDF6F5; }
.ob-feld.fehler .ob-kacheln { border-radius: var(--r); box-shadow: 0 0 0 2px #FDECEA, 0 0 0 3px #B3261E; }
[data-paket-fehler] { color: #A1231B; font-size: var(--fs-mini); font-weight: 550; }

.ob-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: var(--a-2); }
.ob-kacheln--branchen { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--a-3); }
.ob-kacheln--klein { display: flex; flex-wrap: wrap; }
.ob-kachel {
  position: relative; display: grid; gap: .2rem; align-content: start; text-align: left;
  min-height: 3rem; padding: .85rem 2.6rem .85rem 1rem; border: 1px solid var(--linie-stark); border-radius: var(--r-klein);
  background: var(--weiss); color: var(--tinte); cursor: pointer; font: inherit;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color .15s var(--aus), background-color .15s var(--aus), box-shadow .15s var(--aus), transform .12s var(--aus);
}
.ob-kacheln--branchen .ob-kachel { padding-block: 1rem; }
.ob-kacheln--klein .ob-kachel { padding: .6rem 2.4rem .6rem .95rem; min-height: 2.9rem; border-radius: 999px; }
.ob-kachel b { font-weight: 650; font-size: 1rem; line-height: 1.3; }
.ob-kacheln--branchen .ob-kachel b { font-family: var(--schrift-titel); font-size: 1.12rem; letter-spacing: -.01em; }
.ob-kachel span { font-size: var(--fs-mini); color: var(--tinte-3); line-height: 1.4; }
.ob-kachel::after {
  content: ""; position: absolute; right: .9rem; top: 1rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 1.5px solid var(--linie-stark); background: var(--weiss);
  transition: background-color .15s var(--aus), border-color .15s var(--aus);
}
.ob-kacheln--klein .ob-kachel::after { top: 50%; margin-top: -.55rem; right: .8rem; }
.ob-kachel:active { transform: scale(.985); }
.ob-kachel.gewaehlt { border-color: var(--gruen-700); background: var(--gruen-50); box-shadow: inset 0 0 0 1px var(--gruen-700); }
.ob-kachel.gewaehlt::after {
  border-color: var(--gruen-700);
  background: var(--gruen-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
}
@media (hover: hover) and (pointer: fine) { .ob-kachel:hover:not(.gewaehlt) { border-color: rgba(16, 25, 21, .45); } }

.ob-pakete { display: grid; gap: var(--a-3); }
@media (min-width: 48rem) { .ob-pakete { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ob-paket {
  display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--a-3); text-align: left;
  padding: var(--a-5); border: 0; border-radius: var(--r); background: var(--weiss); color: var(--tinte); cursor: pointer; font: inherit;
  box-shadow: 0 0 0 1px var(--linie-stark); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: box-shadow .2s var(--aus), transform .2s var(--aus);
}
.ob-paket__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a-2); flex-wrap: wrap; }
.ob-paket__name { font-family: var(--schrift-titel); font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; font-stretch: 92%; color: var(--gruen-950); }
.ob-paket__marke { padding: .15rem .6rem; border-radius: 999px; background: var(--gold); color: var(--gruen-950); font-size: var(--fs-mini); font-weight: 650; }
.ob-paket__claim { color: var(--tinte-3); font-size: var(--fs-klein); margin-top: -.35rem; }
.ob-paket__preis { display: grid; gap: .1rem; padding-block: var(--a-3); border-block: 1px solid var(--linie); }
.ob-paket__preis b { font-family: var(--schrift-titel); font-size: 2.3rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.ob-paket__preis span { color: var(--tinte-3); font-size: var(--fs-mini); }
.ob-paket__punkte { display: grid; gap: .45rem; align-content: start; font-size: var(--fs-mini); }
.ob-paket__punkte > span { position: relative; padding-left: 1.5rem; color: var(--tinte-2); line-height: 1.4; }
.ob-paket__punkte > span::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--gruen-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312654B' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.ob-paket__fuss {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.75rem; margin-top: var(--a-2);
  border-radius: 999px; border: 1px solid var(--linie-stark); font-weight: 600; font-size: var(--fs-klein);
  transition: background-color .2s var(--aus), color .2s var(--aus), border-color .2s var(--aus);
}
.ob-paket__fuss .i { width: 1.1rem; height: 1.1rem; }
.ob-paket.gewaehlt { box-shadow: 0 0 0 2px var(--gruen-700), var(--schatten-2); }
.ob-paket.gewaehlt .ob-paket__fuss { background: var(--gruen-700); border-color: var(--gruen-700); color: #fff; }
.ob-paket:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  .ob-paket:hover:not(.gewaehlt) { box-shadow: 0 0 0 1px var(--tinte-3), var(--schatten-1); transform: translateY(-2px); }
  .ob-paket:hover:not(.gewaehlt) .ob-paket__fuss { border-color: var(--tinte); }
}

.ob-notiz { padding: var(--a-4) var(--a-5); border-radius: var(--r-klein); background: var(--gruen-50); color: var(--tinte-2); font-size: var(--fs-klein); line-height: 1.55; }
.ob-notiz a { color: var(--gruen-700); font-weight: 600; }
.ob-notiz--hell { background: rgba(246, 245, 239, .08); color: var(--hell-2); }
.ob-tipp { display: grid; grid-template-columns: auto 1fr; gap: var(--a-3); align-items: start; padding: var(--a-4) var(--a-5); border-radius: var(--r-klein); background: var(--gold-flaeche); font-size: var(--fs-klein); color: var(--tinte-2); }
.ob-tipp b { color: var(--tinte); }
.ob-tipp__zeichen { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--weiss); color: var(--gold-tief); }
.ob-tipp__zeichen .i { width: 1rem; height: 1rem; }
.ob-zwischen { font-size: var(--fs-3); color: var(--gruen-950); margin-top: var(--a-3); }

.ob-funktionen, .ob-ext { display: grid; gap: var(--a-2); }
@media (min-width: 44rem) { .ob-funktionen { grid-template-columns: 1fr 1fr; } }
.ob-gruppe { grid-column: 1 / -1; margin-top: var(--a-4); font-family: var(--schrift-titel); font-size: 1.1rem; font-weight: 650; letter-spacing: -.01em; color: var(--gruen-950); }
.ob-gruppe:first-child { margin-top: 0; }
.ob-fnk, .ob-ext__zeile {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a-3); align-items: start;
  padding: var(--a-4); border: 1px solid var(--linie-stark); border-radius: var(--r-klein); background: var(--weiss); cursor: pointer;
  transition: border-color .15s var(--aus), background-color .15s var(--aus), box-shadow .15s var(--aus);
}
.ob-ext__zeile { grid-template-columns: auto minmax(0, 1fr) auto; }
.ob-fnk input, .ob-ext__zeile > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ob-fnk__kasten {
  display: grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-top: .1rem; border-radius: 6px;
  border: 1.5px solid var(--linie-stark); background: var(--weiss); color: transparent;
  transition: background-color .15s var(--aus), border-color .15s var(--aus), color .15s var(--aus);
}
.ob-fnk__kasten .i { width: .95rem; height: .95rem; stroke-width: 2.6; }
.ob-fnk__text, .ob-ext__text { display: grid; gap: .15rem; min-width: 0; }
.ob-fnk__text b, .ob-ext__text b { font-weight: 650; line-height: 1.35; }
.ob-fnk__text span, .ob-ext__text > span { font-size: var(--fs-mini); color: var(--tinte-3); line-height: 1.45; }
.ob-fnk.gewaehlt, .ob-ext__zeile.an { border-color: var(--gruen-700); background: var(--gruen-50); box-shadow: inset 0 0 0 1px var(--gruen-700); }
.ob-fnk.gewaehlt .ob-fnk__kasten, .ob-ext__zeile.an .ob-fnk__kasten { background: var(--gruen-700); border-color: var(--gruen-700); color: #fff; }
.ob-fnk:has(input:focus-visible), .ob-ext__zeile:has(> input:focus-visible) { outline: 2px solid var(--gruen-600); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ob-fnk:hover:not(.gewaehlt), .ob-ext__zeile:hover:not(.an) { border-color: rgba(16, 25, 21, .45); } }
.ob-ext select { margin-top: var(--a-2); min-height: 2.75rem; padding-block: .5rem; font-size: 1rem; max-width: 22rem; }
.ob-ext__preis { display: grid; justify-items: end; gap: .1rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ob-ext__preis small { font-size: var(--fs-mini); font-weight: 500; color: var(--tinte-3); }
@media (max-width: 30rem) {
  .ob-ext__zeile { grid-template-columns: auto minmax(0, 1fr); }
  .ob-ext__preis { grid-column: 2; justify-items: start; }
}

.ob-logos { display: grid; gap: var(--a-3); }
@media (min-width: 44rem) { .ob-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ob-logo {
  display: grid; gap: var(--a-2); align-content: start; text-align: left; padding: var(--a-4);
  border: 1px solid var(--linie-stark); border-radius: var(--r); background: var(--weiss); color: var(--tinte); cursor: pointer; font: inherit;
  transition: border-color .15s var(--aus), box-shadow .15s var(--aus), background-color .15s var(--aus);
}
.ob-logo__vs { display: grid; place-items: center; min-height: 5rem; margin-bottom: var(--a-2); border-radius: var(--r-klein); background: var(--papier); overflow: hidden; }
.ob-logo__wort { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--schrift-titel); font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; color: var(--gruen-900); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: var(--a-3); }
.ob-logo__wort--marke { color: var(--gruen-950); }
.ob-logo__zeichen { width: 1.4rem; height: 1.4rem; color: var(--gold); flex: none; }
.ob-logo__datei { display: inline-flex; align-items: center; gap: .45rem; color: var(--tinte-3); font-size: var(--fs-klein); }
.ob-logo__datei .i { width: 1.3rem; height: 1.3rem; }
.ob-logo b { font-weight: 650; }
.ob-logo__text { font-size: var(--fs-mini); color: var(--tinte-3); line-height: 1.45; }
.ob-logo__preis { font-size: var(--fs-klein); font-weight: 650; color: var(--gruen-700); }
.ob-logo__preis.kost { color: var(--tinte); }
.ob-logo.gewaehlt { border-color: var(--gruen-700); box-shadow: inset 0 0 0 1px var(--gruen-700); background: var(--gruen-50); }
.ob-logo.gewaehlt .ob-logo__vs { background: var(--weiss); }
@media (hover: hover) and (pointer: fine) { .ob-logo:hover:not(.gewaehlt) { border-color: rgba(16, 25, 21, .45); } }
.ob-logo-hinweis:empty { display: none; }

.ob-fragen { display: grid; gap: var(--a-6); }
.ob-jn { display: inline-flex; width: fit-content; padding: 3px; border-radius: 999px; background: var(--weiss); box-shadow: inset 0 0 0 1px var(--linie-stark); }
.ob-jn button {
  min-width: 5.5rem; min-height: 2.75rem; padding: .5rem 1.2rem; border: 0; border-radius: 999px; background: transparent;
  font-weight: 600; cursor: pointer; color: var(--tinte-2); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .15s var(--aus), color .15s var(--aus);
}
.ob-jn button.gewaehlt { background: var(--gruen-700); color: #fff; }
@media (hover: hover) and (pointer: fine) { .ob-jn button:hover:not(.gewaehlt) { background: var(--gruen-50); color: var(--tinte); } }
.ob-detail { display: none; gap: .45rem; margin-top: var(--a-2); padding-left: var(--a-4); border-left: 1px solid var(--linie-stark); }
.ob-detail.an { display: grid; }

.ob-dom { display: grid; gap: var(--a-3); }
.ob-dom__zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-2); }
@media (min-width: 40rem) { .ob-dom__zeile { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; } }
.ob-dom__tlds { display: inline-flex; width: fit-content; padding: 3px; border-radius: 999px; background: var(--weiss); box-shadow: inset 0 0 0 1px var(--linie-stark); }
.ob-dom__tlds button { min-height: 2.6rem; padding: .4rem .9rem; border: 0; border-radius: 999px; background: transparent; font-weight: 600; color: var(--tinte-2); cursor: pointer; }
.ob-dom__tlds button.gewaehlt { background: var(--gruen-900); color: var(--hell); }
.ob-dom__pruef { min-height: 3rem; padding: .6rem 1.3rem; border: 1px solid var(--linie-stark); border-radius: 999px; background: transparent; font-weight: 600; cursor: pointer; width: fit-content; }
@media (hover: hover) and (pointer: fine) { .ob-dom__pruef:hover { background: var(--weiss); border-color: var(--tinte); } }
.ob-dom__ausgabe:empty, .ob-dom__vor:empty { display: none; }
.ob-dom__ausgabe, .ob-dom__vor { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.ob-dom__titel { flex-basis: 100%; font-size: var(--fs-mini); font-weight: 650; color: var(--tinte-3); }
.ob-dom__treffer { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .35rem .8rem; border: 1px solid var(--linie-stark); border-radius: 999px; background: var(--weiss); font-size: var(--fs-klein); cursor: pointer; }
.ob-dom__treffer span { font-size: var(--fs-mini); font-weight: 600; }
.ob-dom__treffer.frei span { color: var(--gruen-700); }
.ob-dom__treffer.weg { opacity: .6; cursor: default; }
.ob-dom__treffer.weg span { color: #A1231B; }
.ob-dom__treffer.unklar { cursor: default; }
.ob-dom__treffer.aktiv { border-color: var(--gruen-700); background: var(--gruen-50); box-shadow: inset 0 0 0 1px var(--gruen-700); }
.ob-dom__laeuft, .ob-dom__fehler { font-size: var(--fs-klein); color: var(--tinte-3); }
.ob-dom__fehler { color: #A1231B; }

.ob-drop {
  display: grid; justify-items: center; gap: .35rem; padding: var(--a-7) var(--a-5); text-align: center;
  border: 1.5px dashed var(--linie-stark); border-radius: var(--r); background: var(--weiss); cursor: pointer;
  transition: border-color .15s var(--aus), background-color .15s var(--aus);
}
.ob-drop__zeichen { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--a-2); border-radius: 50%; background: var(--gruen-50); color: var(--gruen-700); }
.ob-drop b { font-family: var(--schrift-titel); font-size: 1.2rem; letter-spacing: -.01em; }
.ob-drop > span:last-child { font-size: var(--fs-mini); color: var(--tinte-3); max-width: 30em; }
.ob-drop.ueber { border-color: var(--gruen-700); background: var(--gruen-50); }
@media (hover: hover) and (pointer: fine) { .ob-drop:hover { border-color: var(--gruen-700); } }
.ob-dateien { display: grid; gap: var(--a-2); }
.ob-dateien:empty { display: none; }
.ob-datei { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--a-3); align-items: center; padding: .7rem 1rem; border-radius: var(--r-klein); background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); font-size: var(--fs-klein); }
.ob-datei__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.ob-datei__groesse { color: var(--tinte-3); font-variant-numeric: tabular-nums; }
.ob-datei__stand { font-weight: 600; color: var(--tinte-3); }
.ob-datei__stand.ok { color: var(--gruen-700); }
.ob-datei__stand.err { color: #A1231B; }

.ob-zus { display: grid; gap: var(--a-3); }
.ob-zus__block { padding: var(--a-5); border-radius: var(--r); background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); }
.ob-zus__block h3 { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); font-size: 1.2rem; color: var(--gruen-950); }
.ob-zus__block h3 button {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; padding: .3rem .8rem;
  border: 1px solid var(--linie-stark); border-radius: 999px; background: transparent;
  font: 600 var(--fs-mini) var(--schrift-text); letter-spacing: 0; color: var(--gruen-700); cursor: pointer;
}
.ob-zus__block h3 button .i { width: .95rem; height: .95rem; }
@media (hover: hover) and (pointer: fine) { .ob-zus__block h3 button:hover { border-color: var(--gruen-700); background: var(--gruen-50); } }
.ob-zus__block dl { display: grid; margin-top: var(--a-3); }
.ob-zus__zeile { display: grid; gap: .15rem var(--a-5); padding-block: .6rem; border-top: 1px solid var(--linie); font-size: var(--fs-klein); }
@media (min-width: 40rem) { .ob-zus__zeile { grid-template-columns: 12rem minmax(0, 1fr); } }
.ob-zus__zeile dt { color: var(--tinte-3); }
.ob-zus__zeile dd { margin: 0; color: var(--tinte); white-space: pre-line; overflow-wrap: anywhere; }

.ob-kosten { display: grid; gap: var(--a-4); }
.ob-rechnung { padding: var(--a-5); border-radius: var(--r); background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); }
.ob-rechnung h3 { font-size: 1.2rem; color: var(--gruen-950); margin-bottom: var(--a-2); }
.ob-rechnung__zeile { display: flex; justify-content: space-between; gap: var(--a-4); padding-block: .55rem; border-top: 1px solid var(--linie); font-size: var(--fs-klein); color: var(--tinte-2); }
.ob-rechnung__wert { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinte); }
.ob-rechnung__summe { border-top-color: var(--linie-stark); font-weight: 700; color: var(--tinte); font-size: 1rem; }
.ob-anzahlung { display: grid; gap: var(--a-4); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: var(--r); background: var(--gruen-900); color: var(--hell); }
.ob-anzahlung__titel { font-family: var(--schrift-titel); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.ob-anzahlung__teile { display: grid; gap: var(--a-4); }
@media (min-width: 36rem) { .ob-anzahlung__teile { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-5); } }
.ob-anzahlung__teil { display: flex; flex-wrap: wrap; align-items: baseline; align-content: start; gap: .35rem .6rem; }
.ob-anzahlung__wann { flex: 1 0 100%; max-width: 16rem; font-size: var(--fs-mini); color: var(--hell-3); line-height: 1.4; }
.ob-anzahlung__betrag { font-family: var(--schrift-titel); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--hell); }
.ob-anzahlung__anteil { position: relative; top: -.35em; padding: .1rem .55rem; border-radius: 999px; background: rgba(246, 245, 239, .12); font-size: var(--fs-mini); font-weight: 650; color: var(--hell-2); }
.ob-anzahlung__teil--jetzt .ob-anzahlung__betrag { color: var(--gold); }
.ob-anzahlung__teil--jetzt .ob-anzahlung__anteil { background: var(--gold); color: var(--gruen-950); }
.ob-anzahlung__balken { display: flex; height: .5rem; border-radius: 999px; overflow: hidden; background: rgba(143, 232, 194, .35); }
.ob-anzahlung__balken i { width: 30%; background: var(--gold); border-right: 2px solid var(--gruen-900); }
.ob-anzahlung__satz { font-size: var(--fs-klein); color: var(--hell-2); max-width: 40em; }
.ob-status:empty { display: none; }

.ob-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3); margin-top: var(--a-4); padding-top: var(--a-5); border-top: 1px solid var(--linie); }
.ob-nav__weiter { margin-left: auto; }
.ob-nav__zurueck .i { margin-right: -.1em; margin-left: -.2em; }
.ueberspringen.ob-nav__ueberspringen {
  min-height: 2.75rem; padding: .5rem .8rem; border: 0; background: none; cursor: pointer;
  color: var(--tinte-3); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
@media (hover: hover) and (pointer: fine) { .ueberspringen.ob-nav__ueberspringen:hover { color: var(--tinte); } }
@media (max-width: 30rem) {
  .ob-nav__weiter { order: -1; flex: 1 1 100%; }
  .ob-nav__zurueck { flex: 1 1 auto; }
}

.ob-fertig { display: grid; gap: var(--a-5); justify-items: start; padding: clamp(1.75rem, 1rem + 3vw, 4rem); border-radius: var(--r); background: var(--gruen-900); color: var(--hell); }
.ob-fertig h2 { font-size: var(--fs-1); font-stretch: 90%; color: var(--hell); letter-spacing: -.035em; }
.ob-fertig h2:focus { outline: none; }
.ob-fertig > p { font-size: var(--fs-lead); color: var(--hell-2); max-width: 34em; }
.ob-fertig__haken { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--minze); color: var(--gruen-950); }
.ob-fertig__haken .i { width: 1.75rem; height: 1.75rem; }
.ob-fertig__knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-3); }
.ob-fertig :focus-visible { outline-color: var(--minze); }
@media (prefers-reduced-motion: no-preference) {
  .ob-schritt.aktiv .ob-fertig__haken path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: ob-strich .6s var(--aus) .25s forwards; }
}
@keyframes ob-strich { to { stroke-dashoffset: 0; } }

.ob-rand { display: grid; gap: var(--a-5); }
.ob-rand__titel { font-size: var(--fs-mini); font-weight: 650; color: var(--tinte-3); margin-bottom: var(--a-2); }
.ob-wegliste ol { display: grid; }
.ob-weg > button, .ob-weg__zeile {
  display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 2.35rem; padding: .2rem 0;
  border: 0; background: none; font: inherit; font-size: var(--fs-klein); text-align: left; color: var(--tinte-3);
}
.ob-weg > button { cursor: pointer; color: var(--tinte-2); }
.ob-weg__nr {
  display: grid; place-items: center; flex: none; width: 1.55rem; height: 1.55rem; border-radius: 50%;
  border: 1px solid var(--linie-stark); font-size: .75rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--tinte-3);
}
.ob-weg__nr .i { width: .85rem; height: .85rem; stroke-width: 2.6; }
.ob-weg--erledigt .ob-weg__nr { background: var(--gruen-100); border-color: transparent; color: var(--gruen-700); }
.ob-weg--jetzt .ob-weg__zeile { color: var(--gruen-950); font-weight: 650; }
.ob-weg--jetzt .ob-weg__nr { background: var(--gruen-900); border-color: var(--gruen-900); color: var(--hell); }
@media (hover: hover) and (pointer: fine) { .ob-weg > button:hover { color: var(--gruen-700); } .ob-weg > button:hover span:last-child { text-decoration: underline; text-underline-offset: .2em; } }
.ob-stand { padding: var(--a-5); border-radius: var(--r); background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); }
.ob-stand__liste { display: grid; }
.ob-stand__liste > div { display: flex; justify-content: space-between; gap: var(--a-3); padding-block: .5rem; border-top: 1px solid var(--linie); font-size: var(--fs-klein); }
.ob-stand__liste > div:first-child { border-top: 0; font-weight: 700; }
.ob-stand__liste dt { color: var(--tinte-2); }
.ob-stand__liste > div:first-child dt { color: var(--tinte); }
.ob-stand__liste dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 650; }
.ob-stand__teil { padding-left: .75rem !important; }
.ob-stand__teil dt { font-size: var(--fs-mini); line-height: 1.35; }
.ob-stand__liste dd[data-stand-anzahlung] { color: var(--gold-tief); }
.ob-stand__notiz { margin-top: var(--a-3); font-size: var(--fs-mini); color: var(--tinte-3); }


#inhalt:has([data-ruhig]) :is(.krumen, .seitenkopf__titel, .seitenkopf__lead) { animation: none !important; }

.fkopf { display: grid; justify-items: start; margin-bottom: clamp(3.5rem, 2rem + 5vw, 7rem); }
.fkopf .seitenkopf__titel { max-width: 16ch; text-wrap: balance; }
.fkopf__text { max-width: 36em; margin-top: var(--a-5); font-size: var(--fs-lead); line-height: 1.55; color: var(--tinte-2); text-wrap: pretty; }

.stufen { position: relative; background: var(--weiss); }
main > .stufen:first-child { margin-top: calc(-1 * var(--kopf-h) - 1px); padding-top: calc(var(--kopf-h) + 1px); }
.stufen-nav { position: fixed; z-index: 60; left: 50%; bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); translate: -50% 0;
  display: flex; max-width: calc(100% - 1.5rem); padding: 1px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .44));
  -webkit-backdrop-filter: blur(16px) saturate(1.9) brightness(1.05); backdrop-filter: blur(16px) saturate(1.9) brightness(1.05);
  box-shadow: 0 0 0 .5px rgba(7, 36, 27, .12), 0 18px 40px -16px rgba(7, 36, 27, .42), 0 4px 12px -4px rgba(7, 36, 27, .14);
  transition: translate .45s var(--aus), opacity .3s var(--aus), visibility 0s linear 0s; }
.stufen-nav::before, .stufen-nav::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.stufen-nav::before { background: radial-gradient(130% 100% at 50% -40%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 62%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .45), inset 0 0 8px 1px rgba(255, 255, 255, .4),
    inset 0 -12px 18px -14px rgba(7, 36, 27, .22); }
.stufen-nav::after { padding: 1px;
  background: linear-gradient(172deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .3) 32%, rgba(255, 255, 255, .06) 52%, rgba(255, 255, 255, .3) 74%, rgba(255, 255, 255, .85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.stufen-nav.ist-fluessig { background: linear-gradient(180deg, rgba(255, 255, 255, .52), rgba(255, 255, 255, .38));
  -webkit-backdrop-filter: blur(6px) url(#stufen-glas) saturate(1.8) brightness(1.08); backdrop-filter: blur(6px) url(#stufen-glas) saturate(1.8) brightness(1.08); }
@media (prefers-reduced-transparency: reduce) {
  .stufen-nav, .stufen-nav.ist-fluessig { background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.stufen-nav.ist-weg { translate: -50% calc(100% + 1.5rem); opacity: 0; visibility: hidden; pointer-events: none;
  transition: translate .45s var(--aus), opacity .3s var(--aus), visibility 0s linear .45s; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .stufen-nav { background: rgba(255, 255, 255, .96); } }
.stufen-nav__wahl { position: relative; isolation: isolate; display: flex; max-width: 100%; padding: .3rem; }
.stufen-nav a { position: relative; z-index: 1; padding: .6rem 1.15rem; border-radius: 999px; color: var(--tinte-2); font-size: var(--fs-klein); font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  touch-action: manipulation; transition: color .3s var(--aus), scale .2s var(--aus); }
.stufen-nav a:active { scale: .95; }
.stufen-nav a[aria-current="true"] { color: #fff; }
.stufen-nav:not(.hat-marke) a[aria-current="true"] { background: var(--gruen-900); }
.stufen-nav__marke { position: absolute; z-index: 0; top: .3rem; bottom: .3rem; left: 0; width: var(--b, 0); translate: var(--x, 0) 0; border-radius: 999px;
  background: var(--gruen-900); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 6px 14px -8px rgba(7, 36, 27, .7); opacity: 0; }
.stufen-nav.hat-marke .stufen-nav__marke { opacity: 1; }
.stufen-nav[data-stufe="2"] .stufen-nav__marke { background: var(--gold-tief); }
.stufen-nav[data-stufe="3"] .stufen-nav__marke { background: var(--tinte); }
@media (prefers-reduced-motion: no-preference) {
  .stufen-nav.gleitet .stufen-nav__marke { transition: translate .42s var(--aus), width .42s var(--aus), background-color .3s var(--aus); }
}
@media (prefers-reduced-motion: reduce) { .stufen-nav, .stufen-nav.ist-weg { transition: opacity .15s linear, visibility 0s linear .15s; translate: -50% 0; } }
@media (hover: hover) and (pointer: fine) { .stufen-nav a:not([aria-current="true"]):hover { color: var(--tinte); } }
@media (max-width: 34rem) {
  .stufen-nav { width: calc(100% - 1.5rem); }
  .stufen-nav__ab { display: none; }
  .stufen-nav__wahl { width: 100%; }
  .stufen-nav a { flex: 1 1 auto; padding: .65rem .3rem; text-align: center; font-size: clamp(.8rem, 4.2vw, var(--fs-klein)); }
}
@media (max-width: 22.4rem) { .stufen-nav { width: calc(100% - 1rem); } .stufen-nav a { padding-inline: .2rem; } }

.stufe { --s-a: var(--gruen-700); --s-b: #1E8F62; padding-top: clamp(5rem, 3rem + 7vw, 10rem); }
.stufen > .stufe:first-of-type { padding-top: clamp(3rem, 2rem + 3.5vw, 5.5rem); }
.stufe:last-child { padding-bottom: clamp(5rem, 3rem + 7vw, 10rem); }
.stufe--premium { --s-a: var(--gold-tief); --s-b: #A87A28; }
.stufe--zusatz { --s-a: var(--tinte-2); --s-b: var(--tinte-3); }
.stufe__kopf { display: grid; justify-items: start; margin-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
.stufe__titel { font-size: clamp(2.9rem, 1.5rem + 5.6vw, 5.75rem); line-height: .98; letter-spacing: -.04em; color: var(--gruen-950); text-wrap: balance; }
.stufe__name { background: linear-gradient(100deg, var(--s-a), var(--s-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stufe__text { max-width: 34em; margin-top: var(--a-5); font-size: var(--fs-lead); line-height: 1.55; color: var(--tinte-2); text-wrap: pretty; }
.stufenleiste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; width: min(100%, 31rem); margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
.stufenleiste li { position: relative; display: grid; gap: .1rem; padding-top: 1.05rem; font-size: var(--fs-klein); line-height: 1.3; }
.stufenleiste li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .42rem; border-radius: 999px; background: var(--flaeche); }
.stufenleiste .ist-drin::before { background: linear-gradient(90deg, var(--s-a), var(--s-b)); }
.stufenleiste b { font-weight: 650; color: var(--tinte); }
.stufenleiste span { font-size: var(--fs-mini); color: var(--tinte-3); }
.stufenleiste .ist-aus b { font-weight: 500; color: var(--tinte-3); }

.vorstellungen { display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.5rem); }
.vorstellung { display: grid; justify-items: center; min-width: 0; overflow: hidden; text-align: center;
  padding: clamp(2.75rem, 1.5rem + 4.5vw, 5.5rem) clamp(1.1rem, .25rem + 3.6vw, 4.5rem) clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
  border-radius: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); background: var(--papier); }
.vorstellung__kopf { display: grid; justify-items: center; max-width: 40rem; }
.vorstellung__titel { font-size: clamp(1.9rem, 1.25rem + 2.6vw, 3.4rem); line-height: 1.03; letter-spacing: -.035em; color: var(--gruen-950); text-wrap: balance; }
.vorstellung__satz { margin-top: var(--a-4); font-size: var(--fs-lead); line-height: 1.55; color: var(--tinte-2); text-wrap: pretty; }
.vorstellung__bild { width: min(100%, 40rem); min-width: 0; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.vorstellung__bild--breit { width: min(100%, 62rem); }
.vorstellung__notiz { margin-top: var(--a-3); max-width: 30em; color: var(--tinte-2); }
.vorstellungen + .kacheln, .kacheln + .vorstellung { margin-top: clamp(1rem, .6rem + 1.2vw, 1.5rem); }

.vorstellung--reihe { justify-items: stretch; text-align: left; }
.vorstellung--reihe .vorstellung__kopf { justify-items: start; max-width: 34rem; }
.vorstellung--reihe .vorstellung__bild { justify-self: center; }
.vorstellung--reihe .paketmarke { justify-self: start; }
@media (min-width: 62rem) {
  .vorstellung--reihe { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: ". bild" "kopf bild" "nutzen bild" "marke bild" ". bild"; column-gap: clamp(2.5rem, -1rem + 5vw, 5rem);
    padding: clamp(3rem, 1rem + 3.5vw, 5rem); }
  .vorstellung--bild-links { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas: "bild ." "bild kopf" "bild nutzen" "bild marke" "bild ."; }
  .vorstellung--reihe .vorstellung__kopf { grid-area: kopf; }
  .vorstellung--reihe .vorstellung__bild { grid-area: bild; align-self: center; width: 100%; margin-top: 0; }
  .vorstellung--reihe .nutzen { grid-area: nutzen; }
  .vorstellung--reihe .paketmarke { grid-area: marke; }
  .vorstellung--reihe .vorstellung__titel { font-size: clamp(2rem, 1rem + 1.8vw, 3rem); }
}

.nutzen { display: grid; gap: 1.5rem 2.5rem; width: min(100%, 60rem); margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); }
.nutzen li { position: relative; padding-top: 2.15rem; font-weight: 560; color: var(--tinte); line-height: 1.45; text-wrap: balance; }
.nutzen li strong { font-weight: 700; }
.nutzen li::before {
  content: ""; position: absolute; left: 50%; top: 0; translate: -50% 0; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--gruen-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8.2'/%3E%3C/svg%3E") center / 70% no-repeat;
}
@media (min-width: 48rem) {
  .nutzen--reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nutzen--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 46rem); }
}
@media (min-width: 72rem) { .nutzen--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 64rem); } }
.nutzen--liste { gap: .85rem; width: 100%; max-width: 34rem; margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.nutzen--liste li { padding: 0 0 0 2.25rem; text-wrap: pretty; }
.nutzen--liste li::before { left: 0; top: .02em; translate: none; }

.vorstellung--wald { background: var(--gruen-900); }
.vorstellung--wald :is(.vorstellung__titel, h4) { color: var(--hell); }
.vorstellung--wald :is(.vorstellung__satz, p) { color: var(--hell-2); }
.postfach__drei { display: grid; gap: 2rem 3rem; width: min(100%, 62rem); margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.postfach__drei h4 { font-family: var(--schrift-titel); font-size: var(--fs-3); line-height: 1.15; letter-spacing: -.02em; }
.postfach__drei p { max-width: 30em; margin: var(--a-3) auto 0; }
@media (min-width: 60rem) { .postfach__drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vorstellung--bonus { background: radial-gradient(70% 45% at 50% 52%, rgba(242, 193, 78, .2), transparent 70%), linear-gradient(180deg, var(--gold-flaeche), var(--papier) 70%); }

.paketmarke { display: inline-flex; align-items: center; gap: .5rem; margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); padding: .38rem .95rem .38rem .8rem; border-radius: 999px;
  font-size: var(--fs-mini); font-weight: 650; line-height: 1.3; background: var(--weiss); color: var(--tinte-2); }
.paketmarke::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.paketmarke--business { background: var(--gruen-100); color: var(--gruen-800); }
.paketmarke--premium { background: var(--gold-hell); color: var(--gold-tief); }
.paketmarke--bonus { background: var(--gruen-950); color: #F2C14E; box-shadow: 0 8px 22px -10px rgba(200, 155, 60, .9); }
.paketmarke--zusatz { background: transparent; color: var(--tinte-2); box-shadow: inset 0 0 0 1px var(--linie-stark); }
.vorstellung--wald .paketmarke--business { background: rgba(143, 232, 194, .14); color: var(--minze); }

.kacheln { display: grid; grid-auto-flow: dense; gap: clamp(1rem, .6rem + 1.2vw, 1.5rem); }
.kachel { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; border-radius: clamp(1.5rem, 1rem + 1vw, 2rem); background: var(--papier); }
.kachel__bild { position: relative; display: grid; place-items: center; min-height: 14.5rem; padding: 2rem 1.5rem 1.25rem; overflow: hidden; }
.kachel__bild > .ill { width: min(100%, 24rem); }
@media (min-width: 40rem) { :is(.kachel--3, .kachel--4) .kachel__bild > .ill { width: min(100%, 31rem); } }
@media (min-width: 40rem) and (max-width: 63.99rem) { .kachel--2:last-child:nth-child(odd) .kachel__bild > .ill { width: min(100%, 31rem); } }
.kachel__text { display: grid; grid-template-rows: auto auto 1fr; justify-items: start; gap: var(--a-2); padding: .25rem 1.6rem 1.75rem; }
.kachel__titel { font-size: var(--fs-3); line-height: 1.15; letter-spacing: -.02em; color: var(--gruen-950); text-wrap: balance; }
.kachel__text p { max-width: 30em; color: var(--tinte-2); font-size: var(--fs-klein); line-height: 1.55; text-wrap: pretty; }
.kachel__text p strong { color: var(--tinte); font-weight: 650; }
.kachel .paketmarke { align-self: end; margin-top: var(--a-3); }
@media (min-width: 40rem) {
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel--3, .kachel--4 { grid-column: span 2; }
  .kachel--3 .kachel__bild, .kachel--4 .kachel__bild { min-height: 15rem; }
  .kachel--2:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 64rem) {
  .kacheln { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kachel--2, .kachel--2:last-child:nth-child(odd) { grid-column: span 2; }
  .kachel--3 { grid-column: span 3; }
  .kachel--4 { grid-column: span 4; }
}
.zusaetze__mehr { max-width: 40em; margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); color: var(--tinte-2); text-wrap: pretty; }

@media (max-width: 39.99rem) {
  .vorstellungen, .kacheln, .vorstellungen + .kacheln, .kacheln + .vorstellung { gap: 0; margin-top: 0; }
  .vorstellung:not(.vorstellung--wald, .vorstellung--bonus), .kachel { overflow: visible; border-radius: 0; background: none; padding-inline: 0; }
  .vorstellung:not(.vorstellung--wald, .vorstellung--bonus) { padding-block: 3.25rem; }
  .kachel__bild { padding: 2.75rem 0 1.25rem; }
  .kachel__text { padding: .25rem 0 2.75rem; }
  :is(.vorstellungen, .kacheln) > * + *, .vorstellungen + .kacheln > :first-child, .kacheln + .vorstellung { box-shadow: 0 -1px 0 var(--linie); }
  .vorstellung--wald, .vorstellung--bonus { margin-inline: calc(-1 * var(--rand)); border-radius: 0; box-shadow: none !important; }
  .stufe__kopf { margin-bottom: 1rem; }
  :is(.vorstellung:not(.vorstellung--wald, .vorstellung--bonus), .kachel) :is(.f-karte, .f-bon, .f-handy, .f-blase--wa, .f-blase--kunde, .f-adresse) { outline: 1px solid var(--linie); outline-offset: -1px; }
  .paketmarke--alle { background: var(--flaeche); }
}

.ill { --s1: #8FE8C2; --s2: #45D19A; --s3: #F2C14E; --s-deckung: .62;
  position: relative; isolation: isolate; container-type: inline-size; }
.ill--schein-kuehl { --s1: #C9F2DF; --s2: #8FE8C2; --s3: #2FBF86; }
.ill--schein-warm { --s1: #F2C14E; --s2: #F4D58A; --s3: #8FE8C2; }
.ill--schein-gold { --s1: #8FE8C2; --s2: #F2C14E; --s3: #E4A23A; --s-deckung: .7; }
.ill--schein-nacht { --s1: #8FE8C2; --s2: #2FBF86; --s3: #E4B04A; --s-deckung: .55; }
.ill__schein { position: absolute; z-index: -1; inset: 6% 3%; border-radius: 42%; pointer-events: none;
  background: linear-gradient(125deg, var(--s1) 8%, var(--s2) 55%, var(--s3) 100%);
  filter: blur(clamp(30px, 4.6vw, 76px)); opacity: var(--s-deckung); }
.ill__flaeche { position: relative; font-size: clamp(10.5px, 2.45cqi, 14.5px); line-height: 1.4; color: var(--tinte); text-align: left; }
.kachel .ill__flaeche { font-size: clamp(11px, 3.75cqi, 16px); }
.vorstellung--reihe .ill__flaeche { font-size: clamp(11.5px, 3.3cqi, 15.5px); }
@media (max-width: 61.99rem) { .vorstellung--reihe .ill--editor .ill__flaeche { font-size: clamp(10.5px, 3.3cqi, 15.5px); } }
@media (min-width: 62rem) { .vorstellung--reihe .ill__flaeche { font-size: clamp(12px, 3.05cqi, 19px); } }
.ill .f-i { width: 1.15em; height: 1.15em; flex: none; }
.ill b, .ill strong { font-weight: 650; }
.ill time, .ill .f-zahl { font-variant-numeric: tabular-nums; }

.f-karte { background: #fff; border-radius: 1.1em;
  box-shadow: 0 1px 2px rgba(7, 36, 27, .06), 0 1.3em 2.6em -1.2em rgba(7, 36, 27, .32); }
.f-glas { background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 1px 1px rgba(7, 36, 27, .05), 0 1em 2.4em -.9em rgba(7, 36, 27, .38); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .f-glas { background: rgba(255, 255, 255, .92); } }
.f-kopf { display: flex; align-items: center; gap: .45em; margin-bottom: .55em; font-size: .78em; font-weight: 650; color: var(--tinte-3); }
.f-kopf .f-i { color: var(--gruen-700); }
.f-knopf { display: inline-flex; align-items: center; padding: .5em 1em; border-radius: 999px; background: var(--gruen-700); color: #fff; font-size: .84em; font-weight: 600; white-space: nowrap; }
.f-knopf--leise { background: transparent; color: var(--tinte-2); box-shadow: inset 0 0 0 1px var(--linie-stark); }
.f-sterne { display: inline-flex; gap: .08em; vertical-align: -.12em; }
.f-sterne svg { width: .95em; height: .95em; fill: #E0A42B; }
.f-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; background: var(--gruen-700); vertical-align: -.2em; opacity: 0; }
.f-tippen { display: inline-block; white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  html.js .ill:not(.ill--an) :is(*, *::before, *::after) { animation-play-state: paused !important; }
}

.f-mitt { position: absolute; z-index: 2; width: 19.5em; display: grid; grid-template-columns: 2.35em minmax(0, 1fr); gap: .75em; align-items: start;
  padding: .8em .95em .85em .8em; border-radius: 1.3em; }
.f-mitt__app { display: grid; place-items: center; width: 2.35em; height: 2.35em; border-radius: .62em; background: var(--gruen-800); color: var(--minze); }
.f-mitt__zeichen { width: 1.35em; height: auto; }
.f-mitt__text { display: grid; gap: .12em; font-size: .92em; line-height: 1.32; color: var(--tinte-2); }
.f-mitt__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; }
.f-mitt__kopf b { color: var(--tinte); }
.f-mitt__kopf time { flex: none; font-size: .86em; color: var(--tinte-3); }

.ill--editor .ill__flaeche { padding-bottom: 2.4em; }
.f-browser { overflow: hidden; }
.f-browser__leiste { display: flex; align-items: center; gap: .42em; padding: .7em .9em; background: #F1F1EC; box-shadow: inset 0 -1px 0 var(--linie); }
.f-browser__leiste > i { width: .7em; height: .7em; border-radius: 50%; background: #D7D8D1; }
.f-adresse { display: inline-flex; align-items: center; gap: .4em; margin: 0 auto; padding: .28em .95em; border-radius: 999px; background: #fff; font-size: .84em; color: var(--tinte-2); }
.f-adresse .f-i { width: .95em; height: .95em; color: var(--gruen-700); }
.f-site { padding: 1.1em 1.6em 1.6em; background: #FBF3E8; color: #3B2A1C; }
.f-site__nav { display: flex; align-items: center; gap: 1.2em; font-size: .84em; color: #6B5A48; }
.f-site__nav b { margin-right: auto; font-family: var(--schrift-titel); font-size: 1.18em; letter-spacing: -.02em; color: #3B2A1C; }
.f-site__held { display: grid; justify-items: start; gap: .9em; padding: 2.6em 0 1.7em; }
.f-edit { position: relative; display: grid; font: 700 1.72em/1.1 var(--schrift-titel); font-size: min(1.72em, 6cqi); letter-spacing: -.028em; white-space: nowrap; }
.f-edit > span:not(.f-werkzeug) { grid-area: 1 / 1; }
.f-edit::before { content: ""; position: absolute; inset: -.22em -.32em; border-radius: .28em; box-shadow: 0 0 0 2px var(--gruen-600), 0 0 0 .3em rgba(143, 232, 194, .45); opacity: 0; }
.f-edit__alt { opacity: 0; border-radius: .1em; }
.f-edit__caret { position: absolute; left: 100%; top: .04em; width: 2px; height: 1.02em; background: var(--gruen-700); opacity: 0; }
.f-werkzeug { position: absolute; left: -.3em; bottom: calc(100% + .55em); display: flex; align-items: center; gap: .75em; padding: .5em .8em; border-radius: .7em;
  font: 600 .42em/1 var(--schrift-text); letter-spacing: 0; color: var(--tinte); opacity: 0; }
.f-werkzeug i { font-family: Georgia, serif; }
.f-werkzeug__ki { display: inline-flex; align-items: center; gap: .35em; padding-left: .75em; box-shadow: -1px 0 0 var(--linie-stark); color: var(--gruen-700); }
.f-site__satz { max-width: 26em; font-size: .9em; color: #6B5A48; }
.f-site__knopf { padding: .55em 1.15em; border-radius: 999px; background: #3B2A1C; color: #FBF3E8; font-size: .82em; font-weight: 600; }
.f-site__reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }
.f-site__reihe div { display: grid; gap: .1em; padding: .7em .85em; border-radius: .7em; background: #fff; font-size: .84em; }
.f-site__reihe b { font-family: var(--schrift-titel); letter-spacing: -.01em; }
.f-site__reihe span { color: #8A6420; }
.f-toast { position: absolute; left: 0; right: 0; bottom: 0; width: max-content; max-width: 92%; margin-inline: auto; display: flex; align-items: center; gap: .6em; padding: .7em 1.2em .7em .75em; border-radius: 999px; font-size: .96em; color: var(--tinte-2); }
.f-toast b { color: var(--tinte); }
.f-toast__haken.f-i { width: 1.55em; height: 1.55em; padding: .28em; border-radius: 50%; background: var(--gruen-700); color: #fff; stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--editor .f-edit::before { animation: ed-rahmen 10s linear infinite both; }
  html.js .ill--editor .f-edit__alt { animation: ed-alt 10s linear infinite both; }
  html.js .ill--editor .f-edit__neu { animation: ed-neu 10s linear infinite both; }
  html.js .ill--editor .f-edit__caret { animation: ed-caret 10s linear infinite both; }
  html.js .ill--editor .f-werkzeug { animation: ed-werkzeug 10s var(--aus) infinite both; }
  html.js .ill--editor .f-toast { animation: ed-toast 10s var(--aus) infinite both; }
}
@keyframes ed-rahmen { 0%, 9% { opacity: 0; } 12%, 56% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes ed-alt { 0%, 13% { opacity: 1; background-color: transparent; } 15%, 19% { opacity: 1; background-color: rgba(143, 232, 194, .6); } 20%, 94% { opacity: 0; background-color: transparent; } 98%, 100% { opacity: 1; } }
@keyframes ed-neu { 0%, 20% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(31, end); } 50%, 92% { opacity: 1; clip-path: inset(0 0 0 0); } 96%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes ed-caret { 0%, 19% { opacity: 0; left: 0; } 20% { opacity: 1; left: 0; animation-timing-function: steps(31, end); } 50% { opacity: 1; left: 100%; } 53% { opacity: 0; } 55% { opacity: 1; } 58%, 100% { opacity: 0; left: 100%; } }
@keyframes ed-werkzeug { 0%, 11% { opacity: 0; translate: 0 .5em; } 15%, 52% { opacity: 1; translate: 0 0; } 56%, 100% { opacity: 0; translate: 0 .3em; } }
@keyframes ed-toast { 0%, 57% { opacity: 0; translate: 0 1em; scale: .96; } 61%, 89% { opacity: 1; translate: 0 0; scale: 1; } 94%, 100% { opacity: 0; translate: 0 .4em; } }

.ill--schreibhilfe .ill__flaeche { display: grid; justify-items: center; gap: 1em; padding-block: .8em; }
.f-notiz { width: 78%; padding: 1em 1.2em 1.1em; background: #FFFCF3; }
.f-notiz p { font-size: 1.04em; color: var(--tinte-2); }
.f-zauber { justify-self: center; }
.f-zauber__knopf { position: relative; display: inline-flex; align-items: center; gap: .45em; padding: .62em 1.2em; overflow: hidden; border-radius: 999px;
  background: var(--gruen-900); color: #fff; font-weight: 650; font-size: .96em; box-shadow: 0 .7em 1.6em -.6em rgba(18, 101, 75, .75); }
.f-zauber__knopf .f-i { color: var(--minze); }
.f-zauber__knopf::after { content: ""; position: absolute; inset: 0; translate: -120% 0; background: linear-gradient(100deg, transparent 20%, rgba(143, 232, 194, .55) 50%, transparent 80%); }
.f-ergebnis { position: relative; width: 94%; padding: 1.1em 1.3em 1.2em; }
.f-ergebnis::before { content: ""; position: absolute; z-index: -1; inset: -2px; border-radius: calc(1.1em + 2px);
  background: linear-gradient(120deg, var(--minze), #45D19A 45%, #F2C14E); }
.f-ergebnis p { font-size: 1.06em; line-height: 1.5; color: var(--tinte); }
.f-wort { display: inline-block; }
.f-chips { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .9em; }
.f-chips span { padding: .28em .75em; border-radius: 999px; background: var(--flaeche); font-size: .8em; color: var(--tinte-2); }
.f-chips .ist-an { background: var(--gruen-900); color: #fff; }
.f-knoepfe { display: flex; gap: .5em; margin-top: .8em; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--schreibhilfe .f-zauber__knopf { animation: sh-knopf 9s var(--aus) infinite both; }
  html.js .ill--schreibhilfe .f-zauber__knopf::after { animation: sh-glanz 9s ease-in-out infinite both; }
  html.js .ill--schreibhilfe .f-wort { animation: sh-wort 9s var(--aus) calc(var(--i) * 55ms) infinite both; }
  html.js .ill--schreibhilfe .f-ergebnis::before { animation: sh-rand 9s ease-in-out infinite both; }
}
@keyframes sh-knopf { 0%, 10% { scale: 1; } 13% { scale: .95; } 17%, 100% { scale: 1; } }
@keyframes sh-glanz { 0%, 13% { translate: -120% 0; } 30%, 100% { translate: 120% 0; } }
@keyframes sh-wort { 0%, 18% { opacity: 0; translate: 0 .35em; } 30%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }
@keyframes sh-rand { 0%, 16% { opacity: .25; } 30%, 88% { opacity: 1; } 100% { opacity: .25; } }

.f-preise { display: grid; gap: .55em; padding: 1.1em 1.25em 1.2em; }
.f-preise__titel { font: 700 1.2em/1.1 var(--schrift-titel); letter-spacing: -.02em; color: var(--gruen-950); margin-bottom: .2em; }
.f-preise div { display: flex; align-items: baseline; gap: .5em; font-size: .95em; }
.f-preise i { flex: 1; border-bottom: 1.5px dotted var(--linie-stark); translate: 0 -.25em; }
.f-preise b { color: var(--gruen-800); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { html.js .ill--karte .f-preise div { animation: zeile-hell 8s ease-in-out infinite both; animation-delay: calc(var(--n, 0) * 1s); } }
.ill--karte .f-preise div:nth-of-type(2) { --n: 1; }
.ill--karte .f-preise div:nth-of-type(3) { --n: 2; }
.ill--karte .f-preise div:nth-of-type(4) { --n: 3; }
@keyframes zeile-hell { 0%, 100% { background: transparent; border-radius: .2em; } 8%, 14% { background: var(--gruen-50); box-shadow: 0 0 0 .35em var(--gruen-50); border-radius: .2em; } 22% { background: transparent; box-shadow: 0 0 0 .35em transparent; } }

.ill--oeffnung .ill__flaeche { overflow: hidden; border-radius: 1.1em; box-shadow: 0 1.3em 2.6em -1.2em rgba(7, 36, 27, .32); }
.f-plan { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.f-offen { position: absolute; left: .9em; top: .9em; display: flex; align-items: center; gap: .5em; padding: .5em .9em .5em .7em; border-radius: 999px; font-size: .9em; }
.f-offen span:last-child { color: var(--tinte-3); }
.f-offen__punkt { width: .6em; height: .6em; border-radius: 50%; background: #2FBF86; box-shadow: 0 0 0 .22em rgba(47, 191, 134, .25); }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--oeffnung .f-plan__route { animation: route 3.2s linear infinite; }
  html.js .ill--oeffnung .f-plan__puls { animation: puls 2.4s var(--aus) infinite; transform-box: fill-box; transform-origin: center; }
  html.js .ill--oeffnung .f-offen__punkt { animation: punkt 2.4s ease-in-out infinite; }
}
@keyframes route { to { stroke-dashoffset: -28; } }
@keyframes puls { 0% { scale: .4; opacity: 1; } 100% { scale: 1.6; opacity: 0; } }
@keyframes punkt { 50% { box-shadow: 0 0 0 .4em rgba(47, 191, 134, 0); } }

.ill--google .ill__flaeche { display: grid; gap: .7em; }
.f-suche, .f-adressfeld { display: flex; align-items: center; gap: .55em; padding: .7em 1.1em; border-radius: 999px; font-size: 1em; color: var(--tinte); }
.f-suche .f-i, .f-adressfeld .f-i { color: var(--tinte-3); }
.f-adressfeld .f-i { color: var(--gruen-700); }
.f-treffer { display: grid; gap: .35em; padding: 1em 1.2em 1.1em; }
.f-treffer__quelle { display: flex; align-items: center; gap: .6em; font-size: .8em; line-height: 1.25; }
.f-treffer__quelle > span:last-child { display: grid; color: var(--tinte-3); }
.f-treffer__quelle b { color: var(--tinte); font-weight: 600; }
.f-treffer__ico { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: #FBF3E8; color: #8A6420; font: 700 .95em/1 var(--schrift-titel); }
.f-treffer__titel { font-size: 1.08em; line-height: 1.25; color: #1A5FB4; font-weight: 600; }
.f-treffer__bew { font-size: .82em; color: var(--tinte-3); }
.f-treffer__bew em { font-style: normal; color: #1E8E3E; font-weight: 600; }
.f-treffer p { font-size: .84em; color: var(--tinte-2); }
@media (prefers-reduced-motion: no-preference) {
  html.js :is(.ill--google, .ill--domain) .f-tippen { animation: tippen 7s steps(16, end) infinite both; }
  html.js :is(.ill--google, .ill--domain) .f-caret { animation: caret 7s linear infinite both; }
  html.js .ill--google .f-treffer { animation: treffer 7s var(--aus) infinite both; }
}
@keyframes tippen { 0%, 6% { clip-path: inset(0 100% 0 0); } 36%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes caret { 0%, 4% { opacity: 0; } 5%, 40% { opacity: 1; } 44% { opacity: 0; } 48% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes treffer { 0%, 38% { opacity: 0; translate: 0 .8em; } 46%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }

.ill--domain .ill__flaeche { display: grid; gap: .9em; justify-items: center; }
.f-adressfeld { width: 100%; padding: .85em 1.2em; font-size: 1.12em; }
.f-sicher { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; }
.f-sicher span { display: inline-flex; align-items: center; gap: .35em; padding: .35em .8em .35em .55em; border-radius: 999px; background: rgba(255, 255, 255, .78); font-size: .82em; font-weight: 600; color: var(--gruen-800); }

.f-status { display: grid; padding: .5em 1.1em; }
.f-status div { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .62em 0; font-size: .92em; }
.f-status div + div { box-shadow: 0 -1px 0 var(--linie); }
.f-status span { color: var(--tinte-3); }
.f-status b { display: inline-flex; align-items: center; gap: .45em; }
.f-status b i { width: .55em; height: .55em; border-radius: 50%; background: #2FBF86; }
@media (prefers-reduced-motion: no-preference) { html.js .ill--technik .f-status__sicherung b i { animation: punkt-pochen 2.6s ease-in-out infinite; } }
@keyframes punkt-pochen { 50% { box-shadow: 0 0 0 .35em rgba(47, 191, 134, .22); } }

.ill--recht .ill__flaeche { padding-inline: 1.2em; }
.f-blatt { display: grid; gap: .3em; padding: 1em 1.2em 1.3em; font-size: .88em; color: var(--tinte-2); }
.f-blatt b { color: var(--tinte); margin: .3em 0 .2em; font-size: 1.05em; }
.f-blatt__reiter { display: flex; gap: .35em; }
.f-blatt__reiter span { padding: .25em .7em; border-radius: 999px; background: var(--flaeche); font-size: .9em; font-weight: 600; }
.f-blatt__reiter .ist-an { background: var(--gruen-900); color: #fff; }
.f-siegel { position: absolute; right: 0; bottom: -.6em; display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%;
  background: var(--gruen-700); color: #fff; box-shadow: 0 .6em 1.4em -.5em rgba(18, 101, 75, .7); }
.f-siegel .f-i { width: 1.7em; height: 1.7em; }

.f-zahlen { padding: 1.1em 1.2em 1em; }
.f-zahlen__kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25em .5em; }
.f-zahlen__kopf b { font: 700 1.9em/1 var(--schrift-titel); letter-spacing: -.03em; color: var(--gruen-950); }
.f-zahlen__kopf span { color: var(--tinte-3); font-size: .9em; }
.f-zahlen__kopf em { margin-left: auto; padding: .15em .6em; border-radius: 999px; background: var(--gruen-100); color: var(--gruen-800); font-style: normal; font-weight: 650; font-size: .8em; }
.f-saeulen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .55em; align-items: end; height: 7.5em; margin-top: 1em; }
.f-saeulen > span { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: .35em; }
.f-saeulen i { position: relative; align-self: end; height: calc(var(--h) * 100%); border-radius: .4em .4em .2em .2em; background: var(--gruen-100); transform-origin: bottom; }
.f-saeulen .ist-spitze i { background: var(--gruen-700); }
.f-saeulen i b { position: absolute; left: 50%; bottom: calc(100% + .3em); translate: -50% 0; padding: .1em .45em; border-radius: .35em; background: var(--gruen-950); color: #fff; font-size: .75em; font-style: normal; }
.f-saeulen small { text-align: center; font-size: .72em; color: var(--tinte-3); }
@media (prefers-reduced-motion: no-preference) { html.js .ill--statistik .f-saeulen i { animation: saeule 8s var(--aus) calc(var(--i) * 70ms) infinite both; } }
@keyframes saeule { 0%, 4% { scale: 1 0; } 18%, 92% { scale: 1 1; } 100% { scale: 1 0; } }

.f-chat { display: grid; gap: .55em; }
.f-blase { max-width: 82%; padding: .65em .95em; border-radius: 1.1em; font-size: .95em; line-height: 1.38; box-shadow: 0 .6em 1.4em -.8em rgba(7, 36, 27, .35); }
.f-blase--kunde { justify-self: start; background: #fff; border-bottom-left-radius: .35em; }
.f-blase--vokuma { justify-self: end; display: inline-flex; align-items: center; gap: .4em; background: var(--gruen-700); color: #fff; border-bottom-right-radius: .35em; }
.f-blase--tippt { justify-self: end; display: none; gap: .25em; padding: .8em .95em; background: var(--gruen-700); border-bottom-right-radius: .35em; }
.f-blase--tippt i { width: .42em; height: .42em; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.f-chat__zaehler { justify-self: end; font-size: .75em; color: var(--tinte-3); }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--chat .f-blase--tippt { display: inline-flex; grid-area: 2 / 1; animation: chat-tippt 8s linear infinite both; }
  html.js .ill--chat .f-blase--vokuma { grid-area: 2 / 1; animation: chat-antwort 8s var(--aus) infinite both; }
  html.js .ill--chat .f-blase--tippt i { animation: tupfen 1s ease-in-out infinite; }
  html.js .ill--chat .f-blase--tippt i:nth-child(2) { animation-delay: .15s; }
  html.js .ill--chat .f-blase--tippt i:nth-child(3) { animation-delay: .3s; }
}
@keyframes chat-tippt { 0%, 12% { opacity: 0; } 16%, 40% { opacity: 1; } 43%, 100% { opacity: 0; } }
@keyframes chat-antwort { 0%, 42% { opacity: 0; translate: 0 .6em; scale: .96; } 48%, 94% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; } }
@keyframes tupfen { 50% { translate: 0 -.25em; opacity: .5; } }

.f-team { display: grid; padding: .45em 1.05em; }
.f-person { display: grid; grid-template-columns: 2.3em minmax(0, 1fr) auto; align-items: center; gap: .7em; padding: .6em 0; }
.f-person + .f-person { box-shadow: 0 -1px 0 var(--linie); }
.f-person__bild { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--f); color: #fff; font-weight: 700; }
.f-person > span:nth-child(2) { display: grid; line-height: 1.25; }
.f-person small { font-size: .8em; color: var(--tinte-3); }
.f-person em { padding: .25em .7em; border-radius: 999px; background: var(--flaeche); font-style: normal; font-size: .78em; font-weight: 600; color: var(--tinte-2); white-space: nowrap; }

.f-eingang { display: grid; padding: .4em .5em; overflow: hidden; }
.f-anfrage { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: center; gap: .7em; padding: .6em .6em; border-radius: .7em; }
.f-anfrage + .f-anfrage { box-shadow: 0 -1px 0 var(--linie); }
.f-anfrage__bild { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--flaeche); color: var(--tinte-2); font-weight: 700; }
.f-anfrage > span:nth-child(2) { display: grid; min-width: 0; line-height: 1.3; }
.f-anfrage small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82em; color: var(--tinte-3); }
.f-anfrage time { align-self: start; font-size: .75em; color: var(--tinte-3); }
.f-anfrage.ist-neu b::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .4em; border-radius: 50%; background: var(--gruen-600); vertical-align: .1em; }
.f-anfrage--kommt { background: var(--gruen-50); }
@media (prefers-reduced-motion: no-preference) { html.js .ill--anfragen .f-anfrage--kommt { animation: anfrage-kommt 8s var(--aus) infinite both; } }
@keyframes anfrage-kommt { 0%, 8% { opacity: 0; translate: 0 -.8em; background-color: var(--minze); } 16% { opacity: 1; translate: 0 0; } 40%, 100% { background-color: var(--gruen-50); } }



.ill--reservierung .ill__flaeche { display: grid; justify-items: center; }
.f-buchen { width: 82%; padding: 1.25em 1.35em 1.35em; }
.f-buchen__titel { display: block; font: 700 1.3em/1.1 var(--schrift-titel); letter-spacing: -.02em; color: var(--gruen-950); }
.f-tage { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4em; margin-top: 1em; }
.f-tage span { display: grid; gap: .05em; padding: .45em 0 .5em; border-radius: .8em; background: var(--papier); text-align: center; }
.f-tage small { font-size: .72em; color: var(--tinte-3); }
.f-tage b { font-size: 1.1em; }
.f-tage .ist-an { background: var(--gruen-900); color: #fff; }
.f-tage .ist-an small { color: var(--minze); }
.f-personen { display: flex; justify-content: space-between; align-items: center; margin-top: 1em; font-size: .92em; color: var(--tinte-2); }
.f-zaehler { display: inline-flex; align-items: center; gap: .8em; color: var(--tinte); }
.f-zaehler i { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linie-stark); font-style: normal; }
.f-zeiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45em; margin-top: 1em; }
.f-zeiten span { padding: .55em 0; border-radius: .7em; box-shadow: inset 0 0 0 1px var(--linie-stark); text-align: center; font-size: .92em; font-weight: 600; font-variant-numeric: tabular-nums; }
.f-zeiten .ist-voll { background: var(--papier); box-shadow: none; color: var(--tinte-3); text-decoration: line-through; font-weight: 500; }
.f-zeiten .ist-an { background: var(--gruen-700); color: #fff; box-shadow: 0 0 0 .3em rgba(143, 232, 194, .55); }
.f-buchen__knopf { display: block; margin-top: 1.05em; padding: .75em; border-radius: 999px; background: var(--gruen-900); color: #fff; text-align: center; font-weight: 650; font-size: .95em; }
.ill--reservierung .f-mitt { position: relative; margin-top: -.9em; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--reservierung .f-zeiten .ist-an { animation: slot 9s var(--aus) infinite both; }
  html.js .ill--reservierung .f-buchen__knopf { animation: druck 9s var(--aus) infinite both; }
  html.js .ill--reservierung .f-mitt { animation: mitt-spaet 9s var(--aus) infinite both; }
}
@keyframes slot { 0%, 12% { background: #fff; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie-stark); scale: 1; }
  16% { scale: 1.08; } 20%, 92% { background: var(--gruen-700); color: #fff; box-shadow: 0 0 0 .3em rgba(143, 232, 194, .55); scale: 1; }
  100% { background: #fff; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie-stark); } }
@keyframes druck { 0%, 28% { scale: 1; } 31% { scale: .96; } 35%, 100% { scale: 1; } }
@keyframes mitt-spaet { 0%, 34% { opacity: 0; translate: 0 1em; scale: .94; } 40%, 90% { opacity: 1; translate: 0 0; scale: 1; } 96%, 100% { opacity: 0; translate: 0 -.4em; } }

.ill--bestellung .ill__flaeche { display: grid; justify-items: center; padding-top: .5em; }
.f-bon { width: 74%; padding: 1.25em 1.35em 1.35em; border-radius: .9em; background: #fff; box-shadow: 0 1px 2px rgba(7, 36, 27, .06), 0 1.3em 2.6em -1.2em rgba(7, 36, 27, .32); }
.f-bon__kopf { display: grid; gap: .15em; padding-bottom: .85em; border-bottom: 1.5px dashed var(--linie-stark); }
.f-bon__kopf b { font: 700 1.2em/1.1 var(--schrift-titel); letter-spacing: -.01em; }
.f-bon__kopf span { font-size: .8em; color: var(--tinte-3); }
.f-bon__posten { display: grid; gap: .45em; padding: .85em 0; }
.f-bon__posten div, .f-bon__summe, .f-bon__null { display: flex; justify-content: space-between; gap: 1em; }
.f-bon__posten div { font-size: .92em; }
.f-bon__posten b, .f-bon__summe b, .f-bon__null b { font-variant-numeric: tabular-nums; }
.f-bon__summe { align-items: baseline; padding-top: .75em; border-top: 1.5px dashed var(--linie-stark); }
.f-bon__summe b { font: 700 1.3em/1 var(--schrift-titel); }
.f-bon__null { align-items: center; margin-top: .8em; padding: .6em .8em; border-radius: .7em; background: var(--gold-hell); color: var(--gold-tief); font-weight: 600; font-size: .92em; }
.f-bon__null b { font: 700 1.3em/1 var(--schrift-titel); color: #6E4F12; }
.f-vergleich { position: relative; z-index: 1; margin-top: -.9em; display: grid; justify-items: center; text-align: center; gap: .15em; width: 15em; padding: .75em 1em; border-radius: 1em; font-size: .9em; }
.f-vergleich span { color: var(--tinte-3); font-size: .9em; }
.f-vergleich b { font: 700 1.5em/1 var(--schrift-titel); color: #A23E2A; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--bestellung .f-bon { animation: bon 9s var(--aus) infinite both; }
  html.js .ill--bestellung .f-bon__null { animation: null-leuchten 9s ease-out infinite both; }
  html.js .ill--bestellung .f-vergleich { animation: vergleich 9s var(--aus) infinite both; }
}
@keyframes bon { 0%, 3% { clip-path: inset(0 0 100% 0 round .9em); opacity: 1; } 26%, 94% { clip-path: inset(0 0 0 0 round .9em); opacity: 1; } 100% { clip-path: inset(0 0 0 0 round .9em); opacity: 0; } }
@keyframes null-leuchten { 0%, 28% { box-shadow: 0 0 0 0 rgba(242, 193, 78, 0); } 34% { box-shadow: 0 0 0 .45em rgba(242, 193, 78, .45); } 46%, 100% { box-shadow: 0 0 0 .2em rgba(242, 193, 78, .25); } }
@keyframes vergleich { 0%, 38% { opacity: 0; translate: 0 .8em; } 46%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }

.ill--qr .ill__flaeche { display: flex; justify-content: center; align-items: center; gap: 1.6em; padding-block: 1em; }
.f-aufsteller { display: grid; justify-items: center; gap: .25em; width: 38%; padding: 1.1em 1.1em 1.25em; }
.f-aufsteller__code { position: relative; width: 100%; aspect-ratio: 1; padding: .5em; overflow: hidden; border-radius: .6em; box-shadow: inset 0 0 0 1px var(--linie); color: var(--gruen-950); }
.f-aufsteller__code svg { width: 100%; height: 100%; }
.f-aufsteller b { margin-top: .4em; font: 700 1.3em/1 var(--schrift-titel); }
.f-aufsteller > span:last-child { font-size: .8em; color: var(--tinte-3); text-align: center; }
.f-scan { position: absolute; left: 4%; right: 4%; top: 12%; height: 2px; border-radius: 2px; background: var(--minze); box-shadow: 0 0 .7em .2em rgba(143, 232, 194, .9); opacity: 0; }
.f-handy { display: grid; gap: .7em; width: 42%; padding: 1.4em .95em 1em; border-radius: 1.6em; background: #fff;
  box-shadow: 0 0 0 .42em #121614, 0 0 0 .5em #3A3F3C, 0 1.6em 3em -1em rgba(7, 36, 27, .45); }
.f-handy__kopf { display: flex; justify-content: space-between; align-items: center; gap: .5em; }
.f-handy__kopf b { font: 700 1.1em/1 var(--schrift-titel); }
.f-handy__kopf span { padding: .2em .6em; border-radius: 999px; background: var(--gruen-50); color: var(--gruen-800); font-size: .72em; font-weight: 650; white-space: nowrap; }
.f-handy__liste div { display: flex; justify-content: space-between; align-items: center; gap: .5em; padding: .5em 0; box-shadow: 0 -1px 0 var(--linie); }
.f-handy__liste span { display: grid; line-height: 1.25; }
.f-handy__liste b { font-size: .88em; }
.f-handy__liste small { font-size: .76em; color: var(--tinte-3); }
.f-handy__liste i { display: grid; place-items: center; flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--gruen-700); color: #fff; font-style: normal; font-weight: 700; }
.f-handy__korb { display: flex; justify-content: center; align-items: center; gap: .4em; padding: .65em; border-radius: 999px; background: var(--gruen-900); color: #fff; font-size: .8em; font-weight: 650; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--qr .f-scan { animation: scan 2.6s ease-in-out infinite alternate both; }
  html.js .ill--qr .f-handy__liste div:nth-child(-n+3) i { animation: plus 8s var(--aus) infinite both; }
  html.js .ill--qr .f-handy__liste div:nth-child(3) i { animation-delay: 1.2s; }
  html.js .ill--qr .f-handy__korb { animation: korb 8s var(--aus) infinite both; }
}
@keyframes scan { 0% { top: 8%; opacity: .2; } 15%, 85% { opacity: 1; } 100% { top: 90%; opacity: .2; } }
@keyframes plus { 0%, 20% { scale: 1; background: var(--gruen-700); color: #fff; } 24% { scale: 1.3; background: var(--minze); color: var(--gruen-950); } 30%, 100% { scale: 1; background: var(--gruen-700); color: #fff; } }
@keyframes korb { 0%, 38% { scale: 1; box-shadow: 0 0 0 0 transparent; } 42% { scale: 1.05; box-shadow: 0 0 0 .35em rgba(143, 232, 194, .5); } 50%, 100% { scale: 1; box-shadow: 0 0 0 0 transparent; } }

.ill--whatsapp .ill__flaeche { display: grid; gap: .8em; }
.f-blase--wa { justify-self: start; display: grid; gap: .2em; max-width: 86%; background: #fff; border-bottom-left-radius: .35em; }
.f-blase--wa small { justify-self: end; font-size: .72em; color: var(--tinte-3); }
.f-wa { justify-self: end; display: grid; place-items: center; width: 3.3em; height: 3.3em; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 .6em 1.4em -.5em rgba(37, 211, 102, .8); }
.f-wa .f-i { width: 1.5em; height: 1.5em; }
.f-sozial { display: flex; flex-wrap: wrap; gap: .4em; }
.f-sozial span { padding: .3em .8em; border-radius: 999px; background: rgba(255, 255, 255, .82); font-size: .78em; font-weight: 600; color: var(--tinte-2); }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--whatsapp .f-blase--wa { animation: blase 7s var(--aus) infinite both; }
  html.js .ill--whatsapp .f-wa { animation: wa 7s ease-in-out infinite both; }
}
@keyframes blase { 0%, 10% { opacity: 0; translate: 0 .8em; scale: .95; } 18%, 92% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; } }
@keyframes wa { 0%, 4% { scale: 1; } 8% { scale: .92; } 12%, 100% { scale: 1; } }

.f-artikel { display: grid; grid-template-columns: 36% minmax(0, 1fr); align-items: center; gap: 1em; padding: .8em; }
.f-artikel__bild { display: grid; align-items: end; aspect-ratio: 1; padding: .6em; border-radius: .8em; background: radial-gradient(80% 70% at 75% 20%, #F2C14E, transparent 70%), linear-gradient(150deg, #D8862F, #8E3B1E 70%, #4A1E12); }
.f-artikel__bild b { font: 700 1.05em/1 var(--schrift-titel); color: #FFF4E0; letter-spacing: -.02em; hyphens: manual; }
.f-artikel div { display: grid; gap: .3em; }
.f-artikel small { font-size: .74em; color: var(--tinte-3); }
.f-artikel div b { font-size: .98em; line-height: 1.3; }

.f-herkunft { padding: 1.1em 1.2em; }
.f-herkunft__balken { display: flex; gap: 2px; height: .9em; overflow: hidden; border-radius: 999px; }
.f-herkunft__balken i { flex: 0 0 calc(var(--w) * 1% - 2px); transform-origin: left; }
.f-herkunft__balken i:nth-child(1), .f-herkunft li:nth-child(1)::before { background: var(--gruen-700); }
.f-herkunft__balken i:nth-child(2), .f-herkunft li:nth-child(2)::before { background: #45D19A; }
.f-herkunft__balken i:nth-child(3), .f-herkunft li:nth-child(3)::before { background: #E0A42B; }
.f-herkunft__balken i:nth-child(4), .f-herkunft li:nth-child(4)::before { background: #CDD5CE; }
.f-herkunft ul { display: grid; grid-template-columns: 1fr 1fr; gap: .45em 1.2em; margin-top: .9em; }
.f-herkunft li { display: flex; align-items: center; gap: .45em; font-size: .86em; }
.f-herkunft li::before { content: ""; width: .6em; height: .6em; border-radius: 50%; }
.f-herkunft li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.f-herkunft__quote { display: flex; justify-content: space-between; align-items: baseline; margin-top: .9em; padding-top: .8em; box-shadow: 0 -1px 0 var(--linie); font-size: .88em; color: var(--tinte-2); }
.f-herkunft__quote b { font: 700 1.6em/1 var(--schrift-titel); color: var(--gruen-800); }
@media (prefers-reduced-motion: no-preference) { html.js .ill--herkunft .f-herkunft__balken i { animation: balken 8s var(--aus) calc(var(--i) * 120ms) infinite both; } }
@keyframes balken { 0%, 4% { scale: 0 1; } 20%, 92% { scale: 1 1; } 100% { scale: 0 1; } }

.ill--postfach .ill__flaeche { font-size: clamp(10.5px, 1.85cqi, 15.5px); color: var(--hell); }
.ill--postfach .ill__schein { inset: 10% 6% 4%; }
.f-mailapp { overflow: hidden; border-radius: 1.3em; background: rgba(5, 28, 21, .62); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(246, 245, 239, .07), 0 2.2em 4.4em -1.6em rgba(0, 0, 0, .65); }
.f-mailapp__leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6em 1em; padding: .85em 1.2em; box-shadow: inset 0 -1px 0 rgba(246, 245, 239, .07); }
.f-mailapp__adresse { display: inline-flex; align-items: center; gap: .5em; font-size: .9em; color: var(--hell-2); }
.f-mailapp__adresse .f-i { color: var(--minze); }
.f-ordner { display: flex; gap: .3em; }
.f-ordner b { padding: .3em .75em; border-radius: 999px; font-size: .8em; font-weight: 600; color: var(--hell-3); }
.f-ordner b.ist-an { background: rgba(143, 232, 194, .14); color: var(--minze); }
.f-ordner i { margin-left: .25em; font-style: normal; font-variant-numeric: tabular-nums; }
.f-spamzahl { display: inline-grid; }
.f-spamzahl span { grid-area: 1 / 1; }
.f-spamzahl span:first-child { opacity: 0; }
.f-mailapp__raster { display: grid; }
.f-mailliste { position: relative; display: grid; align-content: start; padding: .55em; }
.f-mail { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; column-gap: .75em; align-items: center; max-height: 6em; padding: .6em .7em; overflow: hidden; border-radius: .8em; }
.f-mail.ist-offen { background: rgba(143, 232, 194, .08); }
.f-mail__bild { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: rgba(246, 245, 239, .1); font-weight: 700; color: var(--hell); }
.f-mail__text { display: grid; min-width: 0; line-height: 1.3; }
.f-mail__text b { font-size: .92em; color: var(--hell); }
.f-mail__text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84em; color: var(--hell-3); }
.f-mail time { align-self: start; font-size: .74em; color: var(--hell-3); }
.f-art { grid-column: 2 / -1; justify-self: start; margin-top: .35em; padding: .12em .6em; border-radius: 999px; font-size: .72em; font-weight: 650; font-style: normal; }
.f-art--anfrage { background: rgba(143, 232, 194, .16); color: var(--minze); }
.f-art--reservierung { background: rgba(242, 193, 78, .16); color: #F2C14E; }
.f-art--bewerbung { background: rgba(246, 245, 239, .12); color: var(--hell); }
.f-art--rechnung { background: rgba(246, 245, 239, .07); color: var(--hell-2); }
.f-art--spam { background: rgba(240, 120, 96, .18); color: #FFAD99; }
.f-mail--spam { max-height: 0; padding-block: 0; opacity: 0; }
.f-scanlinie { position: absolute; z-index: 1; left: .6em; right: .6em; top: 0; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--minze) 20%, var(--minze) 80%, transparent); box-shadow: 0 0 1.2em .25em rgba(143, 232, 194, .5); opacity: 0; }
.f-lesen { display: grid; align-content: start; gap: .9em; padding: 1.2em 1.35em 1.4em; box-shadow: inset 0 1px 0 rgba(246, 245, 239, .07); }
.f-lesen__kopf { display: grid; gap: .2em; }
.f-lesen__kopf b { font: 700 1.18em/1.2 var(--schrift-titel); letter-spacing: -.015em; color: var(--hell); }
.f-lesen__kopf span { font-size: .8em; color: var(--hell-3); }
.f-lesen__text { font-size: .92em; line-height: 1.5; color: var(--hell-2); }
.f-antwort { display: grid; gap: .85em; padding: 1em 1.1em 1.1em; border-radius: 1em; background: rgba(246, 245, 239, .05); box-shadow: inset 0 0 0 1px rgba(143, 232, 194, .2); }
.f-antwort__knopf { justify-self: start; display: inline-flex; align-items: center; gap: .4em; padding: .45em .95em; border-radius: 999px; background: var(--minze); color: var(--gruen-950); font-size: .84em; font-weight: 650; }
.f-antwort__text { font-size: .94em; line-height: 1.5; color: var(--hell); }
.f-antwort__fuss { display: flex; gap: .5em; }
.f-antwort .f-knopf { background: var(--minze); color: var(--gruen-950); }
.f-antwort .f-knopf--leise { background: transparent; color: var(--hell-2); box-shadow: inset 0 0 0 1px rgba(246, 245, 239, .22); }
@container (min-width: 640px) {
  .f-mailapp__raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .f-lesen { box-shadow: inset 1px 0 0 rgba(246, 245, 239, .07); }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--postfach .f-mail--spam { animation: spam-weg 12s var(--aus) calc(var(--n) * .3s) infinite both; }
  html.js .ill--postfach .f-art { animation: art-kommt 12s var(--aus) calc(var(--n) * .3s) infinite both; }
  html.js .ill--postfach .f-scanlinie { animation: scanlinie 12s cubic-bezier(.45, 0, .55, 1) infinite both; }
  html.js .ill--postfach .f-spamzahl span:first-child { animation: zahl-alt 12s linear infinite both; }
  html.js .ill--postfach .f-spamzahl span:last-child { animation: zahl-neu 12s var(--aus) infinite both; }
  html.js .ill--postfach .f-antwort__knopf { animation: antwort-knopf 12s var(--aus) infinite both; }
  html.js .ill--postfach .f-antwort__text .f-wort { animation: antwort-wort 12s var(--aus) calc(var(--i) * 45ms) infinite both; }
  html.js .ill--postfach .f-antwort__fuss { animation: antwort-fuss 12s var(--aus) infinite both; }
}
@keyframes scanlinie { 0%, 4% { top: 0; opacity: 0; } 6% { opacity: 1; } 26% { top: calc(100% - 2px); opacity: 1; } 29%, 100% { top: calc(100% - 2px); opacity: 0; } }
@keyframes art-kommt { 0%, 7% { opacity: 0; scale: .7; } 10%, 90% { opacity: 1; scale: 1; } 95%, 100% { opacity: 0; scale: .9; } }
@keyframes spam-weg {
  0%, 7% { max-height: 6em; padding-block: .6em; opacity: 1; background: transparent; }
  10%, 24% { max-height: 6em; padding-block: .6em; opacity: .6; translate: 0 0; background: rgba(240, 120, 96, .12); }
  33%, 92% { max-height: 0; padding-block: 0; opacity: 0; translate: 1.5em 0; background: transparent; }
  99%, 100% { max-height: 6em; padding-block: .6em; opacity: 1; translate: 0 0; } }
@keyframes zahl-alt { 0%, 34% { opacity: 1; } 36%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes zahl-neu { 0%, 34% { opacity: 0; translate: 0 .6em; } 38%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes antwort-knopf { 0%, 42% { scale: 1; box-shadow: 0 0 0 0 rgba(143, 232, 194, 0); } 45% { scale: .94; } 48% { scale: 1; box-shadow: 0 0 0 .5em rgba(143, 232, 194, .25); } 56%, 100% { box-shadow: 0 0 0 0 rgba(143, 232, 194, 0); } }
@keyframes antwort-wort { 0%, 46% { opacity: 0; translate: 0 .3em; } 56%, 92% { opacity: 1; translate: 0 0; } 98%, 100% { opacity: 0; } }
@keyframes antwort-fuss { 0%, 66% { opacity: 0; translate: 0 .4em; } 72%, 92% { opacity: 1; translate: 0 0; } 98%, 100% { opacity: 0; } }

.ill--stempel .ill__flaeche { padding: .5em 0 3.4em; }
.f-pass { position: relative; width: 80%;  margin-inline: auto; padding: 1.35em 1.5em 1.3em; overflow: hidden; border-radius: 1.4em; color: var(--hell);
  background: radial-gradient(120% 90% at 0% 0%, #1D6048 0%, #0B3B2C 55%, #07241B 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 2em 3.2em -1.4em rgba(7, 36, 27, .65); }
.f-pass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .12) 50%, transparent 65%); translate: -100% 0; pointer-events: none; }
.f-pass__kopf { display: flex; justify-content: space-between; align-items: baseline; }
.f-pass__kopf b { font: 800 1.55em/1 var(--schrift-titel); letter-spacing: .04em; color: #F2C14E; }
.f-pass__kopf span { font-size: .82em; color: var(--hell-3); }
.f-pass__felder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7em; margin: 1.3em 0 1.15em; }
.f-pass__felder span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(246, 245, 239, .26); }
.f-pass__felder .ist-voll { background: #F2C14E; box-shadow: 0 .3em .8em -.3em rgba(242, 193, 78, .8); }
.f-pass__felder .f-i { width: 50%; height: 50%; color: transparent; stroke-width: 2.6; }
.f-pass__felder .ist-voll .f-i { color: #0B3B2C; }
.f-pass__felder .ist-ziel { box-shadow: inset 0 0 0 1.5px rgba(242, 193, 78, .75); color: #F2C14E; }
.f-pass__felder .ist-ziel .f-i { width: 52%; height: 52%; }
.f-pass__fuss { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; font-size: .9em; color: var(--hell-2); }
.f-pass__fuss b { color: #F2C14E; }
.f-pass__name { color: var(--hell-3); font-size: .9em; }
.f-plus { position: absolute; left: 0; right: 0; bottom: .4em; width: max-content; max-width: 94%; margin-inline: auto; display: flex; align-items: center; gap: .6em; padding: .6em 1.1em .6em .6em; border-radius: 999px; font-size: .92em; color: var(--tinte-2); }
.f-plus b { color: var(--tinte); }
.f-plus .f-i { width: 1.6em; height: 1.6em; padding: .3em; border-radius: 50%; background: #E0A42B; color: #fff; stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--stempel .f-pass__felder .ist-neu { animation: stempel 8s var(--aus) infinite both; }
  html.js .ill--stempel .f-pass__felder .ist-neu .f-i { animation: stempel-loch 8s var(--aus) infinite both; }
  html.js .ill--stempel .f-pass::after { animation: glanz 8s ease-in-out infinite both; }
  html.js .ill--stempel .f-plus { animation: mitt-stempel 8s var(--aus) infinite both; }
}
@keyframes stempel { 0%, 20% { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(246, 245, 239, .26); scale: 1; }
  24% { background: #F2C14E; scale: 1.28; box-shadow: 0 0 0 .5em rgba(242, 193, 78, .3); } 30%, 92% { background: #F2C14E; scale: 1; box-shadow: 0 .3em .8em -.3em rgba(242, 193, 78, .8); }
  100% { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(246, 245, 239, .26); } }
@keyframes stempel-loch { 0%, 21% { color: transparent; } 25%, 92% { color: #0B3B2C; } 100% { color: transparent; } }
@keyframes glanz { 0%, 22% { translate: -100% 0; } 40%, 100% { translate: 100% 0; } }
@keyframes mitt-stempel { 0%, 24% { opacity: 0; translate: 0 1em; scale: .94; } 30%, 88% { opacity: 1; translate: 0 0; scale: 1; } 95%, 100% { opacity: 0; } }

.ill--bewertung .ill__flaeche { display: grid; justify-items: center; gap: 1em; padding-block: .5em; }
.f-nachricht { width: 86%; padding: 1.1em 1.25em 1.2em; }
.f-nachricht p { font-size: .98em; line-height: 1.45; }
.f-bewerten { margin-top: .8em; }
.f-sterne--gross { gap: .25em; }
.f-sterne--gross svg { width: 2.15em; height: 2.15em; }
.f-rezension { display: grid; text-align: left; grid-template-columns: 2.4em minmax(0, 1fr); gap: .8em; width: 84%; padding: 1em 1.2em 1.1em; }
.f-rezension__bild { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--gruen-800); color: #fff; font-weight: 700; }
.f-rezension div { display: grid; gap: .15em; }
.f-rezension div > span { font-size: .8em; color: var(--tinte-3); }
.f-rezension p { margin-top: .2em; font-size: .94em; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--bewertung .f-sterne--gross svg { animation: stern 9s var(--aus) calc(var(--i) * 160ms) infinite both; }
  html.js .ill--bewertung .f-rezension { animation: rezension 9s var(--aus) infinite both; }
}
@keyframes stern { 0%, 14% { fill: #DCE2DC; scale: 1; } 18% { fill: #E0A42B; scale: 1.25; } 23%, 90% { fill: #E0A42B; scale: 1; } 100% { fill: #DCE2DC; } }
@keyframes rezension { 0%, 34% { opacity: 0; translate: 0 1em; } 42%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }

.f-werben { position: relative; display: flex; justify-content: space-between; align-items: flex-end; padding: 2.2em 1.2em 3.6em; }
.f-werben__person { position: relative; z-index: 1; display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--f); color: #fff;
  font: 700 1.25em/1 var(--schrift-titel); box-shadow: 0 .6em 1.4em -.5em rgba(7, 36, 27, .55), 0 0 0 .25em #fff; }
.f-werben__bogen { position: absolute; left: 2.4em; right: 2.4em; top: .6em; width: calc(100% - 4.8em); height: auto; color: var(--gruen-700); }
.f-werben__gutschein { position: absolute; left: 50%; bottom: .2em; translate: -50% 0; display: inline-flex; align-items: center; gap: .4em; padding: .55em 1.05em; border-radius: 999px; font-size: .92em; font-weight: 650; white-space: nowrap; }
.f-werben__gutschein .f-i { color: #C89B3C; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--empfehlung .f-werben__bogen path { animation: route 1.6s linear infinite; }
  html.js .ill--empfehlung .f-werben__gutschein { animation: gutschein 6s var(--aus) infinite both; }
}
@keyframes gutschein { 0%, 8% { opacity: 0; translate: -50% .7em; } 16%, 90% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; } }

.f-sperre { display: grid; justify-items: center; padding: 1.4em 1em 1.2em; border-radius: 1.4em; color: #fff;
  background: radial-gradient(80% 60% at 75% 15%, rgba(242, 193, 78, .4), transparent 70%), linear-gradient(170deg, #12654B, #07241B 75%); }
.f-sperre__uhr { font: 600 3.1em/1 var(--schrift-titel); letter-spacing: -.02em; }
.f-sperre__tag { margin-top: .2em; font-size: .82em; opacity: .85; }
.f-sperre__sms { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); gap: .65em; width: 100%; margin-top: 1.3em; padding: .7em .8em; border-radius: 1.1em; text-align: left; }
.f-sperre .f-glas { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 .8em 1.6em -.8em rgba(0, 0, 0, .5); }
.f-sperre__ico { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: .55em; background: #2FBF86; }
.f-sperre__sms > span:last-child { display: grid; gap: .1em; font-size: .86em; line-height: 1.3; }
.f-sperre__sms > span:last-child > span { opacity: .9; }
@media (prefers-reduced-motion: no-preference) { html.js .ill--sms .f-sperre__sms { animation: sms 7s var(--aus) infinite both; } }
@keyframes sms { 0%, 8% { opacity: 0; translate: 0 -1em; scale: .96; } 15%, 90% { opacity: 1; translate: 0 0; scale: 1; } 97%, 100% { opacity: 0; } }

.f-plakat { display: grid; justify-items: start; gap: .45em; padding: 1.4em 1.5em 1.3em; border-radius: 1.1em; color: #F4EBD3;
  background: radial-gradient(90% 70% at 85% 10%, rgba(242, 193, 78, .45), transparent 60%), #140E0A; box-shadow: 0 1.3em 2.6em -1.2em rgba(7, 20, 15, .55); }
.f-plakat b { font: 800 2.6em/.92 var(--schrift-titel); letter-spacing: -.035em; color: #F2C14E; hyphens: manual; }
.f-plakat span { font-size: .86em; opacity: .85; }
.f-plakat i { margin-top: .5em; padding: .45em .95em; border-radius: 999px; background: #C89B3C; color: #140E0A; font-style: normal; font-size: .82em; font-weight: 650; }
.f-plakat small { order: 5; margin-top: .4em; font-size: .74em; opacity: .65; }

.f-rundbrief { padding: 1.1em 1.25em 1.2em; }
.f-rundbrief__kopf { display: flex; align-items: center; gap: .5em; font-size: .82em; color: var(--tinte-2); }
.f-rundbrief__kopf .f-i { color: var(--gruen-700); }
.f-rundbrief__kopf em { margin-left: auto; padding: .15em .6em; border-radius: 999px; background: var(--gruen-100); color: var(--gruen-800); font-style: normal; font-weight: 650; }
.f-rundbrief__betreff { display: block; margin-top: .7em; font: 700 1.25em/1.15 var(--schrift-titel); letter-spacing: -.015em; }
.f-rundbrief p { margin-top: .35em; font-size: .9em; color: var(--tinte-2); }
@media (prefers-reduced-motion: no-preference) { html.js .ill--newsletter .f-rundbrief__kopf em { animation: gesendet 6s var(--aus) infinite both; } }
@keyframes gesendet { 0%, 20% { opacity: 0; scale: .7; } 26% { opacity: 1; scale: 1.12; } 32%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; } }

.ill--schicht .ill__flaeche { display: grid; justify-items: center; }
.f-schicht { width: 100%; padding: 1.1em 1.15em 1.2em; }
.f-schicht__kopf { display: flex; align-items: baseline; gap: .6em; }
.f-schicht__kopf b { font: 700 1.2em/1 var(--schrift-titel); }
.f-schicht__kopf span { font-size: .82em; color: var(--tinte-3); }
.f-schicht__tage, .f-schicht__zeile { display: grid; grid-template-columns: 5.4em repeat(7, minmax(0, 1fr)); gap: .3em; align-items: center; }
.f-schicht__tage { margin: .9em 0 .35em; font-size: .74em; color: var(--tinte-3); text-align: center; }
.f-schicht__zeile + .f-schicht__zeile { margin-top: .3em; }
.f-schicht__name { display: flex; align-items: center; gap: .4em; min-width: 0; font-size: .84em; font-weight: 600; }
.f-schicht__name i { display: grid; place-items: center; flex: none; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--f); color: #fff; font-style: normal; font-size: .8em; }
.f-schicht__feld, .f-schicht__frei { height: 2.2em; border-radius: .5em; }
.f-schicht__feld { display: grid; place-items: center; background: color-mix(in oklab, var(--f) 15%, #fff); color: var(--f); }
.f-schicht__feld b { font-size: .72em; }
.f-schicht__frei { background: #F3F4F0; }
.ill--schicht .f-mitt { position: relative; margin-top: -.9em; width: 18.5em; max-width: 94%; }
.f-mitt__app--tom { background: #9B5D7A; color: #fff; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--schicht .f-schicht__feld.ist-neu { animation: schicht-neu 9s var(--aus) infinite both; }
  html.js .ill--schicht .f-mitt { animation: mitt-schicht 9s var(--aus) infinite both; }
}
@keyframes schicht-neu {
  0%, 26% { background: #FFF8E8; color: transparent; box-shadow: inset 0 0 0 1.5px #E0A42B; scale: 1; }
  32% { background: color-mix(in oklab, var(--f) 15%, #fff); color: var(--f); box-shadow: 0 0 0 .3em rgba(155, 93, 122, .25); scale: 1.12; }
  40%, 92% { background: color-mix(in oklab, var(--f) 15%, #fff); color: var(--f); box-shadow: none; scale: 1; }
  100% { background: #FFF8E8; color: transparent; box-shadow: inset 0 0 0 1.5px #E0A42B; } }
@keyframes mitt-schicht { 0%, 34% { opacity: 0; translate: 0 1em; scale: .94; } 40%, 90% { opacity: 1; translate: 0 0; scale: 1; } 96%, 100% { opacity: 0; } }

.ill--karriere .ill__flaeche { display: grid; justify-items: center; }
.f-stelle { width: 86%; padding: 1.2em 1.35em 1.35em; }
.f-stelle > b { display: block; font: 700 1.4em/1.12 var(--schrift-titel); letter-spacing: -.02em; color: var(--gruen-950); }
.f-stelle__text { margin-top: .6em; font-size: .9em; line-height: 1.45; color: var(--tinte-2); text-wrap: pretty; }
.f-stelle__punkte { display: flex; flex-wrap: wrap; gap: .4em; margin: .85em 0 1.05em; }
.f-stelle__punkte span { display: inline-flex; align-items: center; gap: .35em; padding: .3em .75em .3em .55em; border-radius: 999px; background: var(--papier); font-size: .8em; color: var(--tinte-2); }
.f-stelle__knopf { display: inline-block; padding: .6em 1.2em; border-radius: 999px; background: var(--gruen-700); color: #fff; font-size: .88em; font-weight: 650; }
.f-bewerbung { position: relative; margin-top: -.9em; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: center; gap: .7em; width: 20em; max-width: 94%; padding: .75em 1em .8em .75em; border-radius: 1.2em; text-align: left; }
.f-bewerbung__bild { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: #3F7F9B; color: #fff; font-weight: 700; }
.f-bewerbung > span:last-child { display: grid; font-size: .9em; line-height: 1.3; }
.f-bewerbung > span:last-child > span { font-size: .9em; color: var(--tinte-2); }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--karriere .f-stelle__knopf { animation: druck 8s var(--aus) infinite both; }
  html.js .ill--karriere .f-bewerbung { animation: mitt-spaet 8s var(--aus) infinite both; }
}

.ill--dokumente .ill__flaeche { font-size: 1.22cqi; padding-bottom: 3cqi; }
.ill--dokumente .ill__schein { inset: 4% 0 6%; }
.f-doku__laptop { width: 100%; }
.f-doku { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); background: #EFEFEA; font-family: var(--schrift-text); color: var(--tinte); line-height: 1.35; }
.f-doku__titel { display: flex; align-items: center; gap: .8em; padding: .65em 1.2em; background: #fff; box-shadow: inset 0 -1px 0 var(--linie); }
.f-doku__marke { display: grid; place-items: center; width: 2em; height: 2em; border-radius: .5em; background: var(--gruen-700); color: #fff; }
.f-doku__marke .f-i { width: 1.2em; height: 1.2em; }
.f-doku__titel > b { font-size: 1.02em; }
.f-doku__gesichert { font-size: .8em; color: var(--tinte-3); }
.f-doku__export { display: inline-flex; align-items: center; gap: .4em; margin-left: auto; padding: .45em .95em; border-radius: 999px; background: var(--gruen-700); color: #fff; font-size: .85em; font-weight: 600; }
.f-doku__reiter { display: flex; gap: 1.7em; padding: .55em 1.3em 0; background: #fff; }
.f-doku__reiter b { padding-bottom: .5em; font-size: .86em; font-weight: 500; color: var(--tinte-2); }
.f-doku__reiter .ist-an { color: var(--gruen-800); font-weight: 650; box-shadow: inset 0 -2px 0 var(--gruen-700); }
.f-doku__band { display: flex; align-items: center; gap: .5em; padding: .55em 1.2em; background: #fff; box-shadow: inset 0 -1px 0 var(--linie); }
.f-doku__feld { min-width: 8em; padding: .3em .7em; border-radius: .4em; box-shadow: inset 0 0 0 1px var(--linie-stark); font-size: .8em; }
.f-doku__feld--klein { min-width: 2.6em; text-align: center; }
.f-doku__fett, .f-doku__kursiv, .f-doku__unter { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .4em; font-size: .9em; }
.f-doku__fett { font-weight: 800; background: var(--gruen-50); }
.f-doku__kursiv { font-style: italic; font-family: Georgia, serif; }
.f-doku__unter { text-decoration: underline; }
.f-doku__band > i { width: 1px; height: 1.5em; margin: 0 .4em; background: var(--linie-stark); }
.f-doku__vorlage { padding: .35em .8em; border-radius: .4em; box-shadow: inset 0 0 0 1px var(--linie); font-size: .78em; }
.f-doku__vorlage.ist-an { background: var(--gruen-50); box-shadow: inset 0 0 0 1.5px var(--gruen-600); }
.f-doku__tisch { position: relative; display: grid; justify-items: center; padding-top: 1.6em; overflow: hidden; }
.f-doku__seite { width: 46em; padding: 3em 3.6em; background: #fff; box-shadow: 0 .2em .6em rgba(7, 36, 27, .1), 0 1.5em 3em -1.5em rgba(7, 36, 27, .25); font-size: .95em; }
.f-doku__briefkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding-bottom: .6em; border-bottom: 2px solid var(--gruen-700); }
.f-doku__briefkopf b { font: 700 1.4em/1 var(--schrift-titel); color: var(--gruen-950); }
.f-doku__briefkopf span { font-size: .75em; color: var(--tinte-3); }
.f-doku__h { display: block; margin: 1.3em 0 .5em; font: 700 1.45em/1.1 var(--schrift-titel); letter-spacing: -.015em; }
.f-doku__p { font-size: .9em; color: var(--tinte-2); }
.f-doku__tabelle { width: 100%; margin: 1em 0; font-size: .82em; }
.f-doku__tabelle th { padding: .45em .6em; background: var(--gruen-50); text-align: left; font-weight: 650; }
.f-doku__tabelle td { padding: .45em .6em; border-bottom: 1px solid var(--linie); font-variant-numeric: tabular-nums; }
.f-doku__tabelle :is(th, td):nth-child(n+2) { text-align: right; }
.f-doku__gesamt td { border-bottom: 0; background: #FBF7EC; font-weight: 700; }
.f-doku__tippt { display: flex; align-items: center; }
.f-doku__tippt span { white-space: nowrap; }
.f-doku__caret { width: 1.5px; height: 1.15em; margin-left: 1px; background: var(--gruen-700); opacity: 0; }
.f-doku__menue { position: absolute; right: 2.2em; top: .5em; display: grid; gap: .1em; width: 15.5em; padding: .65em; border-radius: .9em; }
.f-doku__menue b { padding: .2em .55em .35em; font-size: .76em; color: var(--tinte-3); }
.f-doku__menue span { display: flex; align-items: center; gap: .5em; padding: .45em .55em; border-radius: .5em; font-size: .86em; }
.f-doku__menue span .f-i { color: var(--gruen-700); }
.f-doku__menue .ist-an { background: var(--gruen-700); color: #fff; }
.f-doku__menue .ist-an .f-i { color: var(--minze); }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--dokumente .f-doku__tippt span { animation: doku-tippen 11s steps(30, end) infinite both; }
  html.js .ill--dokumente .f-doku__caret { animation: doku-caret 11s linear infinite both; }
  html.js .ill--dokumente .f-doku__export { animation: doku-export 11s var(--aus) infinite both; }
  html.js .ill--dokumente .f-doku__menue { animation: doku-menue 11s var(--aus) infinite both; }
  html.js .ill--dokumente .f-doku__menue .ist-an { animation: doku-pdf 11s var(--aus) infinite both; }
}
@keyframes doku-tippen { 0%, 6% { clip-path: inset(0 100% 0 0); } 34%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes doku-caret { 0%, 5% { opacity: 0; } 6%, 38% { opacity: 1; } 41% { opacity: 0; } 44% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes doku-export { 0%, 44% { scale: 1; } 47% { scale: .93; } 51%, 100% { scale: 1; } }
@keyframes doku-menue { 0%, 47% { opacity: 0; translate: 0 -.6em; scale: .97; } 53%, 92% { opacity: 1; translate: 0 0; scale: 1; } 98%, 100% { opacity: 0; } }
@keyframes doku-pdf { 0%, 58% { background: transparent; color: var(--tinte); } 62%, 100% { background: var(--gruen-700); color: #fff; } }

.f-sprache { display: grid; gap: 1em; padding: 1.15em 1.3em 1.35em; }
.f-sprache__wahl { position: relative; justify-self: end; display: inline-grid; grid-template-columns: 1fr 1fr; padding: .25em; border-radius: 999px; background: var(--papier); }
.f-sprache__wahl b { position: relative; z-index: 1; padding: .3em .9em; font-size: .82em; text-align: center; color: var(--tinte-3); }
.f-sprache__wahl .f-sprache__de { color: var(--tinte); }
.f-sprache__wahl i { position: absolute; top: .25em; bottom: .25em; left: .25em; width: calc(50% - .25em); border-radius: 999px; background: #fff; box-shadow: 0 .2em .6em -.2em rgba(7, 36, 27, .35); }
.f-sprache__satz { display: grid; }
.f-sprache__satz b { grid-area: 1 / 1; font: 700 1.5em/1.12 var(--schrift-titel); letter-spacing: -.02em; color: #3B2A1C; }
.f-sprache__t-en { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--sprache .f-sprache__wahl i { animation: wahl 7s var(--quer) infinite both; }
  html.js .ill--sprache .f-sprache__de { animation: wahl-de 7s linear infinite both; }
  html.js .ill--sprache .f-sprache__en { animation: wahl-en 7s linear infinite both; }
  html.js .ill--sprache .f-sprache__t-de { animation: satz-de 7s var(--aus) infinite both; }
  html.js .ill--sprache .f-sprache__t-en { animation: satz-en 7s var(--aus) infinite both; }
}
@keyframes wahl { 0%, 38% { translate: 0 0; } 46%, 88% { translate: 100% 0; } 96%, 100% { translate: 0 0; } }
@keyframes wahl-de { 0%, 40% { color: var(--tinte); } 44%, 90% { color: var(--tinte-3); } 94%, 100% { color: var(--tinte); } }
@keyframes wahl-en { 0%, 40% { color: var(--tinte-3); } 44%, 90% { color: var(--tinte); } 94%, 100% { color: var(--tinte-3); } }
@keyframes satz-de { 0%, 40% { opacity: 1; } 46%, 88% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes satz-en { 0%, 40% { opacity: 0; } 46%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }

.f-profil { display: grid; gap: .3em; padding: 1.15em 1.3em 1.25em; }
.f-profil > b { font: 700 1.35em/1.1 var(--schrift-titel); letter-spacing: -.02em; }
.f-profil > span { font-size: .86em; color: var(--tinte-3); }
.f-profil__offen em { font-style: normal; font-weight: 650; color: #1E8E3E; }
.f-profil__knoepfe { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .7em; }
.f-profil__knoepfe span { display: inline-flex; align-items: center; gap: .35em; padding: .4em .8em .4em .6em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie-stark); color: #1A5FB4; font-size: .8em; font-weight: 600; }


.wege-reihen { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(4rem, 2rem + 6vw, 8rem); background: var(--weiss); }
.vweg__teil { display: grid; gap: var(--a-4); width: 100%; max-width: 34rem; margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.vweg__urteil { position: relative; padding-left: 2.25rem; color: var(--tinte-2); line-height: 1.55; text-wrap: pretty; }
.vweg__urteil b { color: var(--tinte); font-weight: 650; }
.vweg__urteil::before { content: ""; position: absolute; left: 0; top: .1em; width: 1.5rem; height: 1.5rem; border-radius: 50%; }
.vweg__urteil--passt::before {
  background: var(--gruen-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8.2'/%3E%3C/svg%3E") center / 70% no-repeat; }
.vweg__urteil--weniger::before {
  background: var(--flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6B64' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 70% no-repeat; }
.vweg__fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: var(--a-3); }
.vweg__fakten > div { display: grid; align-content: start; gap: .15rem; padding: .8rem .9rem; border-radius: 1rem; background: var(--weiss); }
.vweg__fakten dd { margin: 0; }
.vweg__fakten dd small { display: block; margin-top: .2rem; font-family: var(--schrift-text); font-size: var(--fs-mini); font-weight: 500; color: var(--tinte-3); }
.vweg__fakten dt { font-size: var(--fs-mini); color: var(--tinte-3); }
.vweg__fakten dd { font-family: var(--schrift-titel); font-size: 1.05rem; font-weight: 650; line-height: 1.2; color: var(--gruen-950); font-variant-numeric: tabular-nums; text-wrap: balance; }
.vweg--vokuma { background: linear-gradient(180deg, var(--gruen-100), var(--gruen-50) 70%); }
.vweg--vokuma .vorstellung__titel { color: var(--gruen-800); }
.vweg--vokuma .vweg__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-top: var(--a-3); }
@media (min-width: 62rem) { .vweg .vweg__teil { grid-area: nutzen; } }
@media (max-width: 26rem) { .vweg__fakten { grid-template-columns: minmax(0, 1fr); } .vweg__fakten > div { grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; } }
@media (max-width: 39.99rem) {
  .vweg__fakten > div { background: var(--papier); }
  .vweg--vokuma { margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand) !important; border-radius: 0; }
  .vweg--vokuma .vweg__fakten > div { background: var(--weiss); }
  .vorstellung.vweg--vokuma { background: linear-gradient(180deg, var(--gruen-100), var(--gruen-50) 70%); }
  .wege-reihen :is(.v-angebot, .v-mail, .v-bau, .v-abo, .v-proto, .v-blase--auto) { outline: 1px solid var(--linie); outline-offset: -1px; }
}

@media (prefers-reduced-motion: no-preference) {
  html.js .spannen[data-ill] .spanne__bahn i { transition: clip-path 1.1s var(--aus) calc(var(--n, 0) * 90ms); clip-path: inset(0 100% 0 0 round 999px); }
  html.js .spannen[data-ill].ill--an .spanne__bahn i { clip-path: inset(0 0 0 0 round 999px); }
}

.wege-reihen .ill { width: 100%; }
:is(.ill--agentur, .ill--freelancer, .ill--baukasten, .ill--abo, .ill--vokuma) .ill__flaeche { padding: 1.2em 0 1.6em; }

.v-angebot { width: 86%; padding: 1.3em 1.4em 1.2em; }
.v-angebot__kopf { display: grid; gap: .1em; padding-bottom: .9em; margin-bottom: .4em; box-shadow: 0 1px 0 var(--linie); }
.v-angebot__kopf b { font-family: var(--schrift-titel); font-size: 1.15em; color: var(--gruen-950); }
.v-angebot__kopf span { font-size: .84em; color: var(--tinte-3); }
.v-angebot__zeile { display: grid; grid-template-columns: minmax(0, 1fr) 3em 5em; gap: .6em; padding: .6em 0; font-size: .94em; box-shadow: 0 1px 0 var(--linie); }
.v-angebot__zeile > :nth-child(2) { color: var(--tinte-3); text-align: right; }
.v-angebot__zeile b { text-align: right; }
.v-angebot__summe { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding-top: .8em; }
.v-angebot__summe span { font-size: .88em; color: var(--tinte-2); }
.v-angebot__summe b { font: 700 1.7em/1 var(--schrift-titel); color: #A23E2A; }
.v-termin { position: relative; z-index: 2; margin: -1.4em 0 0 auto; display: grid; grid-template-columns: 2.3em minmax(0, 1fr); gap: .3em .7em; align-items: center; width: 17.5em; padding: .8em .95em; border-radius: 1.2em; }
.v-termin__ico { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .65em; background: #F6E4DF; color: #A23E2A; }
.v-termin__text { display: grid; font-size: .9em; line-height: 1.3; }
.v-termin__text span { color: var(--tinte-3); font-size: .92em; }
.v-termin__punkte { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: .3em; margin-top: .35em; }
.v-termin__punkte i { height: .32em; border-radius: 999px; background: var(--flaeche); }
.v-termin__punkte .ist-voll { background: #C8644E; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--agentur .v-angebot__zeile { animation: v-zeile 10s var(--aus) infinite both; animation-delay: calc(var(--i) * .45s); }
  html.js .ill--agentur .v-angebot__summe b { animation: v-summe 10s var(--aus) infinite both; }
  html.js .ill--agentur .v-termin { animation: v-schwebt 10s var(--aus) infinite both; }
  html.js .ill--agentur .v-termin__punkte .ist-voll:nth-child(4) { animation: v-punkt 10s linear infinite both; }
}
@keyframes v-zeile { 0% { opacity: 0; translate: 0 .5em; } 6%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; translate: 0 0; } }
@keyframes v-summe { 0%, 22% { opacity: 0; scale: .9; } 30%, 90% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; scale: 1; } }
@keyframes v-schwebt { 0%, 34% { opacity: 0; translate: 0 .8em; } 42%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; translate: 0 0; } }
@keyframes v-punkt { 0%, 50% { background: var(--flaeche); } 54%, 100% { background: #C8644E; } }

.v-mail { width: min(100%, 30em); margin-inline: auto; padding: 1.1em 1.2em 1.3em; }
.v-mail__kopf { display: flex; align-items: center; gap: .7em; padding-bottom: .9em; box-shadow: 0 1px 0 var(--linie); }
.v-mail__kopf > span:last-child { display: grid; line-height: 1.25; }
.v-mail__kopf > span:last-child span { font-size: .84em; color: var(--tinte-3); }
.v-mail__bild { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: #E6DCCB; color: #6E5530; font-weight: 700; }
.v-mail__verlauf { display: grid; gap: .8em; padding-top: 1em; }
.v-blase { display: grid; gap: .3em; max-width: 85%; padding: .8em 1em; border-radius: 1.1em; font-size: .94em; line-height: 1.45; }
.v-blase time { font-size: .8em; color: var(--tinte-3); }
.v-blase--ich { justify-self: end; border-bottom-right-radius: .35em; background: var(--gruen-700); color: #fff; }
.v-blase--ich p { color: #fff; }
.v-blase--ich time { color: rgba(255, 255, 255, .7); text-align: right; }
.v-blase--auto { justify-self: start; border-bottom-left-radius: .35em; background: #F3F2EC; }
.v-blase__marke { display: inline-flex; align-items: center; gap: .4em; font-size: .8em; font-weight: 650; color: #9A6B1E; }
.v-tippt { display: none; justify-self: start; gap: .25em; padding: .75em .9em; border-radius: 1.1em; background: #F3F2EC; }
.v-tippt i { width: .45em; height: .45em; border-radius: 50%; background: var(--tinte-3); }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--freelancer .v-blase--ich { animation: v-blase-ich 9s var(--aus) infinite both; }
  html.js .ill--freelancer .v-tippt { display: flex; position: absolute; animation: v-tippt 9s linear infinite both; }
  html.js .ill--freelancer .v-tippt i { animation: v-tippt-punkt .9s ease-in-out infinite both; }
  html.js .ill--freelancer .v-tippt i:nth-child(2) { animation-delay: .15s; }
  html.js .ill--freelancer .v-tippt i:nth-child(3) { animation-delay: .3s; }
  html.js .ill--freelancer .v-blase--auto { animation: v-blase-auto 9s var(--aus) infinite both; }
  html.js .ill--freelancer .v-mail__verlauf { position: relative; }
}
@keyframes v-blase-ich { 0% { opacity: 0; translate: 0 .8em; } 6%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; translate: 0 0; } }
@keyframes v-tippt { 0%, 14% { opacity: 0; } 17%, 34% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes v-tippt-punkt { 0%, 100% { translate: 0 0; opacity: .45; } 40% { translate: 0 -.2em; opacity: 1; } }
@keyframes v-blase-auto { 0%, 35% { opacity: 0; translate: 0 .8em; } 41%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; translate: 0 0; } }
.ill--freelancer .v-tippt { top: auto; left: 0; }

.v-bau { width: 78%; overflow: hidden; }
.v-bau__leiste { display: flex; justify-content: space-between; align-items: center; padding: .65em .95em; background: #F1F1EC; box-shadow: inset 0 -1px 0 var(--linie); font-size: .84em; }
.v-bau__marke { font-weight: 650; color: var(--tinte-2); }
.v-bau__uhr { display: inline-flex; align-items: center; gap: .35em; color: #9A6B1E; font-weight: 650; }
.v-bau__raster { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); }
.v-bau__bloecke { display: grid; align-content: start; gap: .45em; padding: .9em .7em; box-shadow: inset -1px 0 0 var(--linie); }
.v-bau__bloecke span { padding: .45em .6em; border-radius: .55em; background: #F6F5F0; box-shadow: inset 0 0 0 1px var(--linie); font-size: .8em; color: var(--tinte-2); }
.v-bau__zieh { position: relative; z-index: 2; background: #fff !important; box-shadow: inset 0 0 0 1.5px var(--gruen-700), 0 .6em 1.2em -.6em rgba(7, 36, 27, .4) !important; color: var(--gruen-800) !important; }
.v-bau__seite { display: grid; gap: .8em; padding: 1em 1.1em 1.2em; }
.v-bau__held { display: grid; gap: .25em; padding: 1.1em; border-radius: .7em; background: repeating-linear-gradient(135deg, #F3F2EC 0 .6em, #ECEBE4 .6em 1.2em); }
.v-bau__held b { font-family: var(--schrift-titel); font-size: 1.15em; color: var(--tinte-3); }
.v-bau__held span { font-size: .82em; color: var(--tinte-3); }
.v-bau__platz { position: relative; display: grid; place-items: center; min-height: 4.6em; border-radius: .7em; border: 1.5px dashed var(--linie-stark); }
.v-bau__ziel { font-size: .8em; color: var(--tinte-3); }
.v-bau__galerie { position: absolute; inset: .45em; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; opacity: 0; }
.v-bau__galerie i { border-radius: .45em; background: linear-gradient(135deg, #D9E4DC, #C3D3C8); }
.v-bau__linien { display: grid; gap: .45em; }
.v-bau__linien i { height: .55em; border-radius: 999px; background: #EFEEE8; }
.v-bau__linien i:last-child { width: 60%; }
.v-liste { position: absolute; right: 0; bottom: -.6em; width: 13.8em; padding: .95em 1.05em 1em; border-radius: 1.2em; }
.v-liste__titel { display: block; margin-bottom: .5em; font-size: .92em; }
.v-liste ul { display: grid; gap: .42em; }
.v-liste li { display: flex; align-items: center; gap: .55em; font-size: .86em; color: var(--tinte); }
.v-liste__kasten { display: grid; place-items: center; flex: none; width: 1.15em; height: 1.15em; border-radius: .3em; box-shadow: inset 0 0 0 1.5px var(--linie-stark); }
.v-liste .ist-fertig { color: var(--tinte-3); text-decoration: line-through; }
.v-liste .ist-fertig .v-liste__kasten { background: var(--gruen-700); box-shadow: none; color: #fff; }
.v-liste .ist-fertig .f-i { width: .8em; height: .8em; stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--baukasten .v-bau__zieh { animation: v-zieh 8s var(--aus) infinite both; }
  html.js .ill--baukasten .v-bau__galerie { animation: v-galerie 8s var(--aus) infinite both; }
  html.js .ill--baukasten .v-bau__ziel { animation: v-ziel 8s linear infinite both; }
}
@keyframes v-zieh { 0%, 12% { translate: 0 0; opacity: 1; } 40% { translate: 9.5em -.2em; opacity: 1; } 46%, 88% { translate: 9.5em -.2em; opacity: 0; } 94%, 100% { translate: 0 0; opacity: 1; } }
@keyframes v-galerie { 0%, 42% { opacity: 0; scale: .96; } 50%, 88% { opacity: 1; scale: 1; } 94%, 100% { opacity: 0; scale: .96; } }
@keyframes v-ziel { 0%, 42% { opacity: 1; } 46%, 90% { opacity: 0; } 94%, 100% { opacity: 1; } }

.v-abo { width: min(100%, 29em); margin-inline: auto; padding: 1.25em 1.35em 1.3em; }
.v-abo__kopf { display: flex; justify-content: space-between; align-items: start; gap: 1em; }
.v-abo__kopf > span { display: grid; line-height: 1.3; }
.v-abo__kopf > span b { font-family: var(--schrift-titel); font-size: 1.15em; color: var(--gruen-950); }
.v-abo__kopf > span span { font-size: .84em; color: var(--tinte-3); }
.v-abo__preis { font: 700 1.7em/1 var(--schrift-titel); color: var(--tinte); white-space: nowrap; }
.v-abo__preis small { font: 500 .5em var(--schrift-text); color: var(--tinte-3); }
.v-abo__bedingungen { display: grid; margin-top: 1em; }
.v-abo__bedingungen > div { display: flex; justify-content: space-between; gap: 1em; padding: .55em 0; font-size: .9em; box-shadow: 0 -1px 0 var(--linie); }
.v-abo__bedingungen dt { color: var(--tinte-2); }
.v-abo__bedingungen dd { font-weight: 650; text-align: right; }
.v-abo__bedingungen .ist-frage { color: #A23E2A; }
.v-abo__monate { display: grid; grid-template-columns: repeat(12, 1fr); gap: .3em; margin-top: 1em; }
.v-abo__monate i { aspect-ratio: 1; border-radius: .3em; background: #E9C9C0; }
.v-abo__summe { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-top: .9em; }
.v-abo__summe span { font-size: .88em; color: var(--tinte-2); }
.v-abo__summe b { font: 700 1.5em/1 var(--schrift-titel); color: #A23E2A; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--abo .v-abo__monate i { animation: v-monat 9s linear infinite both; animation-delay: calc(var(--i) * .1s); }
  html.js .ill--abo .v-abo__summe { animation: v-abo-summe 9s var(--aus) infinite both; }
}
@keyframes v-monat { 0% { background: #F1EFE9; scale: .8; } 3%, 88% { background: #E9C9C0; scale: 1; } 94%, 100% { background: #F1EFE9; scale: .8; } }
@keyframes v-abo-summe { 0%, 38% { opacity: 0; translate: 0 .5em; } 45%, 88% { opacity: 1; translate: 0 0; } 95%, 100% { opacity: 0; translate: 0 0; } }

.v-proto { width: 88%; }
.v-proto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.v-fertig { position: absolute; z-index: 2; top: 0; right: 0; display: grid; grid-template-columns: 2.35em minmax(0, 1fr); gap: .75em; align-items: start; width: 18.5em; padding: .8em .95em .85em .8em; border-radius: 1.3em; }
.v-fertig__app { display: grid; place-items: center; width: 2.35em; height: 2.35em; border-radius: .62em; background: var(--gruen-800); color: var(--minze); }
.v-fertig__zeichen { width: 1.35em; height: auto; }
.v-fertig__text { display: grid; gap: .12em; font-size: .9em; line-height: 1.32; color: var(--tinte-2); }
.v-fertig__text b { color: var(--tinte); }
.v-fest { position: absolute; z-index: 2; right: 0; bottom: .3em; display: grid; gap: .7em; width: 13.5em; padding: .95em 1.05em 1em; border-radius: 1.2em; }
.v-fest__preis { display: grid; line-height: 1.25; }
.v-fest__preis span, .v-fest__preis small { font-size: .8em; color: var(--tinte-3); }
.v-fest__preis b { font: 700 1.9em/1.05 var(--schrift-titel); color: var(--gruen-800); }
.v-fest__weg { display: grid; gap: .35em; font-size: .84em; font-weight: 650; color: var(--tinte); }
.v-fest__bahn { height: .42em; border-radius: 999px; background: var(--flaeche); overflow: hidden; }
.v-fest__bahn i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gruen-700), #1E8F62); }
@media (prefers-reduced-motion: no-preference) {
  html.js .ill--vokuma .v-fertig { animation: v-fertig 9s var(--aus) infinite both; }
  html.js .ill--vokuma .v-fest { animation: v-schwebt 9s var(--aus) infinite both; }
  html.js .ill--vokuma .v-fest__bahn i { animation: v-bahn 9s var(--aus) infinite both; }
}
@keyframes v-fertig { 0%, 8% { opacity: 0; translate: 0 -.8em; } 15%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; translate: 0 0; } }
@keyframes v-bahn { 0%, 42% { clip-path: inset(0 100% 0 0); } 75%, 90% { clip-path: inset(0 0 0 0); } 97%, 100% { clip-path: inset(0 0 0 0); } }

@container (max-width: 520px) {
  .v-angebot, .v-bau, .v-proto { width: 100%; }
  .v-liste { position: relative; right: auto; bottom: auto; margin: -1.6em 0 0 auto; }
  .v-fertig { top: -.4em; width: 16.5em; }
  .v-fest { position: relative; right: auto; bottom: auto; margin: -2.2em 0 0 auto; }
}