@property --zahl { syntax: "<integer>"; inherits: true; initial-value: 0; }

:root {
  --sonne: #ffd23f; --sonne-2: #ffbf1f; --koralle: #ff6b57; --himmel: #4fb0ff; --mint: #2fcf9c;
  --creme: #fff6e6;
  --gut: #12875f; --gut-hg: #dcf5ea;
  --mittel: #f2ad00; --mittel-hg: #fff1c4;
  --schlecht: #d23f28; --schlecht-hg: #ffe4de;
  --info: #275f9e; --info-hg: #e1efff;
  --wert-gruen: #0f7a55; --wert-gelb: #8a5800; --wert-rot: #b3321d;
  --karte: color-mix(in srgb, var(--papier) 55%, #fff 45%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --gut: #3fd19c; --gut-hg: rgba(63, 209, 156, .14);
    --mittel: #ffc93d; --mittel-hg: rgba(255, 201, 61, .13);
    --schlecht: #ff6b57; --schlecht-hg: rgba(255, 107, 87, .14);
    --info: #6cb8ff; --info-hg: rgba(108, 184, 255, .14);
    --wert-gruen: #4fe0ab; --wert-gelb: #ffd25c; --wert-rot: #ff8a77;
    --karte: color-mix(in srgb, var(--papier) 86%, #fff 14%);
  }
}

.n-0{--ziel:0}.n-1{--ziel:1}.n-2{--ziel:2}.n-3{--ziel:3}.n-4{--ziel:4}.n-5{--ziel:5}.n-6{--ziel:6}.n-7{--ziel:7}.n-8{--ziel:8}.n-9{--ziel:9}.n-10{--ziel:10}.n-11{--ziel:11}.n-12{--ziel:12}.n-13{--ziel:13}.n-14{--ziel:14}.n-15{--ziel:15}.n-16{--ziel:16}.n-17{--ziel:17}.n-18{--ziel:18}.n-19{--ziel:19}.n-20{--ziel:20}.n-21{--ziel:21}.n-22{--ziel:22}.n-23{--ziel:23}.n-24{--ziel:24}.n-25{--ziel:25}.n-26{--ziel:26}.n-27{--ziel:27}.n-28{--ziel:28}.n-29{--ziel:29}.n-30{--ziel:30}.n-31{--ziel:31}.n-32{--ziel:32}.n-33{--ziel:33}.n-34{--ziel:34}.n-35{--ziel:35}.n-36{--ziel:36}.n-37{--ziel:37}.n-38{--ziel:38}.n-39{--ziel:39}.n-40{--ziel:40}.n-41{--ziel:41}.n-42{--ziel:42}.n-43{--ziel:43}.n-44{--ziel:44}.n-45{--ziel:45}.n-46{--ziel:46}.n-47{--ziel:47}.n-48{--ziel:48}.n-49{--ziel:49}.n-50{--ziel:50}.n-51{--ziel:51}.n-52{--ziel:52}.n-53{--ziel:53}.n-54{--ziel:54}.n-55{--ziel:55}.n-56{--ziel:56}.n-57{--ziel:57}.n-58{--ziel:58}.n-59{--ziel:59}.n-60{--ziel:60}.n-61{--ziel:61}.n-62{--ziel:62}.n-63{--ziel:63}.n-64{--ziel:64}.n-65{--ziel:65}.n-66{--ziel:66}.n-67{--ziel:67}.n-68{--ziel:68}.n-69{--ziel:69}.n-70{--ziel:70}.n-71{--ziel:71}.n-72{--ziel:72}.n-73{--ziel:73}.n-74{--ziel:74}.n-75{--ziel:75}.n-76{--ziel:76}.n-77{--ziel:77}.n-78{--ziel:78}.n-79{--ziel:79}.n-80{--ziel:80}.n-81{--ziel:81}.n-82{--ziel:82}.n-83{--ziel:83}.n-84{--ziel:84}.n-85{--ziel:85}.n-86{--ziel:86}.n-87{--ziel:87}.n-88{--ziel:88}.n-89{--ziel:89}.n-90{--ziel:90}.n-91{--ziel:91}.n-92{--ziel:92}.n-93{--ziel:93}.n-94{--ziel:94}.n-95{--ziel:95}.n-96{--ziel:96}.n-97{--ziel:97}.n-98{--ziel:98}.n-99{--ziel:99}.n-100{--ziel:100}

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.huelle.schmal { max-width: 860px; }


.check-form { position: relative; display: grid; gap: .7rem; padding: clamp(16px, 3.5vw, 26px); border-radius: 24px; background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten); max-width: 720px; }
.check-label { font: 600 .78rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.check-zeile { display: grid; gap: .7rem; }
@media (min-width: 640px) { .check-zeile { grid-template-columns: 1fr auto; } }
.check-zeile input {
  width: 100%; min-height: 60px; padding: .9rem 1.1rem; border-radius: 16px;
  font: 500 clamp(1.1rem, 1rem + .5vw, 1.3rem)/1.3 var(--text); color: var(--tinte);
  background: var(--papier); border: 2px solid var(--linie-stark); transition: border-color .2s, box-shadow .2s;
}
.check-zeile input::placeholder { color: var(--tinte-3); opacity: 1; }
.check-zeile input:focus-visible { outline: none; border-color: var(--faden); box-shadow: 0 0 0 5px var(--faden-zart); }
.check-zeile input[aria-invalid="true"] { border-color: var(--faden); }
.check-knopf { --hg: var(--faden-knopf); --vg: #fff; justify-content: center; min-height: 60px; font-size: 1.05rem; padding-inline: 1.6rem; border-radius: 16px; white-space: normal; text-align: center; }
.check-knopf:hover { --hg: var(--tinte); color: var(--papier); }
.check-fehler { margin: 0; padding: .7rem 1rem; border-radius: 12px; background: var(--schlecht-hg); color: var(--tinte); font-weight: 500; border-left: 4px solid var(--schlecht); }
.check-vertrauen { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin: .2rem 0 0; font-size: .9rem; color: var(--tinte-2); }
.check-vertrauen span { display: inline-flex; align-items: center; gap: .4rem; }
.check-vertrauen span::before { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--gut); border-bottom: 2px solid var(--gut); transform: translateY(-2px) rotate(-45deg); }


.check-held {
  --tinte: #17181e; --tinte-2: #34353d; --tinte-3: #4a4b55; --faden-text: #9f2e19; --linie: rgba(23, 24, 30, .14); --linie-stark: rgba(23, 24, 30, .3);
  --papier: #fffdf8; --karte: #fff; --faden-zart: rgba(210, 63, 40, .16); --gut: #12875f;
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(28px, 6vw, 72px) clamp(70px, 9vw, 120px);
  background: linear-gradient(160deg, var(--sonne) 0%, var(--sonne-2) 100%);
  color: var(--tinte); color-scheme: light;
}
.held-kreis { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.held-kreis-1 { width: clamp(260px, 42vw, 620px); aspect-ratio: 1; right: -12%; top: -18%; background: rgba(255, 246, 230, .55); }
.held-kreis-2 { width: clamp(160px, 22vw, 320px); aspect-ratio: 1; left: -8%; bottom: -14%; background: rgba(255, 140, 90, .45); }
.held-raster { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 1000px) { .held-raster { grid-template-columns: 1.25fr .75fr; } }
.check-held .pfad { margin-bottom: 1.2rem; }
.held-marke { display: inline-block; padding: .45rem .8rem; border-radius: 10px; background: var(--creme); font: 600 .8rem/1 var(--mono); letter-spacing: .06em; color: var(--tinte); }
.check-held h1 { margin: 1.1rem 0 1.2rem; font: 700 clamp(2.5rem, 1.25rem + 5.6vw, 5.6rem)/.98 var(--text); letter-spacing: -.045em; max-width: 14ch; }
.held-zeile { display: block; }
.held-pinsel { position: relative; z-index: 0; background: none; color: inherit; padding: 0 .08em; white-space: nowrap; }
.held-pinsel::before { content: ""; position: absolute; z-index: -1; inset: .12em -.06em .04em; border-radius: .18em .5em .22em .4em; background: var(--koralle); transform: rotate(-1.5deg); transform-origin: 0 50%; }
.held-vorspann { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.55; color: var(--tinte-2); max-width: 46ch; margin-bottom: 1.8rem; }
.check-held .check-form { box-shadow: 0 2px 6px rgba(23, 24, 30, .08), 0 30px 60px -24px rgba(120, 60, 0, .45); border-color: transparent; }

.held-bild { position: relative; justify-self: center; width: min(100%, 360px); }
@media (max-width: 999px) { .held-bild { display: none; } }
.muster-bericht { position: relative; padding: 1.6rem 1.6rem 1.8rem; border-radius: 26px; background: #fff; box-shadow: 0 30px 70px -26px rgba(90, 40, 0, .55); transform: rotate(2.5deg); }
.muster-kopf { display: flex; justify-content: space-between; margin: 0 0 1rem; font: 600 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); }
.muster-kopf span:first-child { padding: .3rem .5rem; border-radius: 6px; background: var(--sonne); color: var(--tinte); }
.muster-bericht .ring { margin: 0 auto 1.2rem; width: 170px; }
.muster-balken { list-style: none; display: grid; gap: .7rem; }
.muster-balken li { display: grid; gap: .3rem; font: 500 .82rem/1.2 var(--text); color: var(--tinte-2); }
.aufkleber { position: absolute; padding: .55rem .9rem; border-radius: 999px; font: 700 .95rem/1 var(--text); color: #17181e; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35); }
.aufkleber-1 { top: -14px; left: -30px; background: var(--mint); transform: rotate(-8deg); }
.aufkleber-2 { top: 42%; right: -38px; background: #fff; border: 2px solid #17181e; transform: rotate(7deg); }
.aufkleber-3 { bottom: -18px; left: 12%; background: var(--himmel); transform: rotate(-4deg); }
.held-faden { position: absolute; left: 0; right: 0; bottom: 8px; width: 100%; height: clamp(50px, 7vw, 110px); pointer-events: none; }
.held-faden path { fill: none; stroke: var(--faden); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.bereiche { list-style: none; display: grid; gap: 14px; }
@media (min-width: 640px) { .bereiche { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bereiche { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bereich { padding: 1.4rem; border-radius: 20px; background: var(--karte); border: 1px solid var(--linie); }
.bereich .sym { width: 46px; height: 46px; padding: 10px; border-radius: 14px; margin-bottom: 1rem; color: #17181e; }
.bereich h3 { margin-bottom: .4rem; }
.bereich p { margin: 0; color: var(--tinte-2); font-size: .97rem; }
.bereich-sicher .sym, .karte-sicher .karte-sym { background: var(--mint); }
.bereich-schnell .sym, .karte-schnell .karte-sym { background: var(--sonne); }
.bereich-handy .sym, .karte-handy .karte-sym { background: var(--himmel); }
.bereich-gefunden .sym, .karte-gefunden .karte-sym { background: var(--koralle); }
.bereich-barrierefrei .sym, .karte-barrierefrei .karte-sym { background: #c9b6ff; }
.bereich-aktuell .sym, .karte-aktuell .karte-sym { background: #a8ecd2; }
.bereich-recht .sym, .karte-recht .karte-sym { background: #e7dccb; }
@media (min-width: 1000px) { .bereich-recht { grid-column: span 2; } }

.ablauf { list-style: none; display: grid; gap: 14px; margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ablauf li { position: relative; padding: 1.5rem; border-radius: 20px; background: var(--karte); border: 1px solid var(--linie); }
.ablauf-nr { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1rem; border-radius: 50%; font: 400 1.7rem/1 var(--titel); color: #17181e; background: var(--sonne); }
.ablauf li:nth-child(2) .ablauf-nr { background: var(--koralle); }
.ablauf li:nth-child(3) .ablauf-nr { background: var(--himmel); }
.ablauf h3 { margin-bottom: .35rem; }
.ablauf p { margin: 0; color: var(--tinte-2); }
.check-schluss h2 { margin-bottom: 1.6rem; }


.ring { --zahl: var(--ziel, 0); position: relative; width: clamp(118px, 30vw, 196px); aspect-ratio: 1; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring-grund { stroke: var(--linie); }
.ring-wert { stroke-linecap: round; stroke-dasharray: var(--zahl) 200; }
.ring-gruen .ring-wert { stroke: var(--mint); }
.ring-gelb .ring-wert { stroke: var(--sonne-2); }
.ring-rot .ring-wert { stroke: var(--koralle); }
.ring-zahl { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; margin: 0; line-height: 1; }
.zaehler { font: 340 clamp(3rem, 2rem + 4vw, 4.4rem)/1 var(--titel); letter-spacing: -.03em; color: var(--tinte); font-size: 0; }
.zaehler::after { content: counter(z); counter-reset: z var(--zahl); font: 340 clamp(2.4rem, 1.4rem + 4vw, 4.2rem)/1 var(--titel); font-variant-numeric: tabular-nums; }
.ring-zahl small { margin-top: .35rem; font: 500 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); }
.muster-bericht .zaehler::after, .muster-bericht .zaehler { color: #17181e; }

.balken { display: block; width: 100%; height: 8px; overflow: visible; }
.balken rect { rx: 2; }
.balken-grund { fill: var(--linie); }
.balken-wert { transform-box: fill-box; transform-origin: 0 50%; }
.balken-gruen .balken-wert { fill: var(--mint); }
.balken-gelb .balken-wert { fill: var(--sonne-2); }
.balken-rot .balken-wert { fill: var(--koralle); }


.check-warten { padding-block: clamp(40px, 7vw, 100px) clamp(60px, 9vw, 120px); min-height: 70vh; }
.check-warten h1 { font-size: clamp(2.6rem, 1.5rem + 5vw, 5rem); margin: .6rem 0 0; }
.check-warten .vorspann { max-width: 52ch; margin-bottom: 2rem; }
.check-warten .check-form { margin-top: 1.5rem; }
.massband-lauf { position: relative; height: 46px; margin: 0 0 2rem; border-radius: 10px; overflow: hidden; background:
  repeating-linear-gradient(90deg, rgba(23, 24, 30, .55) 0 2px, transparent 2px 100px),
  repeating-linear-gradient(90deg, rgba(23, 24, 30, .45) 0 1px, transparent 1px 10px) 0 0 / 100% 40%,
  linear-gradient(var(--sonne), var(--sonne-2)); background-repeat: repeat-x, repeat-x, no-repeat; }
.faden-lauf { position: absolute; left: 0; top: 50%; height: 4px; width: 40%; border-radius: 4px; background: var(--faden); transform: translate(-110%, 6px); box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }
.warte-hinweis { padding: .9rem 1.1rem; border-radius: 14px; background: var(--info-hg); border-left: 4px solid var(--info); }
.lauf-schritte { list-style: none; display: grid; gap: .3rem; margin: 0 0 2rem; }
.lauf-schritte li { display: grid; grid-template-columns: 28px 1fr; gap: .8rem; align-items: center; padding: .85rem 1rem; border-radius: 14px; color: var(--tinte-3); }
.lauf-schritte .punkt { width: 14px; height: 14px; margin-left: 5px; border-radius: 50%; border: 2px solid var(--linie-stark); }
.lauf-schritte .sym-klein { width: 24px; height: 24px; color: var(--gut); }
.schritt-fertig { color: var(--tinte-2) !important; }
.schritt-jetzt { background: var(--karte); color: var(--tinte) !important; font-weight: 600; box-shadow: var(--schatten); }
.schritt-jetzt .punkt { border-color: var(--faden); background: var(--faden); }


.check-ergebnis { position: relative; overflow: hidden; padding-block: clamp(32px, 6vw, 80px) clamp(36px, 6vw, 72px); background: radial-gradient(ellipse 60% 70% at 90% 0%, color-mix(in srgb, var(--sonne) 38%, transparent), transparent 70%); }
.ergebnis-raster { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 960px) { .ergebnis-raster { grid-template-columns: 1fr auto; } }
.check-ergebnis h1 { margin: .9rem 0 1.6rem; font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.6rem); line-height: 1.02; }
.ergebnis-fuer { display: block; font: 500 .9rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: .4rem; }
.ergebnis-host { overflow-wrap: anywhere; }
.ergebnis-note { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem; margin-bottom: 1.8rem; }
.ergebnis-note > div:not(.ring) { flex: 1 1 160px; }
@media (max-width: 520px) { .ergebnis-note { flex-wrap: nowrap; gap: 1rem; } .note-satz { font-size: 1.1rem; } .ring circle { stroke-width: 12; } }
.note-wort { display: inline-block; margin: 0 0 .5rem; padding: .4rem .8rem; border-radius: 999px; font: 700 .95rem/1 var(--text); color: #17181e; }
.note-gruen { background: var(--mint); }
.note-gelb { background: var(--sonne); }
.note-rot { background: var(--koralle); }
.note-satz { margin: 0; font: 400 clamp(1.2rem, 1rem + .8vw, 1.6rem)/1.3 var(--titel); color: var(--tinte); max-width: 30ch; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .45rem .8rem .45rem .6rem; border-radius: 999px; border: 1px solid var(--linie); background: var(--karte); text-decoration: none; font-size: .92rem; color: var(--tinte); }
.chip:hover { border-color: var(--faden); color: var(--tinte); }
.chip b { font: 600 .85rem/1 var(--mono); padding: .25rem .45rem; border-radius: 999px; }
.chip .sym-klein { width: 18px; height: 18px; color: var(--tinte-2); }
.chip-gruen b { background: var(--gut-hg); color: var(--wert-gruen); }
.chip-gelb b { background: var(--mittel-hg); color: var(--wert-gelb); }
.chip-rot b { background: var(--schlecht-hg); color: var(--wert-rot); }
.chip-info b { background: var(--info-hg); color: var(--info); }
.chip-grau b { background: var(--papier-2); color: var(--tinte-2); }
.ergebnis-handy { justify-self: center; width: min(62vw, 250px); margin: 0; }
.handy-rahmen { border: 9px solid #17181e; border-radius: 34px; overflow: hidden; background: #fff; box-shadow: var(--schatten-gross); transform: rotate(3deg); aspect-ratio: 412 / 823; }
.handy-rahmen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ergebnis-handy figcaption { margin-top: 1.1rem; text-align: center; font-size: .85rem; color: var(--tinte-3); }


.check-top h2, .check-bereiche h2 { margin: .6rem 0 clamp(24px, 4vw, 40px); }
.top3 { list-style: none; display: grid; gap: 14px; }
@media (min-width: 960px) { .top3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.top3 li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.4rem; border-radius: 22px; background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten); }
.top-nr { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font: 400 1.6rem/1 var(--titel); color: #17181e; background: var(--sonne); }
.top-2 .top-nr { background: var(--koralle); }
.top-3 .top-nr { background: var(--himmel); }
.top3 h3 { margin: .35rem 0 .5rem; }
.top-tun { margin: 0 0 .6rem; color: var(--tinte); }
.top-kunden { margin: 0; font-size: .93rem; color: var(--tinte-2); }
.top-leer { padding: 1.4rem 1.6rem; border-radius: 20px; background: var(--gut-hg); font-size: 1.1rem; }


.hinweis-box { padding: 1rem 1.2rem; border-radius: 14px; background: var(--info-hg); border-left: 4px solid var(--info); margin-bottom: 1.4rem; }
.karten { display: grid; gap: 16px; align-items: start; }
@media (min-width: 960px) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.karte { padding: clamp(18px, 3vw, 26px); border-radius: 24px; background: var(--karte); border: 1px solid var(--linie); scroll-margin-top: 100px; }
.karte-kopf { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; margin-bottom: 1rem; }
.karte-sym { width: 44px; height: 44px; padding: 10px; border-radius: 14px; color: #17181e; }
.karte-kopf h3 { font: 400 1.45rem/1.1 var(--titel); letter-spacing: -.01em; }
.karte-kopf p { margin: .2rem 0 0; font-size: .88rem; color: var(--tinte-3); }
.karte-wert { font: 340 2.1rem/1 var(--titel); letter-spacing: -.02em; text-align: right; }
.karte-wert small { font: 500 .75rem/1 var(--mono); color: var(--tinte-3); margin-left: .15rem; letter-spacing: 0; }
.karte-ohne { font: 500 .78rem/1.2 var(--mono); color: var(--tinte-3); max-width: 9ch; }
.wert-gruen { color: var(--wert-gruen); }
.wert-gelb { color: var(--wert-gelb); }
.wert-rot { color: var(--wert-rot); }
.karte .balken { margin-bottom: 1.2rem; }
.befunde { list-style: none; display: grid; gap: .9rem; }
.befund { display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: start; }
.sym-status { width: 24px; height: 24px; margin-top: .1rem; }
.befund-gut .sym-status { color: var(--gut); }
.befund-mittel .sym-status { color: var(--mittel); }
.befund-schlecht .sym-status { color: var(--schlecht); }
.befund-hinweis .sym-status, .befund-offen .sym-status { color: var(--info); }
.befund p { margin: 0; }
.befund-titel { font-weight: 600; line-height: 1.35; }
.befund-text { margin-top: .2rem !important; font-size: .93rem; color: var(--tinte-2); overflow-wrap: anywhere; }
.befund-kunden { margin-top: .5rem !important; padding: .55rem .75rem; border-radius: 10px; font-size: .92rem; background: var(--papier-2); color: var(--tinte); }
.befund-kunden b { font-weight: 600; }
.karte-gut { margin-top: 1rem; }
.karte-gut summary { display: inline-flex; align-items: center; gap: .5rem; min-height: 36px; padding: .35rem .85rem; border-radius: 999px; background: var(--gut-hg); color: var(--tinte); font-size: .9rem; font-weight: 500; cursor: pointer; list-style: none; }
.karte-gut summary::-webkit-details-marker { display: none; }
.karte-gut summary::after { content: "+"; font: 500 1rem/1 var(--mono); color: var(--wert-gruen); transition: transform .25s; }
.karte-gut[open] summary::after { transform: rotate(45deg); }
.karte-gut[open] summary { margin-bottom: .9rem; }
.karte-fuss { margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px dashed var(--linie-stark); font-size: .85rem; color: var(--tinte-3); }


.check-angebot { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sonne) 22%, transparent) 30%, color-mix(in srgb, var(--sonne) 22%, transparent)); }
.angebot-kopf { max-width: 760px; margin-bottom: clamp(24px, 4vw, 40px); }
.angebot-kopf h2 { margin-top: .6rem; }
.pakete { list-style: none; display: grid; gap: 14px; margin-bottom: 1.4rem; }
@media (min-width: 900px) { .pakete { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; } }
.paket { position: relative; display: flex; flex-direction: column; padding: 1.5rem; border-radius: 22px; background: var(--karte); border: 1px solid var(--linie-stark); }
.paket h3 { margin-bottom: .4rem; }
.paket-preis { margin: 0 0 .6rem; font: 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1.05 var(--titel); letter-spacing: -.02em; }
.paket p:last-child { margin: 0; color: var(--tinte-2); font-size: .95rem; }
.paket-empfohlen { border: 2px solid var(--faden); box-shadow: 0 0 0 5px var(--faden-zart); }
.paket-marke { align-self: flex-start; margin-bottom: .8rem; padding: .35rem .65rem; border-radius: 8px; background: var(--sonne); color: #17181e; font: 600 .74rem/1 var(--mono); letter-spacing: .04em; }
.angebot-starter { padding: .9rem 1.1rem; border-radius: 14px; background: var(--karte); border-left: 4px solid var(--koralle); max-width: 80ch; }
.check-angebot .knoepfe { margin-top: 1.4rem; }
.check-angebot .knopf:not(.rand) { --hg: var(--faden-knopf); --vg: #fff; }
.check-anfrage h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); margin-bottom: .8rem; }
.check-anfrage .formular { margin-top: 1.4rem; }


.check-hinweise h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); margin-bottom: 1rem; }
.hinweis-liste { display: grid; gap: .8rem; padding-left: 1.2rem; margin-bottom: 1.6rem; color: var(--tinte-2); }
.teilen { margin-bottom: 1.4rem; max-width: 640px; }
.teilen input { font-family: var(--mono) !important; font-size: .9rem !important; }


@keyframes c-zaehlen { from { --zahl: 0; } }
@keyframes c-wachsen { from { transform: scaleX(0); } }
@keyframes c-pinsel { from { transform: rotate(-1.5deg) scaleX(0); } }
@keyframes c-heben { from { opacity: 0; transform: translateY(18px); } }
@keyframes c-schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes c-faden { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes c-lauf { to { transform: translate(260%, 6px); } }
@keyframes c-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(210, 63, 40, .45); } 50% { box-shadow: 0 0 0 7px rgba(210, 63, 40, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .ring { animation: c-zaehlen 1.6s .25s cubic-bezier(.2, .7, .2, 1) both; }
  .balken-wert { animation: c-wachsen 1.2s .4s cubic-bezier(.2, .7, .2, 1) both; }
  .held-pinsel::before { animation: c-pinsel .7s .5s cubic-bezier(.6, 0, .3, 1) both; }
  .held-text > * { animation: c-heben .8s cubic-bezier(.2, .7, .2, 1) both; }
  .held-text > :nth-child(3) { animation-delay: .06s; }
  .held-text > :nth-child(4) { animation-delay: .14s; }
  .held-text > :nth-child(5) { animation-delay: .22s; }
  .muster-bericht { animation: c-heben 1s .3s cubic-bezier(.2, .7, .2, 1) both; }
  .aufkleber { animation: c-heben .7s both, c-schweben 6s ease-in-out infinite; }
  .aufkleber-1 { animation-delay: .9s, 1.6s; }
  .aufkleber-2 { animation-delay: 1.1s, 2.4s; }
  .aufkleber-3 { animation-delay: 1.3s, 3.1s; }
  .held-faden path { stroke-dasharray: 1; animation: c-faden 2.4s .4s cubic-bezier(.65, 0, .35, 1) both; }
  .faden-lauf { animation: c-lauf 1.8s cubic-bezier(.45, 0, .55, 1) infinite; }
  .schritt-jetzt .punkt { animation: c-puls 1.4s ease-in-out infinite; }
  .top3 li, .karte { animation: c-heben .7s cubic-bezier(.2, .7, .2, 1) both; }
  .top3 li:nth-child(2) { animation-delay: .08s; }
  .top3 li:nth-child(3) { animation-delay: .16s; }
}
@media (prefers-reduced-motion: reduce) {
  .faden-lauf { transform: translate(60%, 6px); }
}


@media print {
  .check-angebot .knoepfe, .check-anfrage, .check-hinweise .knoepfe, .teilen, .chips, .fuss { display: none !important; }
  .check-ergebnis, .check-angebot { background: none; }
  .karte, .top3 li, .paket { break-inside: avoid; box-shadow: none; }
  .karte, .top3 li { animation: none !important; }
  details::details-content { content-visibility: visible; display: block; }
  .karte-gut summary::after { content: none; }
  .handy-rahmen { transform: none; box-shadow: none; }
}