/*
 * bundlethemes – die Kasse (templates/kauf.php) und die Seiten danach (Zwischenseite, Rückkehrseite, Downloads),
 * im hellen Rahmen der Startseite. Lädt immer nach hell.css: Schrift, Tokens (Papier, Tinte, Lime), Kopf, Fuß,
 * der Knopf (.knopf), das Etikett und der Pfeil kommen von dort; hier steht nur, was die Kasse dazu braucht.
 *
 * Die Kasse passt am Handy auf einen Bildschirm: eine Paketzeile, zwei Felder, ein Haken, der Knopf. Keine Karten,
 * keine Kästen über die volle Breite; das Lime ist nur ein kleiner Punkt (gewähltes Paket, Haken, Pfeilscheibe).
 * Kein Stil im Dokument, keine Datei von fremden Servern (Content-Security-Policy: style-src 'self').
 */

:root {
  --fehler: #B3261E;
  --linie: rgba(14, 14, 14, .14);
  --linie-fest: rgba(14, 14, 14, .34);
  --feld: #FFFFFF;
}

/* ------------------------------------------------------------------ Kasse */

.kasse .site-header { padding-block: 14px 6px; }
.kasse .site-footer, .danach .site-footer { margin-top: 72px; }

.checkout__form { display: grid; gap: 16px; max-width: 30rem; margin-inline: auto; padding-top: 10px; }

/* Meldung über dem Formular und vor dem Knopf: ein Satz mit einem Strich davor, kein Kasten. */
.kasse__meldung { padding-left: 13px; border-left: 3px solid var(--fehler); font-size: .9375rem; line-height: 1.35; font-weight: 500; }
.kasse__meldung[role="status"], .kasse__felder > .kasse__meldung { border-left-color: var(--tinte); }
.kasse__meldung a, .kasse__klein a { color: var(--tinte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* Kleines: Lieferumfang, Umsatzsteuer, der Hinweis auf AGB, Widerrufsbelehrung und Datenschutz, die Zahlarten. */
.kasse__klein { font-size: .8125rem; line-height: 1.35; color: var(--leise); }
.kasse__recht { color: var(--tinte-weich); }

/* Was gekauft wird: je Paket eine Zeile. Zu sehen ist die gewählte; „ändern“ klappt die anderen auf. */
.kasse__paket { position: relative; }
.kasse__titel { padding-right: 7rem; }
.kasse__paket > .kasse__klein { margin-top: 2px; }
.wahl { min-width: 0; margin: 0; padding: 0; border: 0; }
.wahl__titel { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wahl__auf { display: none; }

.paket { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 12px 0; }
label.paket { cursor: pointer; }
.paket + .paket { border-top: 1px solid var(--linie); }
.paket__radio { grid-column: 1; grid-row: 1; align-self: center; -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--tinte); border-radius: 50%; background: transparent; cursor: pointer; }
.paket__radio:checked { border-width: 6px; background: var(--zeichen); }
.paket__name { grid-column: 2; grid-row: 1; font-size: 1.25rem; line-height: 1.2; font-weight: 500; letter-spacing: -.015em; }
.paket__preis { grid-column: 3; grid-row: 1; font-size: 1.75rem; line-height: 1; font-weight: 500; letter-spacing: -.035em; white-space: nowrap; }
.paket__inhalt, .paket__frist, .branchen { grid-column: 2 / 4; }
.paket__inhalt { margin-top: 5px; font-size: .8125rem; line-height: 1.35; color: var(--leise); }
.paket__frist { margin-top: 5px; font-size: .8125rem; line-height: 1.35; font-weight: 500; }
.paket__danach { font-weight: 400; color: var(--leise); }
.paket__danach::before { content: "·"; margin-right: .35em; }
.paket__tipp { display: inline-block; margin-left: .3em; padding: 3px 8px 2px; border: 1px solid currentColor; border-radius: 999px; font-size: .6875rem; line-height: 1.2; font-weight: 500; letter-spacing: .02em; vertical-align: .22em; white-space: nowrap; }

/* Die Branchen des Nischen-Pakets: fünf kleine Auswahlpunkte in der Zeile des Pakets. */
.branchen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.branchen__titel { flex: 0 0 100%; font-size: .8125rem; line-height: 1.3; font-weight: 500; }
.branche { position: relative; display: inline-flex; }
.branche__radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.branche__name { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border: 1px solid var(--linie-fest); border-radius: 999px; background: var(--feld); font-size: .875rem; line-height: 1.2; transition: background-color .2s, color .2s, border-color .2s; }
.branche__radio:checked + .branche__name { border-color: var(--tinte); background: var(--tinte); color: var(--papier); }
.branche__radio:checked + .branche__name::before { content: ""; flex: none; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--zeichen); }
.branche__radio:focus-visible + .branche__name { outline: 2px solid var(--tinte); outline-offset: 3px; }

/* Zugeklappt (nur mit :has(); sonst stehen immer alle Zeilen da, und „ändern“ gibt es nicht): nur die Zeile des
   gewählten Pakets, ohne Auswahlknopf. Ist noch nichts gewählt, bleibt die Zeile der verlangten Gruppe (.paket--da). */
@supports selector(:has(*)) {
  .wahl__auf { display: block; position: absolute; top: -15px; right: 0; }
  .wahl__auf summary { display: block; padding: 14px 0 12px 24px; font-size: .8125rem; line-height: 1.3; color: var(--leise); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; list-style: none; }
  .wahl__auf summary::-webkit-details-marker { display: none; }
  .wahl__auf[open] summary { color: var(--tinte); }

  .wahl:has(.paket input:checked) .wahl__auf:not([open]) ~ .paket:not(:has(input:checked)),
  .wahl:not(:has(.paket input:checked)) .wahl__auf:not([open]) ~ .paket:not(.paket--da) { display: none; }
  .wahl__auf:not([open]) ~ .paket { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0 4px; border-top: 0; }
  .wahl__auf:not([open]) ~ .paket .paket__radio { position: absolute; left: 0; top: 14px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .wahl__auf:not([open]) ~ .paket .paket__name { grid-column: 1; }
  .wahl__auf:not([open]) ~ .paket .paket__preis { grid-column: 2; }
  .wahl__auf:not([open]) ~ .paket .paket__inhalt,
  .wahl__auf:not([open]) ~ .paket .paket__frist,
  .wahl__auf:not([open]) ~ .paket .branchen { grid-column: 1 / 3; }
  .wahl__auf:not([open]) ~ .paket .paket__tipp { display: none; }
  .wahl__auf:not([open]) ~ label.paket { cursor: default; }
  /* Der Auswahlknopf ist zugeklappt nicht zu sehen, mit der Tastatur aber zu erreichen: Dann zeigt die Zeile den Fokus. */
  .wahl__auf:not([open]) ~ .paket:has(.paket__radio:focus-visible) { outline: 2px solid var(--tinte); outline-offset: 4px; border-radius: 6px; }
  .wahl__auf:not([open]) ~ .paket--branche { padding-bottom: 14px; }
}

/* Felder */
.kasse__felder { display: grid; gap: 14px; }
.feld { display: grid; gap: 6px; min-width: 0; }
.feld__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.feld__name { font-size: .8125rem; line-height: 1.3; font-weight: 500; }
.feld__rand { font-size: .75rem; line-height: 1.3; color: var(--leise); }
.feld__eingabe { display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px; border: 1px solid var(--linie-fest); border-radius: 14px; background: var(--feld); color: var(--tinte); font: inherit; font-size: 1rem; line-height: 1.2; -webkit-appearance: none; appearance: none; }
.feld__eingabe::placeholder { color: var(--blass); opacity: 1; }
.feld__eingabe:focus-visible { border-color: var(--tinte); outline: 2px solid var(--tinte); outline-offset: 1px; }
.feld__eingabe[aria-invalid="true"] { border-color: var(--fehler); }
.feld__auswahl { position: relative; }
.feld__auswahl .feld__eingabe { padding-right: 44px; text-overflow: ellipsis; cursor: pointer; }
.feld__auswahl::after { content: ""; position: absolute; right: 19px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--tinte); border-bottom: 1.5px solid var(--tinte); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.feld__hilfe { font-size: .8125rem; line-height: 1.35; color: var(--leise); }
.feld__fehler { font-size: .8125rem; line-height: 1.35; font-weight: 500; color: var(--fehler); }
.feld__fehler:empty { display: none; }
.wahl > .feld__fehler { margin-top: 6px; }

/* Der eine Haken: Tinte, das Häkchen in Lime. */
.haken { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; cursor: pointer; }
.haken__feld { display: grid; place-content: center; -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin: 0; border: 1.5px solid var(--tinte); border-radius: 7px; background: var(--feld); cursor: pointer; transition: background-color .15s; }
.haken__feld::before { content: ""; width: 11px; height: 6px; border-left: 2px solid var(--zeichen); border-bottom: 2px solid var(--zeichen); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .15s; }
.haken__feld:checked { background: var(--tinte); }
.haken__feld:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
.haken__feld[aria-invalid="true"] { border-color: var(--fehler); }
.haken__text { font-size: .875rem; line-height: 1.35; }

/* Honigtopf: für Menschen unsichtbar und nicht erreichbar */
.kasse__falle { position: absolute; left: -625rem; width: 1px; height: 1px; overflow: hidden; }

/* Kaufknopf: der Knopf der Startseite über die ganze Spalte. Unter der Beschriftung führt kasse.js den Betrag mit. */
.kasse__knopf { display: flex; width: 100%; margin: 2px 0 0; border: 0; font: inherit; font-size: 1.0625rem; font-weight: 500; line-height: 1.2; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.knopf__wort { display: grid; gap: 3px; min-width: 0; }
.knopf__summe { font-size: .8125rem; line-height: 1.2; font-weight: 400; color: rgba(244, 241, 234, .74); }
.knopf__summe[hidden] { display: none; }
.kasse__knopf:disabled { background: var(--blass); cursor: not-allowed; }
.kasse__knopf:disabled .knopf__pfeil { background: var(--papier); opacity: .55; }
.kasse__knopf:disabled:hover .knopf__pfeil svg { translate: 0 0; }
.kasse__danach { margin-top: -4px; }

@media (min-width: 700px) {
  .kasse .site-header { padding-block: 26px 12px; }
  .checkout__form { padding-top: 28px; gap: 22px; }
  .kasse__felder { gap: 18px; }
  .kasse__knopf { min-height: 66px; }
}
/* Breit: links, was gekauft wird, rechts die Felder. */
@media (min-width: 900px) {
  .checkout__form { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start; max-width: none; margin-inline: 0; padding-top: 56px; }
  .checkout__form > .kasse__meldung { grid-column: 1 / -1; max-width: 46rem; }
  .kasse__paket { grid-column: 1 / span 6; max-width: 36rem; }
  .kasse__felder { grid-column: 8 / span 5; max-width: 30rem; }
  .kasse__titel { margin-bottom: 18px; }
  .paket { grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 20px; padding-block: 22px; }
  .paket__name { font-size: 2rem; line-height: 1.1; letter-spacing: -.025em; }
  .paket__preis { font-size: 2.25rem; }
  .paket__radio { width: 24px; height: 24px; }
  .paket__radio:checked { border-width: 7px; }
  .paket__inhalt, .paket__frist { margin-top: 10px; font-size: 1rem; }
  .paket__inhalt { max-width: 30rem; }
  .paket__tipp { font-size: .75rem; vertical-align: .5em; }
  .branchen { margin-top: 16px; }
  .kasse__paket > .kasse__klein { margin-top: 10px; font-size: .9375rem; }
  .wahl__auf summary { font-size: .875rem; }
  /* Zugeklappt steht das gewählte Paket groß da, wie die Überschriften der Startseite. */
  @supports selector(:has(*)) {
    .wahl__auf:not([open]) ~ .paket { padding-top: 14px; }
    .wahl__auf:not([open]) ~ .paket .paket__name { font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1.04; letter-spacing: -.026em; }
    .wahl__auf:not([open]) ~ .paket .paket__preis { font-size: clamp(2.2rem, 3.6vw, 3.4rem); letter-spacing: -.04em; }
    .wahl__auf:not([open]) ~ .paket .paket__inhalt { margin-top: 16px; }
  }
}

/* ----------------------------------------------------- Seiten nach der Kasse */
/* Zwischenseite (zahlung.php), Rückkehrseite (bestellung.php), Downloads (downloads.php) und ihre Absagen
   (meldung.php): Aufbau und Texte wie bisher, nur hell gefasst. Die Vorlagen tragen die Klassen des dunklen Rahmens. */

.danach .narrow, .danach .downloads { max-width: 1520px; margin-inline: auto; padding: 28px var(--rand) 0; }
.danach .narrow > *, .danach .downloads > * { max-width: 40rem; }
.danach .eyebrow { margin-bottom: 12px; font-size: .6875rem; line-height: 1.3; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.danach .narrow__title { font-size: var(--gross-2); line-height: 1.04; font-weight: 500; letter-spacing: -.026em; text-wrap: balance; }
.danach .narrow__text { margin-top: 16px; font-size: 1.125rem; line-height: 1.4; color: var(--tinte-weich); }
.danach .narrow__action { margin-top: 28px; }
.danach a:not(.button) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.danach .site-header a, .danach .site-footer a { text-decoration: none; }
.danach .site-footer a:hover { text-decoration: underline; }

/* Knopf: Tinte, am Ende ein kleiner Punkt in Lime. */
.danach .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 58px; padding: 8px 22px 8px 26px; border: 1px solid var(--tinte); border-radius: 999px; background: var(--tinte); color: var(--papier); font-size: 1.0625rem; line-height: 1.2; font-weight: 500; transition: background-color .3s; }
.danach .button::after { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--zeichen); }
.danach .button:hover { background: var(--tinte-weich); }
.danach .button--quiet { background: transparent; color: var(--tinte); }
.danach .button--quiet::after { background: var(--tinte); }
.danach .button--quiet:hover { background: rgba(14, 14, 14, .06); }
.danach .button--small { min-height: 42px; gap: 12px; padding: 4px 16px 4px 18px; font-size: .875rem; }
.danach .button--small::after { width: 7px; height: 7px; }
.danach .text-link, .danach .more-link { font-weight: 500; }
.danach .contact-line { margin-top: 44px; font-size: .875rem; line-height: 1.4; color: var(--leise); }
.danach .contact-line a { color: var(--tinte); }

/* Rückkehrseite: die drei Schritte der Installation */
.danach .next { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--linie); }
.danach .next__more { margin-top: 20px; }
.danach .downloads__title { font-size: 1.5rem; line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }
.danach .steps { display: grid; gap: 22px; margin-top: 24px; }
.danach .step { position: relative; padding-left: 46px; }
.danach .step__nr { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tinte); color: var(--papier); font-size: .875rem; line-height: 1; font-weight: 500; }
.danach .step__title { font-size: 1.125rem; line-height: 1.25; font-weight: 500; }
.danach .step__text { margin-top: 4px; color: var(--leise); }
.danach .callout { margin-top: 22px; padding-left: 14px; border-left: 3px solid var(--tinte); line-height: 1.4; }
.danach .callout__title { font-weight: 500; }

/* Downloads */
.danach .downloads__pack { margin-top: 16px; line-height: 1.4; color: var(--leise); }
.danach .downloads__pack strong { font-weight: 500; color: var(--tinte); }
.danach .downloads__validity { margin-top: 14px; font-size: .875rem; color: var(--leise); }
.danach .downloads__group { margin-top: 44px; }
.danach .downloads__text { margin-top: 10px; color: var(--leise); }
.danach .downloads > .downloads__text { margin-top: 44px; }
.danach .downloads__text a { color: var(--tinte); }
.danach .files { margin-top: 10px; }
.danach .file { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.danach .file__body { min-width: 0; }
.danach .file__name { font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.danach .file__meta { margin-top: 2px; font-size: .875rem; color: var(--leise); }
.danach .file .button { flex: none; }
@media (min-width: 700px) {
  .danach .narrow, .danach .downloads { padding-top: 56px; }
}