/* ==========================================================================
   Preis-Konfigurator – nur, was es außerhalb dieser Seite nicht gibt.
   Maße aus docs/konzept/vermessung/leistungen.md (Bild 7, CSS-px bei 1280 px).
   Optionskarten und Spalten stehen in main.css (Abschnitt 11).
   ========================================================================== */

/* Hero: niedriger als auf /leistungen, H1 46 px, Absatz 17/27, kein Kreis.
   Schriftgrößen ohne Token (H1 46, Schrittfrage 22, Betreuung 26 px) sind Maße aus der Vermessung. */
.hero--konfig { padding-block: var(--a-12); }
.hero--konfig .hero__inhalt > h1 { margin-bottom: var(--a-5); font-size: clamp(2.125rem, 1.6rem + 2vw, 2.875rem); line-height: 1.08; }
.hero--konfig .hero__inhalt > .lead { max-width: 36rem; margin-bottom: 0; font-size: var(--gr-lead); line-height: 1.6; }

/* Fläche: Papier, 48 px bis zu den Karten, 72 px bis zum Fuß. overflow: clip statt hidden,
   sonst wird der Abschnitt zum Scrollbereich und die Zusammenfassung klebt nicht. */
.konfig { overflow: clip; padding-block: var(--a-12) var(--a-18); }


/* Schritte --------------------------------------------------------------------- */

.schritte { display: grid; gap: var(--a-5); min-width: 0; }
.schritt { gap: var(--a-4); padding: var(--a-5); }
@media (min-width: 640px) {
    .schritt { padding: var(--a-7); }
}
/* gleiche Spezifität wie fieldset.karte in main.css, gewinnt durch die Ladereihenfolge */
fieldset.schritt > legend { margin-bottom: 0; }
fieldset.schritt > legend > .label { margin-bottom: var(--a-1); }
.schritt h2 { font-size: 1.375rem; line-height: 1.25; }
/* Bedingungen der Betreuung: ein Satz je Zeile statt eines langen Absatzes */
.schritt__hinweise { display: grid; gap: var(--a-1); line-height: 1.5; text-wrap: pretty; }   /* wie p in main.css: kein einzelnes Wort in der letzten Zeile */


/* Zusammenfassung ------------------------------------------------------------------ */

.zusammenfassung { gap: 0; padding: var(--a-6); }
@media (min-width: 640px) {
    .zusammenfassung { padding: var(--a-7); }
}
@media (min-width: 960px) {
    /* bleibt neben den Schritten stehen; --zus-top setzt js/konfigurator.js, wenn sie höher als das Fenster ist */
    .zusammenfassung { position: sticky; top: var(--zus-top, calc(var(--kopf-hoehe) + var(--a-6))); }
}
.zusammenfassung h2.label { display: block; }
/* .zusammenfassung davor, sonst gewinnt .karte p aus main.css */
.zusammenfassung .zus__name { margin-top: var(--a-4); font-family: var(--schrift-titel); font-weight: 700; font-size: var(--gr-h3); line-height: 1.25; letter-spacing: -0.01em; color: var(--tx); }
.zusammenfassung .zus__text { margin-top: var(--a-2); font-size: var(--gr-text); line-height: 1.27; color: var(--tx3); }
.zus__extras { display: grid; gap: var(--a-1); margin-top: var(--a-3); font-size: var(--gr-klein); line-height: 1.45; color: var(--tx2); }
.zus__extras[hidden] { display: none; }
/* bei großer Schrift rutscht der Preis unter den Namen, statt abgeschnitten zu werden */
.zus__extras li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--a-3); }
.zus__block { display: flex; flex-direction: column; align-items: flex-start; margin-top: var(--a-5); padding-top: var(--a-5); border-top: var(--rand-breite) solid var(--c-tinte-rand); }
/* proportionale Ziffern: die 1 ohne Fuß wie im Konzept und wie „119 € / Monat“ darunter */
.zus__block .zahl--xl { margin-top: var(--a-3); line-height: 1; color: var(--tx); font-variant-numeric: normal; }
.zus__laufend { margin-top: var(--a-3); font-family: var(--schrift-titel); font-weight: 700; font-size: 1.625rem; line-height: 1.15; color: var(--tx); }
.zus__klein { margin-top: var(--a-3); font-size: var(--gr-klein); line-height: 1.45; color: var(--tx3); }
.zusammenfassung .zus__hinweis { margin-top: var(--a-8); font-size: var(--gr-klein); line-height: 1.57; color: var(--tx3); }
.zusammenfassung .knopf--primaer { margin-top: var(--a-6); }
.zusammenfassung .knopf--umriss { margin-top: var(--a-3); }

/* Tablet: Die Zusammenfassung steht unter den Schritten über die volle Breite. Damit sie nicht leer
   wirkt und die Knöpfe nicht 680 px breit werden, stehen Einmalig und Laufend sowie die beiden Knöpfe
   nebeneinander. Das Wabenmuster bleibt außerhalb des Rasters, sonst endet es am Innenabstand. */
@media (min-width: 640px) and (max-width: 959px) {
    .zusammenfassung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-8); align-items: start; }
    .zusammenfassung > :not(.waben):not(.zus__block):not(.knopf) { grid-column: 1 / -1; }
    .zusammenfassung .knopf--umriss { margin-top: var(--a-6); }
}


/* Leiste am Handy -------------------------------------------------------------------- */

.konfig-leiste {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 150;   /* unter dem Cookie-Hinweis; solange der offen ist, bleibt die Leiste zu */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--a-1) var(--a-4);
    padding: var(--a-3) var(--a-4);
    background: var(--bg);              /* Tinte */
    /* In dark mode Tinte sits close to the Papier tone (1.24:1); only the 3:1 top edge clearly sets the bar apart */
    border-top: var(--rand-breite) solid var(--rand-ui);
    outline: var(--kasten-rand);        /* Hoher Kontrast: zusätzlich 2 px weiße Kante rundum */
    color: var(--tx2);
}
.konfig-leiste[hidden] { display: none; }
.konfig-leiste p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--a-2); }
.konfig-leiste strong { font-family: var(--schrift-titel); font-weight: 700; font-size: var(--gr-h4); color: var(--tx); white-space: nowrap; }
.konfig-leiste__laufend { font-size: var(--gr-klein); color: var(--tx2); white-space: nowrap; }
.konfig-leiste__laufend[hidden] { display: none; }
/* Phones: main.css gives arrow links 44 px from padding; here that would make the bar 19 px taller
   and cover more of the steps. The link keeps its line instead, and an empty ::before (the arrow is
   ::after) spreads the tap area over the bar's padding to 48 px, like the link inside a sentence.
   The focus ring stays around the word, inside the bar. */
@media (max-width: 639px) {
    main .konfig-leiste .pfeil-link { position: relative; padding-block: 0; }
    main .konfig-leiste .pfeil-link::before { content: ''; position: absolute; inset: calc(-1 * var(--a-3)) calc(-1 * var(--a-1)); }
}
@media (min-width: 960px) {
    .konfig-leiste { display: none !important; }
}

@media print {
    .zusammenfassung { position: static; }
    .konfig-leiste, .konfig__ohne-js { display: none !important; }
}