/* INSO-Terminkalender. Uebernimmt das Farbsystem "Marine & Morgenlicht" und die
   Schriften der bestehenden Auftritte, damit der Kalender wie ein Teil der Seite
   wirkt und nicht wie ein eingebautes Fremdwidget. */

@font-face { font-family:"Frank Ruhl Libre"; src:url("fonts/FrankRuhlLibre-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Frank Ruhl Libre"; src:url("fonts/FrankRuhlLibre-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("fonts/Montserrat-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("fonts/Montserrat-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("fonts/Montserrat-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("fonts/Montserrat-700.woff2") format("woff2"); font-weight:700; font-display:swap; }

.inso-kal {
  --bg:oklch(0.994 0.003 240);
  --surface:oklch(0.978 0.006 238);
  --surface-2:oklch(1 0.002 240);
  --ink:oklch(0.28 0.04 250);
  --ink-soft:oklch(0.45 0.03 250);
  --ink-3:oklch(0.52 0.028 250);
  --line:oklch(0.912 0.008 240);
  --line-2:oklch(0.85 0.012 240);
  --marine:oklch(0.28 0.04 250);
  --terra:oklch(0.50 0.135 248);
  --terra-deep:oklch(0.43 0.13 248);
  --apricot:oklch(0.86 0.055 235);
  --apricot-tint:oklch(0.966 0.012 235);
  --apricot-line:oklch(0.90 0.025 235);
  --on-dark:oklch(0.97 0.006 240);
  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px oklch(0.28 0.04 250 / .06), 0 1px 1px oklch(0.28 0.04 250 / .04);
  --shadow-md:0 14px 40px -18px oklch(0.28 0.04 250 / .28);
  --serif:"Frank Ruhl Libre",Georgia,serif;
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;

  font-family:var(--sans);
  color:var(--ink);
  /* Der Kalender steht als eigene Karte auf der Seite, gleiche Sprache wie das
     Rueckruf-Formular: weisse Flaeche, feiner Rahmen, weicher Schatten. */
  background:var(--surface-2);
  border:1.5px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* Die Karte laeuft links und rechts buendig mit den uebrigen Seitenkarten:
     keine eigene Maximalbreite, kein Aussenabstand. Das Innenpolster bleibt,
     sonst klebt der Inhalt am Kartenrand. Fliesstexte und Antwortlisten sind
     weiter unten einzeln begrenzt, damit die Zeilen lesbar kurz bleiben. */
  max-width:none;
  margin:0;
  padding:clamp(1.4rem,3.5vw,2.4rem);
  box-sizing:border-box;
}
.inso-kal *,.inso-kal *::before,.inso-kal *::after{box-sizing:border-box}

/* ---------- Kopf: Fortschritt und Telefon ---------- */
.ik-kopf{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
/* Fortschritt mit nummerierten Punkten: man sieht auf einen Blick, wo man steht
   und wie viel noch kommt. Die Nummern erzeugt ein CSS-Zaehler, das Markup
   bleibt unveraendert. */
.ik-schritte{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;margin:0;padding:0;list-style:none;counter-reset:ikschritt}
.ik-schritte li{font-size:.78rem;color:var(--ink-3);display:flex;align-items:center;gap:.4rem;counter-increment:ikschritt}
.ik-schritte li::before{content:counter(ikschritt);width:1.45rem;height:1.45rem;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:.72rem;font-weight:700;
  background:var(--surface);border:1.5px solid var(--line-2);color:var(--ink-3);
  transition:background .2s,border-color .2s,color .2s}
.ik-schritte li::after{content:"";width:1.1rem;height:1.5px;background:var(--line-2);border-radius:2px;transition:background .2s}
.ik-schritte li:last-child::after{display:none}
.ik-schritte li[aria-current="step"]{color:var(--ink);font-weight:600}
.ik-schritte li[aria-current="step"]::before{background:var(--terra);border-color:var(--terra);color:var(--on-dark)}
.ik-schritte li[data-fertig="ja"]{color:var(--terra-deep)}
.ik-schritte li[data-fertig="ja"]::before{content:"✓";background:var(--apricot-tint);border-color:var(--terra);color:var(--terra-deep)}
.ik-schritte li[data-fertig="ja"]::after{background:var(--apricot-line)}
.ik-tel{font-size:.85rem;color:var(--ink-soft)}
.ik-tel a{color:var(--terra-deep);font-weight:600;text-decoration:none;border-bottom:1px solid var(--apricot-line)}
.ik-tel a:hover{border-bottom-color:var(--terra)}

/* ---------- Typografie ---------- */
.inso-kal h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.45rem,4vw,1.95rem);line-height:1.2;margin:0 0 .5rem;color:var(--marine);letter-spacing:-.01em}
.inso-kal h3{font-family:var(--sans);font-weight:600;font-size:1rem;margin:0 0 .35rem;color:var(--ink)}
/* Fliesstext bleibt auf lesbarer Zeilenlaenge, auch wenn die Karte jetzt ueber
   die volle Inhaltsbreite laeuft. */
.ik-lead{color:var(--ink-soft);margin:0 0 1.5rem;font-size:1rem;max-width:52rem}
.ik-demo{max-width:64rem}
.ik-hilfe{display:block;color:var(--ink-3);font-size:.85rem;margin:.15rem 0 .55rem;line-height:1.5}

/* ---------- Felder ---------- */
/* Die Eingaben eines Schrittes stehen auf einer eigenen Flaeche, damit der
   Schritt als eine Einheit lesbar ist und nicht als lose Reihe von Kaesten. */
/* Flaeche leicht getoent, die Eingabefelder darauf weiss: so heben sich die
   Felder ab, statt mit der Karte zu verschmelzen (beide waeren sonst weiss).
   Zwei Spalten: Name und Telefon teilen sich die erste Zeile, alles Weitere
   laeuft ueber die volle Breite. Das spart rund ein Drittel Hoehe. */
.ik-block{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.2rem;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-lg);
  padding:1.2rem 1.2rem .2rem;box-shadow:var(--shadow-sm)}
.ik-block .ik-feld{grid-column:1/-1;margin-bottom:1rem}
.ik-block .ik-feld[data-feld=telefon]{grid-column:auto}
/* Kontaktschritt, Sebastians Vorgabe vom 14.09.2026: Vorname und Nachname teilen
   sich die erste Zeile, Telefon und E-Mail stehen darunter. Deshalb bleibt dieser
   Block bei zwei Spalten, auch auf breiten Schirmen, und alle vier Felder nehmen
   je eine Spalte. Die Dreispaltenregel unten gilt ausdruecklich nicht fuer ihn,
   sonst rutschte die E-Mail allein in die zweite Zeile. */
.ik-kontakt .ik-feld[data-feld=vorname],.ik-kontakt .ik-feld[data-feld=nachname],
.ik-kontakt .ik-feld[data-feld=email]{grid-column:auto}
/* Auf breiten Schirmen stehen die uebrigen Angaben in einer Zeile. Bei nur
   zwei Spalten waeren die Felder dort ueber 500 px breit, das liest sich schlecht. */
@media (min-width:1000px){
  .ik-block:not(.ik-kontakt){grid-template-columns:repeat(3,minmax(0,1fr))}
  .ik-block:not(.ik-kontakt) .ik-feld[data-feld=email]{grid-column:auto}
}
/* Die Ja-Nein-Kaesten brauchen weniger Luft als ein Eingabefeld. */
.ik-block .ik-opt{padding:.6rem .8rem;align-items:center}
.ik-block .ik-opt input{margin:0}
/* Die Felder einer Zeile sollen gleich hoch beginnen, auch wenn ein Hilfetext
   zwei Zeilen braucht und der daneben nur eine. */
.ik-block .ik-feld{display:flex;flex-direction:column}
.ik-block .ik-feld > input{margin-top:auto}
@media (max-width:600px){
  .ik-block{grid-template-columns:minmax(0,1fr)}
  .ik-block .ik-feld[data-feld=telefon]{grid-column:1/-1}
  .ik-kontakt .ik-feld[data-feld=vorname],.ik-kontakt .ik-feld[data-feld=nachname],
  .ik-kontakt .ik-feld[data-feld=email]{grid-column:1/-1}
}
@media (max-width:480px){.ik-block{padding:1rem 1rem .1rem}}
.ik-feld{margin-bottom:1.4rem}
.ik-feld > label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.1rem}
/* Ankreuzfelder stehen ebenfalls in einem .ik-feld, dort gewinnt sonst die
   block-Regel darueber und legt den Text unter das Kaestchen statt daneben. */
.ik-feld > label.ik-opt{display:flex;font-weight:400}
.ik-pflicht{color:var(--terra-deep);font-weight:700;margin-left:.15rem}
.ik-frei{font-weight:400;color:var(--ink-3);font-size:.8rem;margin-left:.4rem}
.inso-kal input[type=text],.inso-kal input[type=tel],.inso-kal input[type=email],.inso-kal input[type=number],.inso-kal select{
  width:100%;font:inherit;font-size:1rem;padding:.7rem .85rem;border:1.5px solid var(--line-2);
  border-radius:var(--radius);background:var(--surface-2);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.inso-kal input:focus-visible,.inso-kal select:focus-visible,.inso-kal button:focus-visible,.ik-opt:focus-within{
  outline:3px solid var(--terra);outline-offset:2px}
.inso-kal input[aria-invalid=true]{border-color:var(--terra);background:oklch(0.985 0.012 30)}
.ik-fehler{display:block;color:var(--terra-deep);font-size:.85rem;font-weight:600;margin-top:.35rem}
.ik-fehler::before{content:"! ";font-weight:700}

/* Optionen als grosse Klickflaechen, gut fuer Daumen und fuer Menschen unter Stress */
/* Antwortlisten bleiben schmal: ueber die volle Breite von 52rem wuerden die
   Zeilen zu lang zum bequemen Lesen. Die Standortkarten sind davon ausgenommen. */
.ik-optionen{display:grid;gap:.5rem;margin-top:.5rem;max-width:40rem}
.ik-optionen.ik-orte{max-width:none}
.ik-opt{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .85rem;border:1.5px solid var(--line);
  border-radius:var(--radius);background:var(--surface-2);cursor:pointer;transition:border-color .15s,background .15s}
.ik-opt:hover{border-color:var(--apricot-line);background:var(--apricot-tint)}
.ik-opt input{margin:.28rem 0 0;accent-color:var(--terra);width:1.05rem;height:1.05rem;flex:none}
.ik-opt span{font-size:.95rem;line-height:1.45}
.ik-opt:has(input:checked){border-color:var(--terra);background:var(--apricot-tint);box-shadow:inset 0 0 0 1px var(--terra)}

/* Die Standortseiten geben allen input-Elementen mindestens 52 px Höhe.
   Das gilt für Texteingaben, nicht für native Auswahlfelder. Die Antwortzeile
   bleibt das große Touch-Ziel; das Kontrollfeld sitzt an der ersten Textzeile. */
.inso-kal input[type=checkbox],.inso-kal input[type=radio]{
  appearance:auto;box-sizing:border-box;padding:0;
  width:1.125rem;height:1.125rem;min-width:1.125rem;min-height:1.125rem;
  max-width:1.125rem;max-height:1.125rem;flex:0 0 1.125rem;
  accent-color:var(--terra)}
.ik-optionen:not(.ik-orte) > .ik-opt{
  align-items:flex-start;gap:.75rem;min-height:52px;padding:.8rem 1rem;font-weight:500}
.ik-optionen:not(.ik-orte) > .ik-opt > input{margin:.14rem 0 0}
.ik-optionen:not(.ik-orte) > .ik-opt > span{display:block;min-width:0;flex:1;line-height:1.5}
/* Ein gemeinsamer Fokusrahmen statt zweier ineinanderliegender Umrandungen. */
.inso-kal .ik-opt input:focus,.inso-kal .ik-opt input:focus-visible{outline:none}
.inso-kal .ik-opt:focus-within{outline:2px solid var(--terra);outline-offset:3px}

/* ---------- Standortwahl als Kartenraster ----------
   Vier Orte untereinander ergeben eine lange Rutschbahn, bevor man ueberhaupt
   den Weiter-Knopf sieht. Als 2 x 2 passt der ganze Schritt auf einen Blick,
   und das Raster nimmt die Standortkarten der Startseite auf. */
.ik-orte{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:.7rem}
.ik-ort{position:relative;align-items:center;gap:.85rem;padding:1rem;border-radius:var(--radius-lg);
  background:var(--surface-2);transition:border-color .18s,background .18s,box-shadow .18s,transform .18s}
/* Das versteckte Radio wuerde sonst beim Mausklick den focus-within-Rahmen
   aus der allgemeinen .ik-opt-Regel ausloesen. Tastaturfokus bleibt sichtbar. */
.ik-ort:focus-within{outline:none}
.ik-ort:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
/* Der Radiopunkt bleibt fuer Tastatur und Screenreader da, sichtbar fuehrt die
   Karte selbst plus das Haekchen rechts. */
.ik-ort input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ik-ort-mi{width:2.5rem;height:2.5rem;border-radius:12px;background:var(--apricot-tint);border:1px solid var(--apricot-line);
  color:var(--terra);display:grid;place-items:center;flex:none;transition:background .18s,color .18s,border-color .18s}
.ik-ort-mi svg{width:1.3rem;height:1.3rem}
.ik-ort-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}
.ik-ort-txt strong{font-size:1.02rem;font-weight:700;color:var(--ink);line-height:1.3}
.ik-ort-txt small{color:var(--ink-3);font-size:.85rem;line-height:1.4}
.ik-ort-haken{width:1.6rem;height:1.6rem;border-radius:50%;border:1.5px solid var(--line-2);background:var(--surface);
  color:transparent;display:grid;place-items:center;flex:none;transition:background .18s,border-color .18s,color .18s}
.ik-ort-haken svg{width:.9rem;height:.9rem}
.ik-ort:has(input:checked){box-shadow:inset 0 0 0 2px var(--terra),var(--shadow-sm)}
.ik-ort:has(input:checked) .ik-ort-mi{background:var(--terra);border-color:var(--terra);color:var(--on-dark)}
.ik-ort:has(input:checked) .ik-ort-haken{background:var(--terra);border-color:var(--terra);color:var(--on-dark)}
.ik-ort:has(input:focus-visible){outline:3px solid var(--terra);outline-offset:2px}
@media (max-width:560px){
  .ik-orte{grid-template-columns:minmax(0,1fr)}
  .ik-ort:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){.ik-ort:hover{transform:none}}

/* ---------- Kostenweiche ---------- */
.ik-kosten{border:1.5px solid var(--apricot-line);background:var(--apricot-tint);border-radius:var(--radius-lg);
  padding:1.1rem 1.2rem;margin:1.4rem 0}
.ik-kosten h3{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--marine);margin-bottom:.3rem}
.ik-kosten p{margin:0 0 .5rem;font-size:.95rem;color:var(--ink-soft)}
.ik-kosten p:last-child{margin-bottom:0}
.ik-kosten .ik-ausweg{font-size:.88rem;color:var(--ink-3);border-top:1px solid var(--apricot-line);padding-top:.6rem;margin-top:.7rem}

/* ---------- Freiwilliger Block ---------- */
.ik-optional{border:1.5px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);margin:1.5rem 0}
.ik-optional > summary{cursor:pointer;padding:.9rem 1.1rem;font-weight:600;font-size:.95rem;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:1rem;border-radius:var(--radius-lg)}
.ik-optional > summary::-webkit-details-marker{display:none}
.ik-optional > summary::after{content:"+";font-size:1.3rem;color:var(--terra);font-weight:600;line-height:1}
.ik-optional[open] > summary::after{content:"–"}
.ik-optional > summary small{display:block;font-weight:400;color:var(--ink-3);font-size:.82rem;margin-top:.15rem}
.ik-optional-inhalt{padding:.2rem 1.1rem 1.1rem;border-top:1px solid var(--line)}

/* ---------- Slots ---------- */
.ik-tag{margin-bottom:1.35rem}
.ik-tag h3{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--marine);margin-bottom:.55rem}
.ik-slots{display:flex;flex-wrap:wrap;gap:.5rem}
.ik-slot{font:inherit;font-size:.95rem;font-weight:600;padding:.6rem 1rem;border:1.5px solid var(--line-2);
  border-radius:var(--radius);background:var(--surface-2);color:var(--ink);cursor:pointer;transition:all .15s}
.ik-slot:hover{border-color:var(--terra);background:var(--apricot-tint);color:var(--terra-deep)}
.ik-slot[aria-pressed=true]{background:var(--terra);border-color:var(--terra);color:var(--on-dark)}

/* ---------- Knoepfe ---------- */
.ik-aktionen{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1.8rem}
.ik-btn{font:inherit;font-size:1rem;font-weight:600;padding:.8rem 1.5rem;border-radius:var(--radius);
  border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,transform .05s}
.ik-btn:active{transform:translateY(1px)}
.ik-btn-haupt{background:var(--terra);color:var(--on-dark)}
.ik-btn-haupt:hover{background:var(--terra-deep)}
.ik-btn-haupt[disabled]{background:var(--line-2);color:var(--ink-3);cursor:not-allowed}
.ik-btn-still{background:transparent;color:var(--ink-soft);border-color:var(--line-2)}
.ik-btn-still:hover{border-color:var(--ink-3);color:var(--ink)}
.ik-btn-text{background:none;border:none;color:var(--ink-3);text-decoration:underline;padding:.5rem 0;font-size:.9rem;cursor:pointer}

/* ---------- Zusammenfassung, Bestaetigung ---------- */
.ik-karte{border:1.5px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-2);
  padding:1.2rem;margin:1.2rem 0;box-shadow:var(--shadow-sm)}
.ik-karte dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:0;font-size:.95rem}
.ik-karte dt{color:var(--ink-3)}
.ik-karte dd{margin:0;font-weight:600}
@media (max-width:480px){
  .ik-karte dl{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .ik-karte dt:not(:first-child){margin-top:.65rem}
  .ik-karte dd{min-width:0;overflow-wrap:anywhere}
}
.ik-summe{border-top:1px solid var(--line);margin-top:.9rem;padding-top:.9rem;display:flex;justify-content:space-between;
  font-family:var(--serif);font-size:1.2rem;font-weight:700;color:var(--marine)}
.ik-erfolg{text-align:left;padding:1.5rem 0}
.ik-erfolg .ik-termin{font-family:var(--serif);font-size:clamp(1.3rem,4vw,1.7rem);font-weight:700;color:var(--marine);margin:.6rem 0 .2rem;line-height:1.25}
.ik-nummer{display:inline-block;background:var(--apricot-tint);border:1px solid var(--apricot-line);border-radius:99px;
  padding:.25rem .8rem;font-size:.85rem;font-weight:600;color:var(--ink-soft);margin-top:.8rem}
.ik-mitbringen{margin:1.5rem 0 0;padding:0;list-style:none}
.ik-mitbringen li{padding-left:1.5rem;position:relative;margin-bottom:.4rem;font-size:.95rem}
.ik-mitbringen li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:50%;background:var(--terra)}

/* ---------- Reservierungshinweis, Wartetext ---------- */
.ik-hinweis{font-size:.88rem;color:var(--ink-3);background:var(--surface);border-left:3px solid var(--apricot);
  padding:.65rem .9rem;border-radius:0 var(--radius) var(--radius) 0;margin:1rem 0}
.ik-warte{display:flex;gap:.8rem;align-items:center;padding:1.2rem 0;color:var(--ink-soft)}
.ik-spinner{width:1.4rem;height:1.4rem;border:2.5px solid var(--line-2);border-top-color:var(--terra);border-radius:50%;animation:ik-dreh 1s linear infinite;flex:none}
@keyframes ik-dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ik-spinner{animation-duration:3s}.ik-btn:active{transform:none}}

/* ---------- Eignungsweiche ----------
   Bewusst ohne Warnfarbe, ohne Ausrufezeichen, ohne rotes Feld. Wer hier landet,
   hat Schulden und bekommt gerade ein "so nicht". Das darf sich nicht anfuehlen
   wie eine Fehlermeldung. Die Telefonnummer ist das groesste Element im Block. */
.ik-weiche{max-width:52rem}
.ik-weiche .ik-weiterweg{color:var(--ink-soft);margin:0 0 1.2rem;font-size:.98rem}
.ik-weiche-anruf{margin:1.2rem 0;font-size:1rem;color:var(--ink-soft)}
.ik-weiche-tel{font-family:var(--serif);font-size:1.35rem;color:var(--terra-deep);
  font-weight:600;text-decoration:none;border-bottom:2px solid var(--apricot);white-space:nowrap}
.ik-weiche-tel:hover,.ik-weiche-tel:focus-visible{border-bottom-color:var(--terra)}
.ik-weiche-daten{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:.9rem 1.1rem;margin:1.2rem 0}
.ik-weiche-daten p{margin:0 0 .5rem;font-size:.92rem;color:var(--ink-3)}
.ik-weiche-daten ul{margin:0;padding-left:1.1rem;font-size:.95rem;color:var(--ink-soft)}
.ik-weiche-daten li{margin-bottom:.25rem}

/* ---------- Demo-Kennzeichnung ---------- */
.ik-demo{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;color:var(--ink-3);
  border:1px dashed var(--line-2);border-radius:var(--radius);padding:.6rem .8rem;margin-bottom:1.2rem;background:var(--surface)}
.ik-demo b{color:var(--ink-soft)}

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

@media (max-width:480px){
  .ik-kopf{flex-direction:column;align-items:flex-start;gap:.5rem}
  .ik-aktionen{flex-direction:column-reverse;align-items:stretch}
  .ik-btn{width:100%}
}

/* Telefonat 14.09.2026: Folgefragen direkt an der gewählten Antwort. */
.inso-kal { overflow-anchor:none; }
.ik-folge { margin:0 0 .5rem .6rem; padding:.9rem 0 .1rem 1rem; border-left:3px solid var(--apricot-line); min-width:0; }
.ik-folge > .ik-feld:last-child { margin-bottom:.4rem; }
.ik-regler { max-width:42rem; min-width:0; }
.ik-regler output { display:block; font-size:1.15rem; font-weight:600; color:var(--terra-deep); margin:.5rem 0; }
.inso-kal .ik-regler input[type=range] { display:block; width:100%; min-width:0; min-height:44px; padding:0; accent-color:var(--terra); background:transparent; border:0; box-shadow:none; cursor:pointer; }
.ik-regler-grenzen { display:flex; justify-content:space-between; gap:1rem; font-size:.78rem; margin:.2rem 0 1rem; }
.ik-regler-grenzen span:last-child { text-align:right; }
@media(max-width:480px) { .ik-folge { margin-left:.25rem; padding-left:.65rem; } .ik-schritte { gap:.4rem .6rem; } .ik-schritte li::after { display:none; } }