/* Hebel-Radar 2027 mit Ritter-Pass (Steffen, 13.10.2026) – ernsthaft, dunkle Olivtinte + Ritter-Grün (Pink bleibt dem #pinkpullunder vorbehalten, nur als winziger Akzent für die Hebel) */
.ir-radar { position: relative; isolation: isolate; overflow: hidden; padding: var(--ir-abstand) 0; background: radial-gradient(120% 90% at 85% 0%, #2B3B12 0%, var(--ir-tinte) 55%, var(--ir-tinte-2) 100%); color: #E6EADD; }
.ir-radar--seite { padding-top: 180px; min-height: 100vh; }
@media (max-width: 759px) { .ir-radar--seite { padding-top: 150px; } }
.ir-radar__glanz { position: absolute; inset: auto auto -30% -15%; width: 60vmax; height: 60vmax; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(162, 192, 45, .20), rgba(162, 192, 45, 0)); }
.ir-radar [hidden] { display: none !important; }
.ir-radar [data-radar-schritt] { scroll-margin-top: 100px; }

/* Start */
.ir-radar__start { display: grid; gap: 40px 64px; align-items: center; }
.ir-radar__start-text { display: grid; gap: 18px; justify-items: start; }
.ir-radar__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #C9D59A; }
.ir-radar__kicker span { padding: 6px 12px; border-radius: 10px; background: var(--ir-gruen); color: var(--ir-tinte); letter-spacing: .02em; text-transform: none; font-size: 15px; }
.ir-radar__titel { font-family: var(--ir-serif); font-weight: 300; font-size: clamp(38px, 4.8vw, 66px); line-height: 1.03; color: #fff; text-wrap: balance; }
.ir-radar__lead { max-width: 36em; font-size: clamp(17px, 1.4vw, 19px); font-weight: 500; }
.ir-radar__start-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }
.ir-radar__frei { font-size: 14px; font-weight: 600; color: #C9D59A; max-width: 22em; }
.ir-radar .ir-knopf--gross { min-height: 56px; padding: 14px 30px; font-size: 15px; border-radius: 17px; }
@media (min-width: 960px) { .ir-radar__start { grid-template-columns: 1.1fr 1fr; } }

/* Ritter-Pass: Stempelkarte auf hellem Karton */
.ir-pass { position: relative; padding: 22px 22px 20px; border-radius: 24px; background: linear-gradient(160deg, #FBFAF4, #EFEDE2); color: var(--ir-tinte); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); transform: rotate(1.5deg); }
.ir-pass::before { content: ""; position: absolute; inset: 8px; border: 1.5px dashed rgba(22, 33, 14, .18); border-radius: 17px; pointer-events: none; }
.ir-pass__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 10px 14px; border-radius: 14px; background: var(--ir-tinte); }
.ir-pass__logo { display: block; width: 116px; height: auto; }
.ir-pass__name { font-family: var(--ir-serif); font-size: 22px; color: #fff; }
.ir-pass__felder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 10px; list-style: none; margin: 0; padding: 0; }
.ir-pass__feld { display: grid; justify-items: center; gap: 6px; text-align: center; }
.ir-pass__feld small { font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--ir-leise); line-height: 1.15; }
.ir-pass__stempel { position: relative; display: grid; place-items: center; width: 100%; max-width: 62px; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(22, 33, 14, .25); }
.ir-pass__stempel svg { width: 58%; fill: none; stroke: transparent; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ir-pass__feld.ist-gestempelt .ir-pass__stempel { border: 3px solid var(--ir-gruen-dunkel); background: radial-gradient(circle, rgba(162, 192, 45, .35), rgba(162, 192, 45, .12)); transform: rotate(-8deg); }
.ir-pass__feld.ist-gestempelt .ir-pass__stempel svg { stroke: var(--ir-gruen-dunkel); }
.ir-pass__feld.ist-gestempelt small { color: var(--ir-tinte); }
.ir-pass__feld.ist-neu .ir-pass__stempel { animation: ir-stempel .7s var(--ir-ease); }
.ir-pass__text { margin-top: 16px; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
@keyframes ir-stempel { 0% { transform: scale(2.2) rotate(-25deg); opacity: 0; } 55% { transform: scale(.88) rotate(-6deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); } }

/* Pass-Leiste im Quiz */
.ir-pass__leiste { display: flex; gap: 6px; list-style: none; margin: 0 0 6px; padding: 0; }
.ir-pass__punkt { flex: 1; display: grid; place-items: center; height: 30px; border-radius: 9px; border: 1.5px dashed #C9CDBE; background: #fff; }
.ir-pass__punkt svg { width: 18px; fill: none; stroke: transparent; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ir-pass__punkt.ist-gestempelt { border: 1.5px solid var(--ir-gruen-dunkel); background: var(--ir-gruen); }
.ir-pass__punkt.ist-gestempelt svg { stroke: var(--ir-tinte); }
.ir-pass__punkt.ist-neu { animation: ir-stempel-klein .6s var(--ir-ease); }
@keyframes ir-stempel-klein { 0% { transform: scale(1.7); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }

/* Quiz */
.ir-radar__quiz { max-width: 760px; margin: 0 auto; padding: clamp(24px, 3.4vw, 40px); border-radius: var(--ir-radius-gross); background: #fff; color: var(--ir-tinte); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); position: relative; }
.ir-radar__quiz.ist-neu .ir-radar__frage, .ir-radar__quiz.ist-neu .ir-radar__antworten { animation: ir-ein .35s var(--ir-ease); }
.ir-radar__toast { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); padding: 8px 14px; border-radius: 12px; background: var(--ir-tinte); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); animation: ir-ein .3s var(--ir-ease); z-index: 2; }
.ir-radar__welt { margin-top: 16px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ir-gruen-dunkel); }
.ir-radar__frage { font-family: var(--ir-serif); font-weight: 400; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; margin: 14px 0 24px; min-height: 2.4em; text-wrap: balance; }
.ir-radar__antworten { display: grid; gap: 10px; }
.ir-radar__antworten--drei { grid-template-columns: repeat(3, 1fr); }
.ir-radar__antwort { min-height: 54px; padding: 12px 16px; border-radius: 16px; border: 1.5px solid var(--ir-linie); background: #fff; text-align: left; font-size: 17px; font-weight: 700; color: var(--ir-tinte); cursor: pointer; transition: border-color .2s, background-color .2s, transform .15s; }
.ir-radar__antworten--drei .ir-radar__antwort { text-align: center; }
.ir-radar__antwort:hover { border-color: var(--ir-gruen-dunkel); background: var(--ir-mint); }
.ir-radar__antwort.ist-gewaehlt { border-color: var(--ir-gruen); background: var(--ir-gruen); transform: scale(.99); }
.ir-radar__zurueck { margin-top: 16px; padding: 4px 0; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--ir-leise); text-decoration: underline; cursor: pointer; }

/* Laden */
.ir-radar__laden { display: grid; justify-items: center; gap: 22px; padding: 80px 0; font-size: 19px; font-weight: 700; text-align: center; }
.ir-radar__puls { width: 84px; height: 84px; border-radius: 50%; border: 2px solid rgba(162, 192, 45, .6); background: conic-gradient(from 0deg, rgba(162, 192, 45, .7), rgba(162, 192, 45, 0) 30%); animation: ir-radar-dreh 1.4s linear infinite; }

/* Ergebnis */
.ir-radar__ergebnis { display: grid; gap: 28px; animation: ir-ein .5s var(--ir-ease); }
.ir-radar__oben { display: grid; gap: 24px 48px; align-items: center; }
@media (min-width: 960px) { .ir-radar__oben { grid-template-columns: 1fr 1fr; } }
.ir-radar__bild { display: grid; justify-items: center; gap: 8px; }
.ir-radar__svg { width: 100%; max-width: 480px; height: auto; overflow: visible; }
.ir-radar__ring { fill: none; stroke: rgba(230, 234, 221, .16); stroke-width: 1; }
.ir-radar__achse { stroke: rgba(230, 234, 221, .16); stroke-width: 1; }
.ir-radar__label { font-family: var(--ir-sans); font-size: 15px; font-weight: 800; fill: #E6EADD; }
.ir-radar__label.ist-hebel { fill: #FF8CC0; }
.ir-radar__top { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 5 5; opacity: .75; }
.ir-radar__du { fill: rgba(162, 192, 45, .38); stroke: var(--ir-gruen); stroke-width: 3; stroke-linejoin: round; animation: ir-radar-auf 1s var(--ir-ease) both; }
.ir-radar__punkt { fill: var(--ir-gruen); stroke: var(--ir-tinte); stroke-width: 2; }
.ir-radar__punkt.ist-hebel { fill: #FF8CC0; }
@keyframes ir-radar-auf { from { transform: scale(.1); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ir-radar__legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-size: 13px; font-weight: 700; }
.ir-radar__legende span::before { content: ""; display: inline-block; width: 22px; height: 0; margin-right: 8px; vertical-align: middle; border-top: 3px solid var(--ir-gruen); }
.ir-radar__legende .ir-radar__legende-top::before { border-top: 2px dashed #fff; }
.ir-radar__zahlen { display: grid; gap: 10px; align-content: start; }
.ir-radar__eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ir-gruen); }
.ir-radar__eyebrow--pink { color: #FF8CC0; }
.ir-radar__gesamt { display: flex; align-items: baseline; gap: 10px; }
.ir-radar__gesamt b { font-family: var(--ir-serif); font-weight: 300; font-size: clamp(64px, 8vw, 96px); line-height: .95; color: #fff; }
.ir-radar__gesamt span { font-size: 20px; font-weight: 700; color: #C9D59A; }
.ir-radar__skala { position: relative; height: 12px; margin: 26px 0 22px; border-radius: 7px; background: linear-gradient(90deg, rgba(230, 234, 221, .14), rgba(162, 192, 45, .55)); }
.ir-radar__skala span { position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%; background: var(--ir-gruen); border: 4px solid #fff; transform: translate(-50%, -50%); }
.ir-radar__skala i { position: absolute; top: -8px; bottom: -8px; width: 3px; border-radius: 2px; background: #fff; }
.ir-radar__skala i::after { content: attr(data-label); position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 12px; font-weight: 800; color: #fff; white-space: nowrap; }
.ir-radar__skala small { position: absolute; top: 16px; font-size: 11.5px; font-weight: 700; color: #9EA78C; }
.ir-radar__skala small:last-of-type { right: 0; }
.ir-radar__abstand { font-size: 19px; font-weight: 800; color: #fff; }
.ir-radar__staerke { font-weight: 600; color: #C9D59A; }
.ir-radar__h3 { margin-top: 10px; font-family: var(--ir-serif); font-weight: 400; font-size: 26px; color: #fff; }
.ir-radar__hebel { display: grid; gap: 10px; counter-reset: hebel; list-style: none; margin: 0; padding: 0; }
.ir-radar__hebel li { position: relative; padding: 14px 16px 14px 58px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); counter-increment: hebel; }
.ir-radar__hebel li::before { content: counter(hebel); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #FF8CC0; color: var(--ir-tinte); font-weight: 800; }
.ir-radar__hebel b { color: #fff; font-size: 17px; }
.ir-radar__hebel-wert { margin-left: 10px; font-size: 13px; font-weight: 700; color: #C9D59A; }
.ir-radar__hebel p { margin-top: 4px; font-size: 15px; line-height: 1.45; }
.ir-radar__schaetzung { font-size: 12.5px; color: #9EA78C; }

/* Pass voll → Code */
.ir-radar__belohnung { display: grid; gap: 18px 28px; align-items: center; padding: clamp(20px, 3vw, 30px); border-radius: var(--ir-radius-gross); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
@media (min-width: 900px) { .ir-radar__belohnung { grid-template-columns: 280px 1fr auto; } }
.ir-pass--klein { padding: 14px; transform: rotate(-2deg); }
.ir-pass--klein .ir-pass__felder { gap: 6px; }
.ir-pass--klein .ir-pass__stempel { border-width: 1.5px; }
.ir-radar__code-text { display: grid; gap: 6px; }
.ir-radar__code-titel { font-family: var(--ir-serif); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; color: #fff; }
.ir-radar__code-klein { font-size: 14px; color: #C9D59A; max-width: 40em; }
.ir-radar__code { display: grid; justify-items: center; gap: 2px; padding: 14px 22px; border-radius: 18px; border: 2px dashed var(--ir-gruen); background: var(--ir-tinte-2); color: #fff; cursor: pointer; transition: transform .3s var(--ir-ease), opacity .3s; }
.ir-radar__code b { font-size: 30px; letter-spacing: .12em; }
.ir-radar__code span { font-size: 12.5px; font-weight: 700; color: var(--ir-gruen); }
.ir-radar__belohnung:not(.ist-voll) .ir-radar__code { opacity: .25; filter: blur(6px); pointer-events: none; }
.ir-radar__belohnung.ist-voll .ir-radar__code { animation: ir-code .8s .2s var(--ir-ease) both; }
@keyframes ir-code { 0% { transform: scale(.6); filter: blur(6px); opacity: .25; } 70% { transform: scale(1.06); filter: blur(0); opacity: 1; } 100% { transform: scale(1); } }

/* Weiche */
.ir-radar__weg { display: grid; gap: 10px; }
.ir-radar__weg-grund { font-weight: 600; color: #C9D59A; }
.ir-radar__karten { display: grid; gap: 14px; margin-top: 6px; }
@media (min-width: 900px) { .ir-radar__karten { grid-template-columns: 1.4fr 1fr 1fr; } }
.ir-radar__karte { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: 20px; background: #fff; color: var(--ir-tinte); text-decoration: none; transition: transform .2s var(--ir-ease), box-shadow .2s; }
.ir-radar__karte:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0, 0, 0, .3); }
.ir-radar__karte.ist-haupt { grid-template-columns: 110px 1fr; padding: 20px; outline: 3px solid var(--ir-gruen); outline-offset: -3px; }
.ir-radar__karte-bild { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--ir-mint); }
.ir-radar__karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.ir-radar__karte-bild svg { width: 50%; fill: none; stroke: var(--ir-gruen-dunkel); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ir-radar__karte--beratung .ir-radar__karte-bild { background: var(--ir-tinte); }
.ir-radar__karte--beratung .ir-radar__karte-bild svg { stroke: var(--ir-gruen); }
.ir-radar__karte-text { display: grid; gap: 4px; }
.ir-radar__karte-text small { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ir-gruen-dunkel); }
.ir-radar__karte-text b { font-size: 17px; line-height: 1.25; }
.ir-radar__karte.ist-haupt .ir-radar__karte-text b { font-family: var(--ir-serif); font-weight: 400; font-size: 23px; }
.ir-radar__karte-zeile { font-size: 14px; color: var(--ir-leise); }
.ir-radar__karte-knopf { justify-self: start; margin-top: 8px; padding: 8px 14px; border-radius: 12px; background: var(--ir-gruen); font-size: 14px; font-weight: 800; }
.ir-radar__karte:not(.ist-haupt) .ir-radar__karte-knopf { background: var(--ir-mint); }

/* Report */
.ir-radar__report { display: grid; gap: 20px 40px; padding: clamp(22px, 3.4vw, 36px); border-radius: var(--ir-radius-gross); background: #fff; color: var(--ir-tinte); }
@media (min-width: 900px) { .ir-radar__report { grid-template-columns: 1fr 1.2fr; } }
.ir-radar__report .ir-radar__eyebrow { color: var(--ir-gruen-dunkel); }
.ir-radar__report-titel { margin-top: 8px; font-family: var(--ir-serif); font-size: 22px; line-height: 1.3; }
.ir-radar__report-felder { display: grid; gap: 12px; }
.ir-radar__name { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.ir-radar__report-felder label span { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.ir-radar__report-felder input[type="text"], .ir-radar__report-felder input[type="email"] { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--ir-linie); font: inherit; }
.ir-radar__honig { position: absolute; left: -9999px; }
.ir-radar__check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.ir-radar__check span { display: inline !important; font-weight: 500 !important; }
.ir-radar__report button { justify-self: start; }
.ir-radar__dsgvo { font-size: 12.5px; color: var(--ir-leise); }
.ir-radar__danke { padding: 12px 14px; border-radius: 14px; background: var(--ir-mint); font-weight: 700; }
.ir-radar__fehler { padding: 12px 14px; border-radius: 14px; background: #FDE7E7; color: #8A1C1C; font-weight: 700; }
.ir-radar__nochmal { justify-self: center; border: 0; background: none; color: #C9D59A; font-weight: 700; text-decoration: underline; cursor: pointer; }

@media (max-width: 600px) {
	.ir-pass__felder { gap: 10px 6px; }
	.ir-pass__feld small { font-size: 10.5px; }
	.ir-radar__antworten--drei { grid-template-columns: 1fr; }
	.ir-radar__name { grid-template-columns: 1fr; }
	.ir-radar__karte.ist-haupt { grid-template-columns: 84px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.ir-pass__feld.ist-neu .ir-pass__stempel, .ir-pass__punkt.ist-neu, .ir-radar__du, .ir-radar__belohnung.ist-voll .ir-radar__code, .ir-radar__puls { animation: none; }
}
@keyframes ir-radar-dreh { to { transform: rotate(360deg); } }