/* =========================================================================
   ENTWURF A — „Werkstatt"
   Redaktionelle Präzision. Warmes Papierweiß, tiefschwarze Schrift,
   das Firmenblau als einziger Akzent. Instrument Serif für Schlagzeilen
   und Zahlen, Archivo für alles andere.
   Die drei Schrägstriche der Marke werden zum Bauprinzip: als Trennzeichen,
   als Abschnittsmarke und als diagonales Muster in Akzentflächen.
   ========================================================================= */

:root {
  /* ---- Farbe ---------------------------------------------------------- */
  --papier:        #F6F4EF;
  --papier-tief:   #EDE9E1;
  --karte:         #FFFDF9;
  --tinte:         #14161A;
  --tinte-leise:   #5A5F68;
  /* Das Markenblau #0084C8 erreicht als Schriftfarbe auf hellem Grund nur
     3,4:1 und als Flächenfarbe hinter weißer Schrift nur 4,1:1 — beides
     unter der Grenze von WCAG AA (4,5:1). Deshalb drei Abstufungen:
     --blau rein dekorativ, --blau-flaeche für gefüllte Schaltflächen,
     --blau-text für alles, was gelesen werden muss. */
  --blau:          #0084C8;   /* dekorativ: Muster, Linien, Markierungen */
  --blau-flaeche:  #0071AD;   /* Schaltflächenfüllung, weiße Schrift  5,3:1 */
  --blau-text:     #005E8A;   /* Schriftfarbe auf hellem Grund        5,8:1 */
  --blau-tief:     #00618F;
  --blau-hell:     #4FB6EA;   /* Schriftfarbe auf dunklem Grund       8,0:1 */
  --blau-hauch:    #E3F1F9;

  /* Das Rot des Markenzeichens. #d40054 ist die Farbe der drei Striche aus
     dem Originallogo und bleibt für die Grafik unangetastet. Als Schriftfarbe
     erreicht es auf --papier-tief nur 4,4:1, deshalb für Text eine Spur
     dunkler, für dunkle Abschnitte eine Spur heller. */
  --rot:           #d40054;   /* Logofarbe, nur Grafik und Flächen */
  --rot-text:      #C4004E;   /* Schriftfarbe auf hellem Grund        5,0:1 */
  --rot-hell:      #FF5C93;   /* Schriftfarbe auf dunklem Grund       6,3:1 */

  --ziffer:        #767B84;   /* große Ordnungszahlen                 3,5:1 */
  --grau-marke:    #757575;
  --linie:         rgba(20, 22, 26, .14);
  --linie-zart:    rgba(20, 22, 26, .07);

  /* ---- Schrift -------------------------------------------------------- */
  --serif:  'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --grotesk:'Archivo', 'Helvetica Neue', Helvetica, sans-serif;

  --gr-winzig:  .75rem;
  --gr-klein:   .875rem;
  --gr-basis:   1.0625rem;
  --gr-gross:   1.25rem;
  --gr-lead:    clamp(1.25rem, .9rem + 1.1vw, 1.6rem);
  --gr-h3:      clamp(1.35rem, 1.1rem + .8vw, 1.75rem);
  --gr-h2:      clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  --gr-h1:      clamp(2.6rem, 1.5rem + 4.6vw, 5.6rem);
  --gr-zahl:    clamp(2.8rem, 2rem + 3vw, 4.4rem);

  /* ---- Maß ------------------------------------------------------------ */
  --breite-max: 78rem;
  --sprung:     clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --radius:     2px;

  /* ---- Zeichen, die keine Schrift dieser Seite hat --------------------- */
  /* Der Pfeil für Verweise nach außen. Früher stand hier das Zeichen ↗.
     Keine der drei Schriften enthält es — die unicode-range in fonts.css
     deckt aus der Pfeilgruppe nur U+2191 und U+2193 ab. Der Browser holte
     es deshalb aus einer Ersatzschrift: andere Strichstärke, andere
     Grundlinie, sichtbar tiefsitzender Kasten neben dem Wort. */
  --pfeil-extern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.6 8.4 8.4 3.6M4.9 3.6h3.5v3.5' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pfeil-rechts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6h7.2M6.4 3l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pfeil-links:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M9.8 6H2.6M5.6 3l-3 3 3 3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --haken:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.8 8.9 9.8 3.3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --neu-laden:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M9.7 6a3.7 3.7 0 1 1-1.1-2.6' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M9.9 1.6v2.3H7.6' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Als Maske und nicht als Bild: so folgen die Zeichen der Textfarbe — im
   Fließtext blau, auf dunklem Grund hell — ohne je eine zweite Datei. */
.pfeil-extern,
.pfeil-rechts,
.pfeil-links,
.haken,
.neu-laden {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
}
.pfeil-extern { -webkit-mask-image: var(--pfeil-extern); mask-image: var(--pfeil-extern); }
.pfeil-rechts { -webkit-mask-image: var(--pfeil-rechts); mask-image: var(--pfeil-rechts); }
.pfeil-links  { -webkit-mask-image: var(--pfeil-links);  mask-image: var(--pfeil-links); }
.haken        { -webkit-mask-image: var(--haken);        mask-image: var(--haken); }
.neu-laden    { -webkit-mask-image: var(--neu-laden);    mask-image: var(--neu-laden); }

/* =========================================================================
   Grundlagen
   ========================================================================= */

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--grotesk);
  font-size: var(--gr-basis);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Feines Papierkorn — gibt der Fläche Tiefe, ohne aufzufallen */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.015em;
}

p { max-width: 62ch; }

::selection { background: var(--blau); color: #fff; }

/* Das Markenzeichen: drei Schrägstriche, im Fließtext gesetzt. Rot wie im
   Logo — das /// gehört zum Namen und ist keine Dekoration. */
.zeichen {
  font-family: var(--grotesk);
  font-weight: 600;
  color: var(--rot-text);
  letter-spacing: -.08em;
  padding-inline: .06em;
}

/* Auf dunklem Grund kehrt sich das Rot um */
.abschnitt--dunkel .zeichen,
.fuss .zeichen,
.servicezeile .zeichen { color: var(--rot-hell); }

/* Auf farbigen Flächen — Schaltflächen, Fahnen, Etiketten — nimmt das
   Zeichen die Schriftfarbe der Fläche an. Sonst steht Rot auf Blau. */
.knopf .zeichen,
.paket__fahne .zeichen,
.rabattband h3 .zeichen,
.promptkasten .zeichen { color: inherit; }

/* -------------------------------------------------------------------------
   Die Markierung: dieselbe Grafik wie im Logo
   -------------------------------------------------------------------------
   Vorher stand hier ein repeating-linear-gradient. Der wiederholt sich über
   die ganze Breite und schneidet am linken Rand einen halben Streifen an —
   der sah aus wie ein verirrtes Apostroph. Jetzt liegt die echte Datei mit
   genau drei Strichen unterschiedlicher Länge als Maske darüber; die Farbe
   kommt aus background-color und lässt sich so je Untergrund wechseln.
   ------------------------------------------------------------------------- */
/* Inline gesetzt, nicht als Block: Die Container, in denen dieses Bild
   steht, dürfen keine Flex-Container sein — sonst zerfällt ihr Text in
   einzelne Flex-Items und ein Produktname wie PDF///BOX bekommt Lücken um
   sein <span class="zeichen">. Siehe die Container weiter unten. */
.markierung,
.marke::before,
.kurzfassung h2::before,
.fragengruppe > h2::before {
  content: "";
  display: inline-block;
  vertical-align: baseline;
  aspect-ratio: 40.388 / 48.355;
  background-color: var(--rot);
  -webkit-mask: url(../img/marke-striche.svg) no-repeat center / contain;
          mask: url(../img/marke-striche.svg) no-repeat center / contain;
}

.abschnitt--dunkel .markierung,
.abschnitt--dunkel .marke::before,
.abschnitt--dunkel .kurzfassung h2::before { background-color: var(--rot-hell); }

/* Diagonalmuster, abgeleitet aus dem /// — hier ist die Wiederholung
   erwünscht, es ist eine Fläche und kein Zeichen. */
.diagonal {
  background-image: repeating-linear-gradient(
    115deg,
    var(--rot) 0 2px,
    transparent 2px 11px
  );
}

/* =========================================================================
   Abschnittsgerüst
   ========================================================================= */

.abschnitt { padding-block: var(--sprung); position: relative; z-index: 2; }
.abschnitt--tief { background: var(--papier-tief); }
.abschnitt--dunkel { background: var(--tinte); color: var(--papier); }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: var(--papier); }

.marke {
  display: block;
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: 1.6rem;
}
.marke::before { height: 1.15rem; margin-right: .9rem; }
.abschnitt--dunkel .marke { color: rgba(246, 244, 239, .6); }

.kopfzeile {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
@media (min-width: 60rem) {
  .kopfzeile { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; }
}
.kopfzeile h2 { font-size: var(--gr-h2); }
.kopfzeile p { font-size: var(--gr-gross); color: var(--tinte-leise); }

/* =========================================================================
   Schaltflächen
   ========================================================================= */

.knopf {
  display: inline-block;
  padding: .95rem 1.6rem;
  font-size: var(--gr-klein);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  border: 1.5px solid var(--tinte);
  border-radius: var(--radius);
  background: var(--tinte);
  color: var(--papier);
  transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s, background .18s;
}
.knopf:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--blau);
}
.knopf:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--blau); }

.knopf--blau { background: var(--blau-flaeche); border-color: var(--blau-flaeche); color: #fff; }
.knopf--blau:hover { box-shadow: 4px 4px 0 var(--tinte); }

.knopf--offen { background: transparent; color: var(--tinte); }
.knopf--offen:hover { box-shadow: 4px 4px 0 var(--blau); }

/* Gratis-Webinar: der zweite Handlungsaufruf im Kopf. Als Rahmenknopf ging
   er neben dem blauen Testzugang unter. Bewusst in der Markenfarbe als
   Fläche — Blau bleibt der Testzugang, damit die beiden nicht verschwimmen.
   Der pulsierende Punkt sagt „läuft laufend, jetzt anmelden“; wer weniger
   Bewegung eingestellt hat, sieht ihn still. */
.knopf--webinar {
  display: inline-flex;
  background: var(--rot-text);
  border-color: var(--rot-text);
  color: #fff;
  align-items: center;
  gap: .55em;
}
.knopf--webinar:hover { box-shadow: 4px 4px 0 var(--tinte); }
.knopf--webinar:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }
.knopf--webinar::before {
  content: "";
  width: .5em;
  height: .5em;
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
  animation: webinar-puls 2s ease-out infinite;
}
@keyframes webinar-puls {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
  70%  { box-shadow: 0 0 0 .45em rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .knopf--webinar::before { animation: none; }
}

.abschnitt--dunkel .knopf--offen { color: var(--papier); border-color: var(--papier); }

/* Der Pfeil im Knopf. Früher stand das Zeichen → im Markup; es fehlt in
   allen drei Schriften dieser Seite und kam aus einer Ersatzschrift. Die
   Spanne bleibt, damit die Bewegung beim Überfahren erhalten bleibt — nur
   ihr Inhalt ist jetzt eine Maske statt eines Zeichens. */
.knopf__pfeil {
  display: inline-block;
  margin-left: .6rem;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--pfeil-rechts) center / contain no-repeat;
          mask: var(--pfeil-rechts) center / contain no-repeat;
  transition: transform .18s;
}
.knopf:hover .knopf__pfeil { transform: translateX(3px); }

/* =========================================================================
   Kopfbereich
   ========================================================================= */

.servicezeile {
  background: var(--tinte);
  color: rgba(246, 244, 239, .8);
  font-size: var(--gr-winzig);
  letter-spacing: .03em;
  position: relative;
  z-index: 3;
}
.servicezeile .huelle {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: flex-end;
  padding-block: .55rem;
}
.servicezeile a { text-decoration: none; }
.servicezeile a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.servicezeile strong { color: #fff; font-weight: 600; }

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 244, 239, .93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf .huelle {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: .9rem;
}
.kopf__logo img { width: 168px; height: auto; }

.navi {
  display: none;
  margin-left: auto;
  gap: 1.9rem;
  align-items: center;
}
@media (min-width: 68rem) { .navi { display: flex; } }

/* Aufgeklapptes Menü auf schmalen Bildschirmen */
@media (max-width: 67.99rem) {
  .navi[data-offen] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--karte);
    border-bottom: 1px solid var(--tinte);
    box-shadow: 0 18px 40px -20px rgba(0,0,0,.4);
    padding: .5rem 0;
  }
  .navi[data-offen] a {
    padding: .95rem clamp(1.25rem, 5vw, 2.5rem);
    font-size: var(--gr-gross);
    border-bottom: 1px solid var(--linie-zart);
  }
  .navi[data-offen] a:last-child { border-bottom: none; }
  .navi[data-offen] a::after { display: none; }
  .navi[data-offen] a:hover { background: var(--papier-tief); }
}
.kopf .huelle { position: relative; }

.navi a {
  font-size: var(--gr-klein);
  font-weight: 500;
  text-decoration: none;
  padding-block: .4rem;
  position: relative;
}
.navi a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--blau);
  transition: right .22s cubic-bezier(.2,.9,.3,1);
}
.navi a:hover::after { right: 0; }

/* Die Seite, auf der man gerade ist, bleibt dauerhaft unterstrichen */
.navi a[aria-current="page"] { color: var(--blau-text); }
.navi a[aria-current="page"]::after { right: 0; }

.kopf__aktionen { display: flex; gap: .6rem; align-items: center; margin-left: auto; }
@media (min-width: 68rem) { .kopf__aktionen { margin-left: 0; } }
.kopf__aktionen .knopf { padding: .6rem 1.05rem; font-size: var(--gr-winzig); }
.kopf__aktionen .knopf--offen { display: none; }
@media (min-width: 46rem) { .kopf__aktionen .knopf--offen { display: inline-flex; } }

/* Handy: Im Kopf stehen genau zwei Knöpfe — Gratis-Webinar und Testzugang.
   Der Login weicht ins Menü aus (.navi__login). Damit beide Knöpfe neben
   Logo und Menüknopf auch auf 320 px passen, wird alles etwas enger. */
@media (max-width: 45.99rem) {
  .kopf .huelle { gap: .5rem; }
  .kopf__logo { flex: none; }
  .kopf__logo img { width: 80px; }
  .kopf__aktionen { gap: .375rem; }
  .kopf__aktionen .knopf { padding: .6rem .5rem; letter-spacing: 0; white-space: nowrap; }
  .kopf__aktionen .knopf--webinar { gap: .35em; }
  .kopf__aktionen .kopf__login { display: none; }
}
/* Schmalere Geräte: erst der Punkt, dann Logo und Schrift etwas kleiner */
@media (max-width: 24rem) {
  .kopf__aktionen .knopf--webinar::before { display: none; }
}
@media (max-width: 23rem) {
  .kopf__logo img { width: 68px; }
}
@media (max-width: 21rem) {
  .kopf__logo img { width: 56px; }
  .kopf__aktionen .knopf { padding: .55rem .4rem; font-size: .6875rem; }
}

/* Login im aufklappbaren Menü — nur dort, wo er im Kopf fehlt */
.navi__login { display: none; }
@media (max-width: 45.99rem) {
  .navi[data-offen] .navi__login {
    display: flex;
    align-items: center;
    gap: .3em;
    order: -1;
    font-weight: 600;
    color: var(--blau-text);
  }
  .navi[data-offen] .navi__login:last-child { border-bottom: 1px solid var(--linie-zart); }
  .navi[data-offen] a:nth-last-child(2) { border-bottom: none; }
}

/* Login: kein Knopf, sondern ein Verweis. Er richtet sich an Bestandskunden,
   nicht an Interessenten — er darf den Testzugang nicht überstrahlen, muss
   aber ohne Suchen zu finden sein. Deshalb rechts außen und auf jeder
   Bildschirmbreite sichtbar. */
/* Der Login gehört zur Navigation, nicht zur Werbung: Bestandskunden suchen
   genau ihn und sollen ihn nicht neben zwei Angeboten übersehen, die für sie
   nicht gedacht sind. Im Altsystem stand er in Navigationsgröße ganz rechts
   in der blauen Leiste — dieselbe Rangfolge wird hier gehalten: gleiche
   Größe und Farbe wie die Menüpunkte, aber kein Knopf, damit er den beiden
   Handlungsaufrufen nicht die Form wegnimmt. */
.kopf__login {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  font-size: var(--gr-klein);
  font-weight: 500;
  text-decoration: none;
  color: var(--tinte);
  padding: .6rem .5rem;
  white-space: nowrap;
  transition: color .15s;
}
.kopf__login:hover { color: var(--blau-text); }
.kopf__login:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }

/* =========================================================================
   Aufmacher
   ========================================================================= */

.aufmacher {
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.aufmacher__gitter { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 62rem) {
  .aufmacher__gitter { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 4rem; }
}

.aufmacher h1 {
  font-size: var(--gr-h1);
  margin-bottom: 1.6rem;
}
/* Die Startseite trägt zwei Zeilen plus Zusatz — eine Stufe kleiner,
   damit die Produktauswahl daneben nicht erschlagen wird. */
.aufmacher--start h1 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.4rem); }

/* Auf dem Handy steht die Produktauswahl unter dem Text. Damit sie nicht
   erst nach einer ganzen Bildschirmhöhe auftaucht, rücken hier alle
   Abstände im Aufmacher zusammen. */
@media (max-width: 61.99rem) {
  .aufmacher--start { padding-block-start: clamp(1.75rem, 1rem + 3vw, 3rem); }
  .aufmacher--start .aufmacher__gitter { gap: 1.75rem; }
  .aufmacher--start h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem); margin-bottom: 1.1rem; }
  .aufmacher--start .aufmacher__lead { font-size: var(--gr-gross); margin-bottom: 0; }
  .aufmacher--start .aufmacher__aktionen { margin-bottom: 0; }

  /* Reihenfolge auf dem Handy: Überschrift, Text, Produktauswahl, erst dann
     die beiden Knöpfe. display:contents löst die linke Spalte auf, damit
     ihre Teile und die Produktauswahl in einem Raster liegen und sich
     einzeln sortieren lassen. */
  .aufmacher--start .aufmacher__gitter { gap: 1.4rem; }
  .aufmacher--start .aufmacher__gitter > div { display: contents; }
  .aufmacher--start .marke { order: 1; }
  .aufmacher--start h1 { order: 2; margin-bottom: 0; }
  .aufmacher--start .aufmacher__lead { order: 3; }
  .aufmacher--start .einstieg { order: 4; }
  .aufmacher--start .aufmacher__aktionen { order: 5; }
}
.aufmacher h1 em {
  font-style: italic;
  color: var(--blau-text);
}
.aufmacher__lead {
  font-size: var(--gr-lead);
  color: var(--tinte-leise);
  line-height: 1.5;
  max-width: 44ch;
  margin-bottom: 2.2rem;
}
.aufmacher__aktionen { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2rem; }

.aufmacher__fussnote {
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
  border-left: 2px solid var(--blau);
  padding-left: 1rem;
  max-width: 40ch;
}

.aufmacher__bild {
  position: relative;
  border: 1px solid var(--linie);
  background: var(--karte);
}
.aufmacher__bild img { width: 100%; height: auto; }
.aufmacher__bild::after {
  content: "";
  position: absolute;
  right: -14px; bottom: -14px;
  width: 96px; height: 96px;
  background-image: repeating-linear-gradient(115deg, var(--rot) 0 2px, transparent 2px 11px);
  z-index: -1;
}

/* Produktauswahl im Aufmacher: vier Wege zu den meistgesuchten Produkten */
.einstieg {
  display: grid;
  gap: .75rem;
  position: relative;
}
@media (min-width: 36rem) { .einstieg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.einstieg::after {
  content: "";
  position: absolute;
  right: -14px; bottom: 1.6rem;
  width: 96px; height: 96px;
  background-image: repeating-linear-gradient(115deg, var(--rot) 0 2px, transparent 2px 11px);
  z-index: -1;
}
.einstieg__titel {
  grid-column: 1 / -1;
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .25rem;
}
.einstieg__karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.25rem 2.6rem 1.3rem 1.3rem;
  background: var(--karte);
  border: 1.5px solid var(--tinte);
  color: var(--tinte);
  text-decoration: none;
  transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s;
}
.einstieg__karte:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--blau);
}
.einstieg__karte:focus-visible { outline: 3px solid var(--blau-text); outline-offset: 2px; }
.einstieg__art {
  font-size: var(--gr-klein);
  font-weight: 600;
  line-height: 1.3;
  color: var(--blau-text);
  hyphens: auto;
  overflow-wrap: break-word;
}
.einstieg__karte strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--gr-h3);
  line-height: 1.1;
}
.einstieg__text { font-size: var(--gr-klein); color: var(--tinte-leise); line-height: 1.45; }
.einstieg__karte .knopf__pfeil {
  position: absolute;
  top: 1.25rem; right: 1.1rem;
  margin: 0;
  color: var(--blau-text);
}
.einstieg__karte:hover .knopf__pfeil { transform: translateX(3px); }
.einstieg__alle {
  grid-column: 1 / -1;
  justify-self: start;
  padding-block: .5rem;
  font-size: var(--gr-klein);
  font-weight: 600;
  color: var(--blau-text);
  text-decoration: none;
}
.einstieg__alle:hover { text-decoration: underline; text-underline-offset: .25em; }

/* =========================================================================
   Zahlenband
   ========================================================================= */

.zahlenband {
  border-block: 1px solid var(--linie);
  margin-top: var(--sprung);
  position: relative;
  z-index: 2;
}
/* minmax(0, 1fr) statt 1fr: Sonst wird eine Spalte so breit wie ihr
   längstes Wort. Auf der PDF///BOX steht dort „Maklerverwaltungsprogramme“,
   und das Band schob die ganze Seite auf dem Handy nach rechts hinaus. */
.zahlenband__gitter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 56rem) { .zahlenband__gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.zahl {
  padding: 2.4rem 1.6rem;
  border-right: 1px solid var(--linie-zart);
  border-bottom: 1px solid var(--linie-zart);
}
@media (min-width: 56rem) { .zahl { border-bottom: none; } }
.zahl:last-child { border-right: none; }

.zahl__wert {
  font-family: var(--serif);
  font-size: var(--gr-zahl);
  line-height: .9;
  display: block;
  margin-bottom: .55rem;
}
.zahl__wert span { color: var(--blau-text); }
.zahl__text {
  font-size: var(--gr-klein);
  overflow-wrap: break-word;
  hyphens: auto;
  color: var(--tinte-leise);
  line-height: 1.4;
}

/* =========================================================================
   Karten
   ========================================================================= */

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  padding: 1.9rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.9,.3,1), box-shadow .2s, border-color .2s;
}
a.karte:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--tinte);
  border-color: var(--tinte);
}
.karte__nummer {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--blau-text);
  line-height: 1;
}

/* -------------------------------------------------------------------------
   Helle Bausteine in dunklen Abschnitten
   -------------------------------------------------------------------------
   .karte und .schluss bringen ihren eigenen hellen Untergrund mit. Stehen
   sie in einem .abschnitt--dunkel, färbt die allgemeine Regel weiter oben
   trotzdem jede Überschrift hell — helle Schrift auf heller Karte ergibt
   1,08:1 und ist praktisch unlesbar. Hier wird das zurückgedreht.

   Aufgefallen beim Bau von scanpdf.de. Die Verschachtelung gab es auf der
   Hauptdomäne nirgends, auf pdf-box.de dagegen auf zehn Seiten — dort war
   der Fehler also bereits gebaut und ist damit mit behoben.
   ------------------------------------------------------------------------- */
.abschnitt--dunkel .karte,
.abschnitt--dunkel .karte h2,
.abschnitt--dunkel .karte h3,
.abschnitt--dunkel .schluss,
.abschnitt--dunkel .schluss h2,
.abschnitt--dunkel .schluss h3 { color: var(--tinte); }
.abschnitt--dunkel .karte p,
.abschnitt--dunkel .schluss p  { color: var(--tinte-leise); }

/* Der Fließtext einer Kopfzeile nutzt --tinte-leise. Das ist eine Farbe für
   hellen Grund und erreicht auf --tinte nur 2,8:1. Auf dunklem Abschnitt
   deshalb die aufgehellte Fassung, die dort 12:1 erreicht. */
.abschnitt--dunkel .kopfzeile p,
.abschnitt--dunkel > .huelle > p { color: rgba(246, 244, 239, .72); }

/* Zwei Bausteine bringen im dunklen Abschnitt eine eigene Farbregel mit und
   überschreiben die Rückdrehung von oben. Beide sitzen aber auf dem hellen
   Grund der Karte, nicht auf dem dunklen Abschnitt — also zurück auf dunkel:
   der offene Knopf (sonst weiße Schrift auf weißem Grund) und das
   Markenzeichen (sonst Hellrot auf Weiß, 2,9:1). */
.abschnitt--dunkel .karte .knopf--offen,
.abschnitt--dunkel .schluss .knopf--offen {
  color: var(--tinte);
  border-color: var(--tinte);
}
.abschnitt--dunkel .karte .zeichen,
.abschnitt--dunkel .schluss .zeichen { color: var(--rot-text); }
.karte h3 { font-size: var(--gr-h3); }
.karte p { font-size: var(--gr-klein); color: var(--tinte-leise); margin: 0; }
.karte__mehr {
  margin-top: auto;
  padding-top: .8rem;
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blau-text);
  display: block;
}
.karte__mehr .knopf__pfeil { margin-left: .4rem; }
a.karte:hover .karte__mehr .knopf__pfeil { transform: translateX(4px); }

/* Verweis auf eine andere Domain — wird im Text sichtbar gemacht,
   damit der Wechsel niemanden überrascht */
.karte__extern {
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
/* Den Abstand setzt hier das gap des inline-flex. */
.karte__extern::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--pfeil-extern) center / contain no-repeat;
          mask: var(--pfeil-extern) center / contain no-repeat;
}

/* Gruppenüberschrift innerhalb einer Übersicht */
.gruppe { margin-top: var(--sprung); }
.gruppe:first-of-type { margin-top: 0; }
.gruppe__kopf {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding-bottom: 1rem;
  margin-bottom: 1.8rem;
  border-bottom: 1.5px solid var(--tinte);
}
.gruppe__kopf h2 { font-size: var(--gr-h3); }
.gruppe__kopf p { font-size: var(--gr-klein); color: var(--tinte-leise); margin-left: auto; text-align: right; }

/* =========================================================================
   Produktzeilen
   ========================================================================= */

.produkt {
  display: grid;
  gap: 2rem;
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-top: 1px solid var(--linie);
  align-items: start;
}
@media (min-width: 60rem) {
  .produkt { grid-template-columns: 5.5rem minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; }
}
/* Produktzeile ohne Preisblock: der Text nimmt die volle Breite ein,
   statt eine leere Spalte stehen zu lassen. */
@media (min-width: 60rem) {
  .produkt--breit > div:nth-child(2) { grid-column: 2 / -1; }
}

.produkt__index {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ziffer);
}
.produkt h3 { font-size: var(--gr-h2); margin-bottom: .9rem; }
.produkt__lead { font-size: var(--gr-gross); color: var(--tinte-leise); margin-bottom: 1.5rem; }

/* ---------------------------------------------------------------------
   Listen mit eigenem Aufzählungszeichen

   WICHTIG: Diese Listenpunkte dürfen NICHT display:grid oder display:flex
   bekommen. In einem Grid- oder Flex-Container wird jedes Kindelement zu
   einem eigenen Element — ein <span> oder <strong> mitten im Satz landet
   dann in der nächsten Zeile. Aus „SCAN///PDF" wurde so zwei Zeilen.
   Deshalb: normaler Textfluss, Einzug per padding, Zeichen absolut gesetzt.
   --------------------------------------------------------------------- */

.merkmale { list-style: none; padding: 0; display: grid; gap: .7rem; }
.merkmale li {
  position: relative;
  padding-left: 1.8rem;
  font-size: var(--gr-klein);
  line-height: 1.5;
}
.merkmale li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .95rem;
  height: 2px;
  background: var(--blau);
}

.preisblock {
  border: 1px solid var(--linie);
  background: var(--karte);
  padding: 1.5rem;
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1rem;
}
.preisblock__wert { font-family: var(--serif); font-size: 2.1rem; line-height: 1; }
.preisblock__zusatz { font-size: var(--gr-klein); color: var(--tinte-leise); }
.preisblock__aktionen { display: flex; gap: .7rem; flex-wrap: wrap; width: 100%; margin-top: 1rem; }

/* =========================================================================
   Webinar-Angebot
   ========================================================================= */

.angebot {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 60rem) {
  .angebot { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 4rem; }
}
.angebot h2 { font-size: var(--gr-h2); margin-bottom: 1.2rem; }
.angebot h2 em { font-style: italic; color: var(--blau); }
.angebot p { color: rgba(246, 244, 239, .72); font-size: var(--gr-gross); }

.rechnung {
  border: 1px solid rgba(246, 244, 239, .22);
  padding: 1.8rem;
  background: rgba(246, 244, 239, .04);
}
.rechnung__zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: .8rem;
  border-bottom: 1px solid rgba(246, 244, 239, .14);
  font-size: var(--gr-klein);
}
.rechnung__zeile:last-of-type { border-bottom: none; }
.rechnung__summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--blau);
}
.rechnung__summe span:first-child { font-size: var(--gr-klein); letter-spacing: .04em; text-transform: uppercase; }
.rechnung__summe span:last-child { font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--blau); }

/* =========================================================================
   Stimmen
   ========================================================================= */

.stimme {
  background: var(--karte);
  border: 1px solid var(--linie);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.stimme blockquote {
  font-family: var(--serif);
  font-size: var(--gr-h3);
  line-height: 1.25;
  margin: 0;
}
.stimme blockquote::before { content: "„"; color: var(--blau-text); }
.stimme blockquote::after { content: "“"; color: var(--blau-text); }
.stimme footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie-zart);
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
}
.stimme footer img { height: 30px; width: auto; }

/* Viele Zitate nebeneinander. Spalten statt Raster, damit unterschiedlich
   lange Zitate nicht zu Löchern führen. */
.stimmenwand { columns: 1; column-gap: 1.25rem; }
@media (min-width: 52rem) { .stimmenwand { columns: 2; } }
@media (min-width: 76rem) { .stimmenwand { columns: 3; } }

.stimmenwand .stimme {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  display: block;
  padding: 1.6rem;
}
.stimmenwand .stimme blockquote {
  font-family: var(--grotesk);
  font-size: var(--gr-klein);
  line-height: 1.6;
  letter-spacing: 0;
}
.stimmenwand .stimme blockquote::before,
.stimmenwand .stimme blockquote::after { content: none; }
.stimmenwand .stimme figcaption { margin-top: 1.1rem; }
.stimmenwand .stimme footer {
  border-top: 1px solid var(--linie-zart);
  padding-top: .9rem;
  margin-top: 0;
}
.stimmenwand .stimme img { height: 26px; max-width: 130px; object-fit: contain; object-position: left; }

/* Der wiederkehrende Begriff wird hervorgehoben */
.stimmenwand mark {
  background: var(--blau-hauch);
  color: inherit;
  padding: 0 .15em;
  box-shadow: inset 0 -2px 0 var(--blau);
}

/* Ein Zitat, das auch Kritik enthält — wird bewusst nicht versteckt */
.stimme__kritik {
  display: block;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--linie);
  font-size: var(--gr-winzig);
  color: var(--tinte-leise);
  font-style: italic;
}

/* =========================================================================
   Zeitstrahl
   ========================================================================= */

.zeitstrahl { position: relative; }
.zeitstrahl::before {
  content: "";
  position: absolute;
  left: 0; top: .6rem; bottom: 0;
  width: 1px;
  background: var(--linie);
}
@media (min-width: 52rem) {
  .zeitstrahl::before { left: 7.5rem; }
}

.jahr {
  position: relative;
  padding-left: 2rem;
  padding-bottom: 2.4rem;
}
@media (min-width: 52rem) {
  .jahr {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 2.5rem;
    padding-left: 0;
  }
}
.jahr::before {
  content: "";
  position: absolute;
  left: -4px; top: .75rem;
  width: 9px; height: 9px;
  background: var(--blau);
  border: 2px solid var(--papier);
  border-radius: 50%;
}
@media (min-width: 52rem) {
  .jahr::before { left: calc(7.5rem - 4px); }
}
.jahr--wichtig::before {
  width: 13px; height: 13px;
  left: -6px;
  background: var(--tinte);
}
@media (min-width: 52rem) {
  .jahr--wichtig::before { left: calc(7.5rem - 6px); }
}

.jahr__zahl {
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--tinte-leise);
  display: block;
  margin-bottom: .5rem;
}
@media (min-width: 52rem) {
  /* Rechtsbündig endet die Zahl genau auf der Linie — dort sitzt der Punkt.
     Der Abstand rechts hält sie frei. */
  .jahr__zahl { text-align: right; margin-bottom: 0; padding-top: .1rem; padding-right: 1.15rem; }
}
.jahr--wichtig .jahr__zahl { color: var(--tinte); font-size: 2.2rem; }

.jahr h3 {
  font-family: var(--grotesk);
  font-size: var(--gr-basis);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: .45rem;
}
.jahr p { font-size: var(--gr-klein); color: var(--tinte-leise); }
.jahr p + p { margin-top: .5rem; }
.jahr ul { list-style: none; padding: 0; margin-top: .5rem; display: grid; gap: .35rem; }
.jahr li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
  line-height: 1.5;
}
.jahr li::before {
  content: "·";
  position: absolute;
  left: .15rem;
  color: var(--blau-text);
  font-weight: 700;
}

/* =========================================================================
   Logoleiste
   ========================================================================= */

.logoleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.6rem 3.4rem;
}
.logoleiste img {
  height: 30px;
  width: auto;
  filter: grayscale(1) contrast(.35) brightness(.55);
  opacity: .78;
  transition: filter .25s, opacity .25s;
}
.logoleiste img:hover { filter: none; opacity: 1; }

/* =========================================================================
   Schlussaufruf
   ========================================================================= */

.schluss {
  border: 1.5px solid var(--tinte);
  padding: clamp(2.2rem, 1.5rem + 3vw, 4rem);
  display: grid;
  gap: 2rem;
  align-items: center;
  position: relative;
  background: var(--karte);
}
@media (min-width: 58rem) {
  .schluss { grid-template-columns: minmax(0, 1.3fr) auto; }
}
.schluss h2 { font-size: var(--gr-h2); }
.schluss p { color: var(--tinte-leise); margin-top: .8rem; }
.schluss__aktionen { display: flex; flex-wrap: wrap; gap: .8rem; }

/* =========================================================================
   Produktkopf
   ========================================================================= */

.produktkopf {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0;
  position: relative;
  z-index: 2;
}
.produktkopf__gitter { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 62rem) {
  .produktkopf__gitter { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; }
}
.produktkopf h1 { font-size: var(--gr-h1); margin-bottom: 1.2rem; }
.produktkopf__lead { font-size: var(--gr-lead); color: var(--tinte-leise); line-height: 1.5; max-width: 46ch; }
.produktkopf__aktionen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* Bild im Seitenkopf, über der Kurzfassung */
.produktkopf__bild {
  border: 1px solid var(--linie);
  background: var(--karte);
  margin-bottom: 1.25rem;
  position: relative;
}
.produktkopf__bild img { width: 100%; height: auto; }
.produktkopf__bild::after {
  content: "";
  position: absolute;
  right: -12px; bottom: -12px;
  width: 76px; height: 76px;
  background-image: repeating-linear-gradient(115deg, var(--rot) 0 2px, transparent 2px 11px);
  z-index: -1;
}

/* Das Wichtigste auf einen Blick — steht immer ganz oben */
.kurzfassung {
  border: 1.5px solid var(--tinte);
  background: var(--karte);
  padding: 1.8rem;
}
.kurzfassung h2 {
  font-family: var(--grotesk);
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.kurzfassung h2::before { height: 1.25rem; margin-right: .7rem; vertical-align: middle; }
.kurzfassung ul { list-style: none; padding: 0; display: grid; gap: .8rem; }
.kurzfassung li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--gr-klein);
  line-height: 1.5;
}
.kurzfassung li::before {
  content: "";
  display: inline-block;
  width: 1em;
  top: 0;
  height: 1.5em;
  height: 1lh;
  background-color: currentColor;
  -webkit-mask: var(--pfeil-rechts) center / contain no-repeat;
          mask: var(--pfeil-rechts) center / contain no-repeat;
  position: absolute;
  left: 0;
  color: var(--blau-text);
  font-weight: 600;
}

/* =========================================================================
   Preispakete
   ========================================================================= */

.pakete { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 62rem) { .pakete { grid-template-columns: repeat(3, 1fr); } }

.paket {
  border: 1px solid var(--linie);
  background: var(--karte);
  display: flex; flex-direction: column;
  height: 100%;
}
.paket--empfohlen {
  border: 1.5px solid var(--tinte);
  box-shadow: 6px 6px 0 var(--blau);
}
.paket__fahne {
  background: var(--tinte);
  color: var(--papier);
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .5rem 1.5rem;
}
.paket__kopf { padding: 1.6rem 1.5rem 1.2rem; border-bottom: 1px solid var(--linie); }
.paket__kopf h3 { font-family: var(--grotesk); font-size: var(--gr-gross); font-weight: 600; letter-spacing: 0; margin-bottom: .9rem; }
.paket__preis { font-family: var(--serif); font-size: 2.6rem; line-height: 1; }
.paket__takt { font-size: var(--gr-klein); color: var(--tinte-leise); }
.paket__neben { font-size: var(--gr-klein); color: var(--tinte-leise); margin-top: .7rem; }
.paket__neben del { opacity: .65; }

/* Der Webinar-Preis steht in jedem Paket direkt unter dem Grundpreis */
.paket__webinar {
  margin-top: 1rem;
  padding: .8rem 1rem;
  background: var(--blau-hauch);
  border-left: 3px solid var(--blau);
  display: grid;
  gap: .15rem;
}
.paket__webinar b {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  color: var(--blau-text);
}
.paket__webinar span {
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blau-text);
}
.paket__webinar small { font-size: var(--gr-klein); color: var(--tinte-leise); }

/* Erklärband über der Preistabelle */
.rabattband {
  border: 1.5px solid var(--tinte);
  background: var(--tinte);
  color: var(--papier);
  padding: 1.5rem 1.8rem;
  margin-bottom: 1.5rem;
  display: grid;
  gap: 1.2rem;
  align-items: center;
}
@media (min-width: 58rem) {
  .rabattband { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; }
}
.rabattband h3 {
  font-family: var(--serif);
  font-size: var(--gr-h3);
  margin-bottom: .5rem;
  color: var(--papier);
}
.rabattband p { color: rgba(246, 244, 239, .78); font-size: var(--gr-klein); max-width: 68ch; }
.rabattband ul {
  list-style: none; padding: 0; margin-top: .8rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  font-size: var(--gr-klein);
}
.rabattband li { position: relative; padding-left: 1.3rem; }
.rabattband li::before {
  content: "";
  display: inline-block;
  width: 1em;
  top: 0;
  height: 1.5em;
  height: 1lh;
  background-color: currentColor;
  -webkit-mask: var(--haken) center / contain no-repeat;
          mask: var(--haken) center / contain no-repeat;
  position: absolute;
  left: 0;
  color: var(--blau-hell);
  font-weight: 700;
}
.paket__leistungen { list-style: none; padding: 1.4rem 1.5rem; margin: 0; display: grid; gap: .7rem; flex: 1; }
.paket__leistungen li {
  position: relative;
  padding-left: 1.7rem;
  font-size: var(--gr-klein);
  line-height: 1.45;
}
.paket__leistungen li::before {
  content: "";
  display: inline-block;
  width: 1em;
  top: 0;
  height: 1.5em;
  height: 1lh;
  background-color: currentColor;
  -webkit-mask: var(--haken) center / contain no-repeat;
          mask: var(--haken) center / contain no-repeat;
  position: absolute;
  left: 0;
  color: var(--blau-text);
  font-weight: 700;
}
.paket__leistungen li.fehlt { color: var(--tinte-leise); }
.paket__leistungen li.fehlt::before { content: "–"; color: var(--tinte-leise); }
.paket__fuss { padding: 0 1.5rem 1.5rem; }
.paket__fuss .knopf { width: 100%; justify-content: center; }

.preisfussnote { font-size: var(--gr-klein); color: var(--tinte-leise); margin-top: 1.5rem; }

/* =========================================================================
   Preisübersicht
   ========================================================================= */

.uebersicht { font-size: var(--gr-klein); min-width: 44rem; }
.uebersicht thead th {
  text-align: left;
  padding: .7rem .9rem;
  border-bottom: 1.5px solid var(--tinte);
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.uebersicht__gruppe th {
  padding: 1.9rem .9rem .5rem;
  font-family: var(--serif);
  font-size: var(--gr-h3);
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: none;
  border-bottom: 1px solid var(--linie);
  text-align: left;
}
.uebersicht tbody th[scope="row"] {
  text-align: left;
  font-weight: 600;
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--linie-zart);
  white-space: nowrap;
}
.uebersicht tbody th a { text-decoration: none; }
.uebersicht tbody th a:hover { color: var(--blau-text); text-decoration: underline; text-underline-offset: .25em; }
.uebersicht td {
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--linie-zart);
  vertical-align: baseline;
}
.uebersicht__kurz { color: var(--tinte-leise); }

/* Die Produktnamen in der Preisübersicht sind Links auf die Produktseite —
   sie sahen nur nicht danach aus und wurden deshalb nicht als Weg dorthin
   erkannt. */
.uebersicht th[scope="row"] a { color: var(--blau-text); }
.uebersicht th[scope="row"] a:hover { text-decoration: underline; }

/* Eine Rufnummer darf nie umbrechen. Sonst stehen die letzten beiden Ziffern
   allein auf der nächsten Zeile — genau so geschehen bei „089 / 61 39 91 01".
   Als Regel statt als Inline-Stil, weil die Nummer an acht Stellen steht. */
a[href^="tel:"] { white-space: nowrap; }
.uebersicht__preis { white-space: nowrap; text-align: right; }
.uebersicht__offen { color: var(--tinte-leise); font-style: italic; }
.uebersicht__frei { color: var(--blau-text); font-weight: 600; }
/* Die Bedingung zum „ab"-Preis. Eigene Zeile, damit sie nicht als
   Fortsetzung des Preises gelesen wird — sie schränkt ihn ein. */
.uebersicht__bedingung {
  display: block;
  font-size: .82em;
  font-weight: 400;
  color: var(--tinte-leise);
  white-space: normal;
  margin-top: .15rem;
}
.uebersicht tbody tr:hover td, .uebersicht tbody tr:hover th { background: var(--karte); }
.uebersicht__gruppe:hover th { background: none; }

/* ---- Staffel nach Zahlweise (SACH///LIVE) ---------------------------- */
.zahlweisen { width: 100%; font-size: var(--gr-klein); border-collapse: collapse; }
.zahlweisen caption {
  caption-side: top;
  text-align: left;
  color: var(--tinte-leise);
  padding-bottom: .9rem;
}
.zahlweisen thead th {
  text-align: left;
  font-size: var(--gr-mikro, .75rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  font-weight: 500;
  padding: 0 .9rem .5rem 0;
  border-bottom: 1px solid var(--linie);
}
.zahlweisen th[scope="row"] { text-align: left; font-weight: 600; }
.zahlweisen th, .zahlweisen td {
  padding: .85rem .9rem .85rem 0;
  border-bottom: 1px solid var(--linie-zart);
  vertical-align: baseline;
}
.zahlweise__preis strong { font-size: 1.25em; }
/* „je Monat" gehört unter den Betrag, nicht dahinter — sonst liest sich
   „30,00 € je Monat 24 Monate" wie eine einzige Angabe. */
.zahlweise__preis small,
.zahlweise__fahne { display: block; color: var(--tinte-leise); }
.zahlweise__laufzeit { color: var(--tinte-leise); }
.zahlweise__fahne {
  font-size: var(--gr-mikro, .75rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blau-text);
  font-weight: 500;
  margin-top: .15rem;
}
.zahlweise--empfohlen th, .zahlweise--empfohlen td { background: var(--blau-hauch); }

/* Dieselbe Tabelle mit einer Textspalte (Webservice & API). Drei Spalten,
   von denen eine ein ganzer Satz ist, passen auf dem Telefon nicht mehr
   nebeneinander — dort wird jede Zeile zur Karte. */
.zahlweisen--breit td { color: var(--tinte-leise); }
.zahlweisen--breit .zahlweise__preis { color: var(--tinte); white-space: nowrap; }
@media (max-width: 46rem) {
  .zahlweisen--breit thead { display: none; }
  .zahlweisen--breit, .zahlweisen--breit tbody, .zahlweisen--breit tr,
  .zahlweisen--breit th, .zahlweisen--breit td { display: block; }
  .zahlweisen--breit tbody tr {
    border: 1px solid var(--linie);
    background: var(--karte);
    padding: 1rem 1.1rem;
    margin-top: .75rem;
  }
  .zahlweisen--breit tbody th, .zahlweisen--breit tbody td {
    border-bottom: none;
    padding: 0;
  }
  .zahlweisen--breit tbody th[scope="row"] { font-size: var(--gr-basis); margin-bottom: .3rem; }
  .zahlweisen--breit .zahlweise__preis {
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid var(--linie-zart);
    white-space: normal;
  }
  .zahlweisen--breit .zahlweise__preis small { display: inline; margin-left: .4rem; }
}

/* Auf schmalen Bildschirmen wird aus der Tabelle eine Liste von Karten.
   Seitwärts wischen ist für eine Preisliste die schlechtere Bedienung. */
@media (max-width: 46rem) {
  .uebersicht { min-width: 0; width: 100%; }
  .uebersicht thead { display: none; }
  .uebersicht, .uebersicht tbody, .uebersicht tr, .uebersicht th, .uebersicht td { display: block; }

  .uebersicht__gruppe th {
    padding: 1.8rem 0 .6rem;
    border-bottom: 1.5px solid var(--tinte);
  }
  .uebersicht tbody tr:not(.uebersicht__gruppe) {
    border: 1px solid var(--linie);
    background: var(--karte);
    padding: 1rem 1.1rem;
    margin-top: .75rem;
  }
  .uebersicht tbody tr:not(.uebersicht__gruppe) th[scope="row"],
  .uebersicht tbody tr:not(.uebersicht__gruppe) td {
    border-bottom: none;
    padding: 0;
    white-space: normal;
  }
  .uebersicht tbody th[scope="row"] { font-size: var(--gr-basis); margin-bottom: .3rem; }
  .uebersicht__kurz { margin-bottom: .7rem; }
  .uebersicht__preis {
    text-align: left;
    padding-top: .7rem !important;
    border-top: 1px solid var(--linie-zart) !important;
  }
  .uebersicht tbody tr:hover td, .uebersicht tbody tr:hover th { background: none; }
}

/* =========================================================================
   Ablauf in Schritten
   ========================================================================= */

.schritte { display: grid; gap: 1.5rem; counter-reset: schritt; }
@media (min-width: 56rem) { .schritte { grid-template-columns: repeat(4, 1fr); } }
.schritt { border-top: 2px solid var(--tinte); padding-top: 1.1rem; }
.schritt::before {
  counter-increment: schritt;
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--blau-text);
  display: block;
  margin-bottom: .5rem;
}
.schritt h3 { font-family: var(--grotesk); font-size: var(--gr-basis); font-weight: 600; letter-spacing: 0; margin-bottom: .5rem; }
.schritt p { font-size: var(--gr-klein); color: var(--tinte-leise); }

/* =========================================================================
   Wirkungszahlen
   ========================================================================= */

.wirkung { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
@media (min-width: 40rem) { .wirkung { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .wirkung { grid-template-columns: repeat(5, 1fr); } }
.wirkung > div { background: var(--karte); padding: 1.5rem 1.2rem; }
.wirkung b {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  display: block;
  margin-bottom: .4rem;
}
.wirkung span { font-size: var(--gr-klein); color: var(--tinte-leise); line-height: 1.4; }

/* =========================================================================
   Gegenüberstellung vorher / nachher
   ========================================================================= */

.vergleich { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 56rem) { .vergleich { grid-template-columns: 1fr 1fr; } }

.vergleich > div {
  border: 1px solid var(--linie);
  background: var(--karte);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
}
.vergleich > div.vergleich--jetzt {
  border: 1.5px solid var(--tinte);
  box-shadow: 6px 6px 0 var(--blau);
}
.vergleich__marke {
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: 1rem;
}
.vergleich--jetzt .vergleich__marke { color: var(--blau-text); }
.vergleich__wert {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
  line-height: .95;
  margin-bottom: .4rem;
}
.vergleich--jetzt .vergleich__wert { color: var(--blau-text); }
.vergleich__wozu { font-size: var(--gr-gross); color: var(--tinte-leise); margin-bottom: 1.4rem; }
.vergleich ul { list-style: none; padding: 0; display: grid; gap: .65rem; margin-top: auto; }
.vergleich li {
  position: relative;
  padding-left: 1.7rem;
  font-size: var(--gr-klein);
  line-height: 1.5;
}
.vergleich li::before { position: absolute; left: 0; }
.vergleich > div:not(.vergleich--jetzt) li::before { content: "•"; color: var(--tinte-leise); }
.vergleich--jetzt li::before {
  content: "";
  display: inline-block;
  width: 1em;
  top: 0;
  height: 1.5em;
  height: 1lh;
  background-color: currentColor;
  -webkit-mask: var(--haken) center / contain no-repeat;
          mask: var(--haken) center / contain no-repeat;
  color: var(--blau-text);
}

/* =========================================================================
   Prompt- und Codekasten
   ========================================================================= */

.promptkasten {
  background: var(--tinte);
  color: var(--papier);
  padding: 1.5rem 1.7rem;
  font-size: var(--gr-klein);
  line-height: 1.6;
  overflow-x: auto;
}
.promptkasten__marke {
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blau-hell);
  display: block;
  margin-bottom: .9rem;
}
.promptkasten pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .85em;
  white-space: pre-wrap;
  color: rgba(246, 244, 239, .92);
}

/* =========================================================================
   Kürzel-Raster (Spartencodes, Parameternamen)
   ========================================================================= */

.codes { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
@media (min-width: 34rem) { .codes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .codes { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .codes { grid-template-columns: repeat(4, 1fr); } }

.codes > div {
  background: var(--karte);
  padding: .85rem 1rem;
  display: flex;
  align-items: baseline;
  gap: .7rem;
}
.codes code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--gr-klein);
  font-weight: 600;
  color: var(--blau-text);
  background: var(--blau-hauch);
  padding: .1rem .4rem;
  flex: none;
  min-width: 3.6rem;
  text-align: center;
}
.codes span { font-size: var(--gr-klein); line-height: 1.35; }

/* Kürzel im Fließtext */
p code, li code, td code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .9em;
  background: var(--papier-tief);
  padding: .05em .35em;
  border: 1px solid var(--linie-zart);
}

/* =========================================================================
   Hinweiskasten
   ========================================================================= */

.hinweis {
  border-left: 3px solid var(--blau);
  background: var(--blau-hauch);
  padding: 1.3rem 1.5rem;
  font-size: var(--gr-klein);
  line-height: 1.6;
}
.hinweis strong { display: block; margin-bottom: .3rem; }
.hinweis p { max-width: none; }

/* =========================================================================
   Fragen und Antworten
   ========================================================================= */

.fragen { border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
/* Bewusst kein Flex-Container: In einer Frage wie „Was macht SCAN///PDF
   anders?" wird jedes Kindelement zum Flex-Item — auch das <span> des
   Markenzeichens. justify-content hat den Produktnamen dann quer über die
   Zeile auseinandergezogen. Das Pluszeichen sitzt deshalb absolut. */
.frage summary {
  display: block;
  position: relative;
  padding: 1.3rem 2.5rem 1.3rem 0;
  cursor: pointer;
  font-size: var(--gr-h3);
  font-family: var(--serif);
  list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 1.3rem;
  font-family: var(--grotesk);
  font-size: 1.5rem;
  color: var(--blau-text);
  line-height: inherit;
  transition: transform .2s;
}
.frage[open] summary::after { transform: rotate(45deg); }
.frage summary:hover { color: var(--blau-text); }
.frage__antwort { padding-bottom: 1.5rem; }
.frage__antwort p { color: var(--tinte-leise); }
.frage__antwort p + p { margin-top: .8rem; }

/* Gruppenüberschrift innerhalb einer Fragenliste */
.fragengruppe { margin-top: 3rem; }
.fragengruppe:first-of-type { margin-top: 0; }
.fragengruppe > h2 {
  font-size: var(--gr-h3);
  margin-bottom: .4rem;
}
.fragengruppe > h2::before { height: 1.15rem; margin-right: .9rem; }
.fragengruppe > p {
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
  margin-bottom: 1.2rem;
  padding-left: 1.86rem;   /* Breite der Markierung (.96rem) plus Abstand */
}

/* Wegweiser zu den Fragen auf den Produktseiten */
.wegweiser { display: grid; gap: .75rem; }
@media (min-width: 46rem) { .wegweiser { grid-template-columns: repeat(2, 1fr); } }
.wegweiser a {
  display: block;
  padding: 1rem 1.2rem;
  border: 1px solid var(--linie);
  background: var(--karte);
  text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.wegweiser a:hover {
  border-color: var(--tinte);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--blau);
}
.wegweiser strong { display: block; font-size: var(--gr-basis); }
.wegweiser span {
  display: block;
  margin-top: .2rem;
  font-size: var(--gr-winzig);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blau-text);
}

/* =========================================================================
   Gesellschaftstabelle
   ========================================================================= */

.gesellschaften { font-size: var(--gr-klein); }
.gesellschaften th, .gesellschaften td {
  text-align: left;
  padding: .65rem .8rem;
  border-bottom: 1px solid var(--linie-zart);
}
.gesellschaften thead th {
  border-bottom: 1.5px solid var(--tinte);
  font-size: var(--gr-winzig);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  position: sticky; top: 0;
  background: var(--papier);
}
.gesellschaften tbody tr:hover { background: var(--karte); }
.gesellschaften td:not(:first-child) { text-align: center; width: 1%; white-space: nowrap; }
.gesellschaften .ja { color: var(--blau-text); font-weight: 700; }
.gesellschaften .nein { color: var(--linie); }

/* =========================================================================
   Formulare
   ========================================================================= */

.formular {
  border: 1.5px solid var(--tinte);
  background: var(--karte);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.feldgruppe { display: grid; gap: 1.2rem; }
@media (min-width: 40rem) { .feldgruppe--2 { grid-template-columns: 1fr 1fr; } }

/* align-content: start — ohne das streckt sich ein Feld auf die Höhe
   seines Nachbarn, und die freie Höhe verteilt sich auf die Zeilen: Steht
   neben einem Feld eines MIT Hinweistext, rutschte dessen Eingabefeld
   sichtbar tiefer als das daneben (Kontaktformular, E-Mail/Telefon). */
.feld { display: grid; gap: .4rem; align-content: start; }

/* Zusatz an einem Feldnamen, der kein Pflichtfeld ist */
.feld__freiwillig { font-weight: 400; color: var(--tinte-leise); }
.feld > label {
  font-size: var(--gr-klein);
  font-weight: 600;
  letter-spacing: .02em;
}
.feld > label .pflicht { color: var(--blau-text); }
.feld__hinweis { font-size: var(--gr-winzig); color: var(--tinte-leise); }

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld select,
.feld textarea {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--linie);
  border-radius: 0;
  background: var(--papier);
  font-size: var(--gr-basis);
  transition: border-color .15s, box-shadow .15s;
}
.feld textarea { resize: vertical; min-height: 8rem; }

.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--tinte-leise); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--blau-flaeche);
  box-shadow: 0 0 0 3px var(--blau-hauch);
}
.feld input:user-invalid, .feld textarea:user-invalid {
  border-color: #A3231C;
  box-shadow: 0 0 0 3px rgba(163, 35, 28, .1);
}

/* Auswahlfelder als anklickbare Kacheln */
.wahlgitter { display: grid; gap: .6rem; }
/* Zwischenüberschrift je Produktgruppe. Die Liste ist mit fünfzehn Marken
   zu lang, um sie am Stück zu überfliegen — dieselben vier Gruppen wie in
   der Navigation und in der Preisübersicht geben ihr eine Ordnung. */
.wahlgitter__gruppe {
  font-size: var(--gr-mikro, .75rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin: 1.4rem 0 .5rem;
}
.wahlgitter__gruppe:first-child { margin-top: 0; }
@media (min-width: 40rem) { .wahlgitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .wahlgitter { grid-template-columns: repeat(3, 1fr); } }

.wahl {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .8rem .9rem;
  border: 1px solid var(--linie);
  background: var(--papier);
  font-size: var(--gr-klein);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.wahl:hover { border-color: var(--tinte-leise); }
.wahl input { margin: .15rem 0 0; accent-color: var(--blau-flaeche); flex: none; }
.wahl:has(input:checked) { border-color: var(--blau-flaeche); background: var(--blau-hauch); }
.wahl:has(input:focus-visible) { outline: 3px solid var(--tinte); outline-offset: 2px; }

/* Datenschutzhinweis über der Einwilligung.
   Er steht bewusst vor dem Kästchen und nicht darin: Wer einwilligt, muss
   vorher wissen, worin — ein Hinweis, den man erst nach dem Klick liest,
   ist keiner. */
.datenhinweis {
  margin-top: 1.2rem;
  padding: .9rem 1rem;
  border-left: 3px solid var(--blau-flaeche);
  background: var(--blau-hauch);
  font-size: var(--gr-winzig);
  line-height: 1.55;
  color: var(--tinte-leise);
}
.datenhinweis a { color: var(--blau-text); }

/* Einwilligung */
.einwilligung {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: var(--gr-klein);
  line-height: 1.5;
  color: var(--tinte-leise);
}
.einwilligung input { margin-top: .25rem; accent-color: var(--blau-flaeche); flex: none; }
.einwilligung a { color: var(--blau-text); }

/* Honigtopf gegen Spam — für Menschen unsichtbar, für Formularroboter nicht */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

fieldset { border: none; padding: 0; margin: 0; }
legend {
  font-size: var(--gr-klein);
  font-weight: 600;
  padding: 0;
  margin-bottom: .7rem;
}

/* =========================================================================
   Webinarseite: Anmeldung zuerst
   ========================================================================= */

.webinarkopf {
  padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem) clamp(3rem, 2rem + 4vw, 5rem);
  position: relative;
  z-index: 2;
}
.webinarkopf__zeile { display: grid; gap: 1.2rem; align-items: end; margin-bottom: .8rem; }
@media (min-width: 62rem) {
  .webinarkopf__zeile { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; }
}
.webinarkopf h1 {
  font-size: var(--gr-h2);
  line-height: 1.05;
}
.webinarkopf h1 em,
.webinarkopf__h2 em { font-style: italic; color: var(--blau-text); }
.webinarkopf__fakten { list-style: none; padding: 0; display: grid; gap: .45rem; }
.webinarkopf__fakten li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--gr-klein);
  font-weight: 500;
}
.webinarkopf__fakten li::before {
  content: "";
  position: absolute;
  left: 0; top: .2em;
  width: 1em; height: 1em;
  background-color: var(--blau);
  -webkit-mask: var(--haken) center / contain no-repeat;
          mask: var(--haken) center / contain no-repeat;
}
.webinarkopf__lead {
  font-size: var(--gr-gross);
  color: var(--tinte-leise);
  margin-bottom: 2rem;
  max-width: 60ch;
}
.webinarkopf__h2 { font-size: var(--gr-h2); margin-bottom: 1.2rem; }
/* Die Karten selbst stehen hier im Vordergrund — ein kräftigerer Rahmen
   hebt sie vom Seitengrund ab. */
.webinarkopf .webinar { border: 1.5px solid var(--tinte); box-shadow: 5px 5px 0 var(--blau); }
.webinarkopf .webinar--hervor { box-shadow: 8px 8px 0 var(--rot); }
.webinarkopf .webinar__laedt { min-height: 20rem; display: grid; place-items: center; }

/* =========================================================================
   Webinarkarten
   ========================================================================= */

.webinarliste { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 62rem) { .webinarliste { grid-template-columns: repeat(2, 1fr); } }

.webinar {
  border: 1px solid var(--linie);
  background: var(--karte);
  display: flex;
  flex-direction: column;
}
.webinar--hervor {
  border: 1.5px solid var(--tinte);
  box-shadow: 6px 6px 0 var(--blau);
}
.webinar__kopf {
  padding: 1.5rem 1.6rem 1.2rem;
  border-bottom: 1px solid var(--linie);
}
.webinar__kopf h3 { font-size: var(--gr-h3); margin-bottom: .4rem; }
.webinar__kopf p { font-size: var(--gr-winzig); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-leise); }
.webinar__koerper { padding: 1.5rem 1.6rem; flex: 1; }
.webinar__fuss { padding: 0 1.6rem 1.6rem; }
.webinar__fuss .knopf { width: 100%; justify-content: center; }
.webinar__termine { display: grid; gap: .5rem; max-height: 19rem; overflow-y: auto; }
.webinar__meldung:empty { display: none; }
.webinar__meldung .meldung { margin-bottom: 0; margin-top: 1.2rem; }

/* Ladezustand und Ausfall */
.webinarliste > .meldung { grid-column: 1 / -1; margin-bottom: 0; }
.webinar__laedt {
  grid-column: 1 / -1;
  padding: 2.5rem;
  border: 1px dashed var(--linie);
  text-align: center;
  color: var(--tinte-leise);
  font-size: var(--gr-klein);
}

/* Rückmeldung nach dem Absenden */
.meldung {
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--blau);
  background: var(--blau-hauch);
  margin-bottom: 2rem;
  font-size: var(--gr-klein);
  /* Die Endpunkte springen nach dem Absenden mit #meldung hierher. Ohne
     diesen Abstand landet die Bestätigung genau hinter der festen Kopfzeile
     und ist halb verdeckt — ausgerechnet die Zeile, die sagt, dass die
     Anfrage angekommen ist. */
  scroll-margin-top: 6rem;
}
.meldung--fehler { border-left-color: #A3231C; background: #FBEDEC; }
.meldung strong { display: block; margin-bottom: .3rem; font-size: var(--gr-basis); }

/* Ansprechpartner-Karte */
.person {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1.4rem;
  border: 1px solid var(--linie);
  background: var(--karte);
}
.person__daten h3 {
  font-family: var(--grotesk);
  font-size: var(--gr-basis);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: .15rem;
}
.person__rolle { font-size: var(--gr-winzig); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-leise); }
.person__daten p { font-size: var(--gr-klein); margin-top: .6rem; }
.person__daten a { color: var(--blau-text); }

/* =========================================================================
   Bildarchiv / Presseseite
   ========================================================================= */

.markengitter { display: grid; gap: 1.25rem; }
@media (min-width: 56rem) { .markengitter { grid-template-columns: repeat(2, 1fr); } }

.marke-karte {
  border: 1px solid var(--linie);
  background: var(--karte);
  display: flex;
  flex-direction: column;
}
.marke-karte__bild {
  padding: 2rem 1.6rem;
  border-bottom: 1px solid var(--linie);
  background:
    repeating-conic-gradient(var(--papier-tief) 0% 25%, var(--karte) 0% 50%)
    0 0 / 18px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8.5rem;
}
.marke-karte__bild img { max-height: 4.5rem; width: auto; max-width: 100%; }
.marke-karte__text { padding: 1.4rem 1.6rem 1.6rem; }
.marke-karte__text h3 { font-size: var(--gr-h3); margin-bottom: .25rem; }
.marke-karte__text > p { font-size: var(--gr-klein); color: var(--tinte-leise); }

.dateiliste { list-style: none; padding: 0; margin-top: 1.1rem; display: grid; gap: 1px; background: var(--linie-zart); border: 1px solid var(--linie-zart); }
.dateiliste a {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: .8rem;
  align-items: baseline;
  padding: .6rem .8rem;
  background: var(--papier);
  text-decoration: none;
  font-size: var(--gr-klein);
  transition: background .15s;
}
.dateiliste a:hover { background: var(--blau-hauch); }
.dateiliste strong { font-weight: 600; color: var(--blau-text); }
.dateiliste span { color: var(--tinte-leise); }
.dateiliste em { font-style: normal; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }

/* AGB-Dokumente */
.agbliste { list-style: none; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 56rem) { .agbliste { grid-template-columns: repeat(2, 1fr); } }

.agbliste a {
  display: grid;
  gap: .2rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--linie);
  background: var(--karte);
  text-decoration: none;
  height: 100%;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.agbliste a:hover {
  border-color: var(--tinte);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--blau);
}
.agb__produkt { font-size: var(--gr-gross); font-weight: 600; }
.agb__wofuer { font-size: var(--gr-klein); color: var(--tinte-leise); }
.agb__meta {
  margin-top: .6rem;
  font-size: var(--gr-winzig);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blau-text);
  font-variant-numeric: tabular-nums;
}

/* Farbfelder */
.farbfelder { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .farbfelder { grid-template-columns: repeat(3, 1fr); } }
.farbfeld { border: 1px solid var(--linie); background: var(--karte); }
.farbfeld__probe { height: 5rem; }
.farbfeld__daten { padding: .9rem 1.1rem; font-size: var(--gr-klein); }
.farbfeld__daten strong { display: block; margin-bottom: .2rem; }
.farbfeld__daten code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .95em;
  background: none;
  border: none;
  padding: 0;
  color: var(--tinte-leise);
}

/* =========================================================================
   Rechtstexte
   Der Inhalt kommt von der zentralen Stelle und bringt eigenes Markup mit.
   Hier wird es nur eingepasst, nicht umgebaut.
   ========================================================================= */

.rechtstext { max-width: 44rem; }
.rechtstext h2 {
  font-size: var(--gr-h2);
  margin-top: 3rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--linie);
}
.rechtstext h3 { font-size: var(--gr-h3); margin-top: 2.2rem; }
.rechtstext h4 {
  font-family: var(--grotesk);
  font-size: var(--gr-basis);
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 1.8rem;
}
.rechtstext > *:first-child { margin-top: 0; }
.rechtstext p { margin-top: .9rem; line-height: 1.7; }
.rechtstext ul, .rechtstext ol { margin-top: .9rem; padding-left: 1.4rem; }
.rechtstext li { margin-top: .35rem; line-height: 1.6; }
.rechtstext a { color: var(--blau-text); }
.rechtstext strong { font-weight: 600; }

.rechtstext dl { margin-top: .9rem; }
/* Zweispaltig nur, wenn es überhaupt Werte gibt. Die Kontaktdatenliste im
   Impressum enthält ausschließlich <dt> — die würden sonst paarweise
   nebeneinanderstehen und wie Bezeichnung und Wert aussehen. */
.rechtstext dl.spalten {
  display: grid;
  gap: .3rem 1.5rem;
  align-items: baseline;
}
@media (min-width: 34rem) {
  .rechtstext dl.spalten:has(dd) { grid-template-columns: auto 1fr; }
}
.rechtstext dl.spalten:not(:has(dd)) dt { font-weight: 400; }
.rechtstext dt { font-weight: 600; }
.rechtstext dd { margin: 0; color: var(--tinte-leise); }
/* Inhaltsverzeichnis langer Rechtstexte */
.verzeichnis {
  border: 1px solid var(--linie);
  background: var(--karte);
  margin-bottom: 2.5rem;
}
.verzeichnis > summary {
  padding: 1rem 1.3rem;
  cursor: pointer;
  font-size: var(--gr-klein);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.verzeichnis > summary::-webkit-details-marker { display: none; }
.verzeichnis > summary::after {
  content: "+";
  font-size: 1.3rem;
  line-height: 1;
  color: var(--blau-text);
}
.verzeichnis[open] > summary::after { content: "–"; }
.verzeichnis > summary:hover { color: var(--blau-text); }
.verzeichnis__liste {
  margin: 0;
  padding: 0 1.3rem 1.3rem 2.6rem;
  max-height: 26rem;
  overflow-y: auto;
  font-size: var(--gr-klein);
}
.verzeichnis__liste li { margin-top: .3rem; }
.verzeichnis__liste a { color: inherit; text-decoration: none; }
.verzeichnis__liste a:hover { color: var(--blau-text); text-decoration: underline; text-underline-offset: .2em; }

.rechtstext h2 { scroll-margin-top: 5.5rem; }
.rechtstext table { margin-top: 1rem; font-size: var(--gr-klein); }
.rechtstext th, .rechtstext td {
  text-align: left;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--linie-zart);
}

/* =========================================================================
   News
   ========================================================================= */

.jahresleiste {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1.5px solid var(--tinte);
  position: sticky;
  top: 4.2rem;
  background: var(--papier);
  z-index: 10;
  padding-top: 1rem;
}
.jahresleiste a {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .35rem .7rem;
  border: 1px solid var(--linie);
  background: var(--karte);
  font-size: var(--gr-klein);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.jahresleiste a:hover { border-color: var(--tinte); background: var(--papier-tief); }
.jahresleiste a span { font-size: var(--gr-winzig); font-weight: 400; color: var(--tinte-leise); }

.newsjahr { margin-bottom: 3rem; scroll-margin-top: 9rem; }
.newsjahr h2 {
  font-size: var(--gr-h2);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .8rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--linie);
}
.newsjahr h2 span {
  font-family: var(--grotesk);
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-left: auto;
}

.newsliste { list-style: none; padding: 0; }
.newsliste li { border-bottom: 1px solid var(--linie-zart); }
.newsliste a {
  display: grid;
  gap: .2rem 1.5rem;
  padding: .95rem .3rem;
  text-decoration: none;
  transition: background .15s, padding-left .15s;
}
@media (min-width: 46rem) {
  .newsliste a { grid-template-columns: 11rem 1fr; align-items: baseline; }
}
.newsliste a:hover { background: var(--karte); padding-left: .8rem; }
.newsliste time, .newsliste a > span {
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}
.newsliste strong { font-weight: 500; line-height: 1.4; }
.newsliste a:hover strong { color: var(--blau-text); }

/* Einzelner Beitrag */
.beitrag { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.beitrag .marke a { color: inherit; }
.beitrag .marke a:hover { color: var(--blau-text); }
.beitrag__titel { font-size: var(--gr-h2); margin-bottom: 2rem; }
.beitrag__text > * + * { margin-top: 1.2rem; }
.beitrag__text p { font-size: var(--gr-gross); line-height: 1.65; }
.beitrag__text h2 { font-size: var(--gr-h3); margin-top: 2.5rem; }
.beitrag__blaettern {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linie);
}

/* =========================================================================
   Fuß
   ========================================================================= */

.fuss {
  background: var(--tinte);
  color: rgba(246, 244, 239, .72);
  padding-block: var(--sprung) 2.5rem;
  position: relative;
  z-index: 2;
  font-size: var(--gr-klein);
}
.fuss__gitter { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) {
  .fuss__gitter { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 3rem; }
}
.fuss h3 {
  font-family: var(--grotesk);
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--papier);
  margin-bottom: 1.1rem;
}
.fuss ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.fuss__logo { width: 150px; margin-bottom: 1.2rem; filter: brightness(0) invert(1); opacity: .9; }
.fuss__unten {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(246, 244, 239, .16);
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2rem;
  justify-content: space-between;
  font-size: var(--gr-winzig);
  color: rgba(246, 244, 239, .5);
}

/* =========================================================================
   Einblenden beim Laden
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .auftritt {
    opacity: 0;
    transform: translateY(14px);
    animation: auftritt .7s cubic-bezier(.2,.9,.3,1) forwards;
  }
  .auftritt:nth-child(1) { animation-delay: .05s; }
  .auftritt:nth-child(2) { animation-delay: .13s; }
  .auftritt:nth-child(3) { animation-delay: .21s; }
  .auftritt:nth-child(4) { animation-delay: .29s; }
}
@keyframes auftritt { to { opacity: 1; transform: none; } }

/* Leiste der Prüfansicht — erscheint nur bei ?platzhalter in der Adresse */
.pruefleiste {
  position: fixed;
  bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--tinte);
  color: var(--papier);
  border: 1px solid rgba(246,244,239,.25);
  padding: .55rem .9rem;
  font-size: var(--gr-winzig);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  max-width: calc(100% - 2rem);
  text-align: center;
}

/* AGB-Verweis am Preis */
.uebersicht__agb { white-space: nowrap; }
.uebersicht__agb .agb__verweis {
  font-size: var(--gr-winzig);
  color: var(--tinte-leise);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.uebersicht__agb .agb__verweis:hover { color: var(--blau-text); }
.agb__verweis { color: var(--blau-text); }
.agb__zusatz { color: var(--tinte-leise); font-variant-numeric: tabular-nums; }

/* Zielgruppen-Wechsler am Fuß jeder Zielgruppenseite */
.wechsler { padding-top: 0; }
.wechsler__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 1.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}
.wechsler__frage {
  font-size: var(--gr-winzig);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin: 0;
}
.wechsler__liste {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 20rem;
}
.wechsler__liste a {
  font-size: var(--gr-klein);
  color: var(--blau-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.wechsler__liste a:hover { border-bottom-color: currentColor; }
.wechsler__alle {
  font-size: var(--gr-klein);
  font-weight: 600;
  color: var(--tinte);
  text-decoration: none;
  white-space: nowrap;
}
.wechsler__alle:hover { color: var(--blau-text); }

/* Die folgenden Bausteine lagen bis 14.10.2026 in pdf-box/src/assets/css/pdfbox.css.
   Seit die BiPRO///BOX dieselbe Anmeldekarte im Aufmacher zeigt, gehören sie
   hierher: eine Fassung für alle Domänen statt zwei, die auseinanderlaufen. */
/* =========================================================================
   Aufmacher mit Webinaranmeldung
   Rechts die Anmeldekarte, links das Versprechen. Die Karte folgt dem
   Formenkanon der Seite — kräftiger Rahmen, versetzter Schatten —, bekommt
   aber das Rot des Webinaraufrufs, damit sie der erste Blickpunkt ist.
   ========================================================================= */

.aufmacher--anmeldung .aufmacher__gitter { align-items: start; }
/* Die linke Spalte ist neben der Karte schmaler — eine Stufe kleiner, damit
   die Überschrift nicht einzelne Wörter in eine eigene Zeile schiebt. */
.aufmacher--anmeldung h1 { font-size: clamp(2.3rem, 1.3rem + 3vw, 4rem); }
@media (min-width: 62rem) { .aufmacher--anmeldung .anmeldekarte { margin-top: .4rem; } }
@media (min-width: 62rem) {
  .aufmacher--anmeldung .aufmacher__gitter { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }
}
.anmeldekarte { position: relative; scroll-margin-top: 6rem; }
/* Die diagonale Schraffur der Marke hinter der Karte */
.anmeldekarte::before {
  content: "";
  position: absolute;
  left: -18px; top: 2.5rem;
  width: 110px; height: 110px;
  background-image: repeating-linear-gradient(115deg, var(--rot) 0 2px, transparent 2px 11px);
  z-index: -1;
}
.anmeldekarte .webinarliste { grid-template-columns: minmax(0, 1fr); gap: 0; }
.anmeldekarte__vorteil {
  margin-top: 1.1rem;
  padding-left: 1.6rem;
  position: relative;
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
  line-height: 1.5;
}
.anmeldekarte__vorteil strong { color: var(--tinte); }
.anmeldekarte__vorteil::before {
  content: "";
  position: absolute;
  left: 0; top: .15em;
  width: 1.05em; height: 1.05em;
  background-color: var(--rot-text);
  -webkit-mask: var(--haken) center / contain no-repeat;
          mask: var(--haken) center / contain no-repeat;
}
.anmeldekarte .webinar__laedt { min-height: 26rem; display: grid; place-items: center; }

/* ---- Die Karte selbst ---------------------------------------------- */

.webinar--kompakt {
  border: 1.5px solid var(--tinte);
  box-shadow: 8px 8px 0 var(--rot);
  background: var(--karte);
}
.webinar--kompakt .webinar__kopf {
  background: var(--tinte);
  color: var(--papier);
  border-bottom: none;
  padding: 1.25rem 1.4rem 1.15rem;
}
.webinar--kompakt .webinar__kopf h2,
.webinar--kompakt .webinar__kopf h3 {
  font-size: clamp(1.45rem, 1.2rem + .8vw, 1.8rem);
  line-height: 1.1;
  margin: .55rem 0 .45rem;
}
.webinar--kompakt .webinar__kopf p {
  font-size: var(--gr-winzig);
  letter-spacing: 0;
  text-transform: none;
  color: rgba(246, 244, 239, .7);
  line-height: 1.45;
}
.webinar--kompakt .webinar__kopf .zeichen { color: var(--rot-hell); }

/* „Live“-Etikett mit pulsierendem Punkt — dieselbe Sprache wie der
   Gratis-Webinar-Knopf im Kopf. */
.webinar__live {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rot-hell);
}
.webinar__live::before {
  content: "";
  width: .55em; height: .55em;
  border-radius: 50%;
  background: var(--rot-hell);
  animation: webinar-puls-rot 2s ease-out infinite;
}
@keyframes webinar-puls-rot {
  0%   { box-shadow: 0 0 0 0 rgba(255, 92, 147, .6); }
  70%  { box-shadow: 0 0 0 .5em rgba(255, 92, 147, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 92, 147, 0); }
}
@media (prefers-reduced-motion: reduce) { .webinar__live::before { animation: none; } }

.webinar--kompakt .webinar__koerper { padding: 1.2rem 1.4rem 1rem; }
.webinar--kompakt legend {
  font-size: var(--gr-klein);
  font-weight: 600;
  margin-bottom: .6rem;
}

/* Termine als Kalenderblätter nebeneinander */
.webinar--kompakt .webinar__termine {
  grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr));
  gap: .5rem;
  max-height: none;
  overflow: visible;
}
.webinar--kompakt .wahl {
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .7rem .4rem .65rem;
  text-align: center;
  background: var(--papier);
  border: 1.5px solid var(--linie);
}
/* Das Auswahlfeld bleibt für Tastatur und Bildschirmleser erhalten, nur
   unsichtbar — die ganze Kachel ist die Fläche zum Klicken. */
.webinar--kompakt .wahl:has(input:focus-visible) { outline: 3px solid var(--tinte); outline-offset: 2px; }
.webinar--kompakt .wahl input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
/* Markierung nur über die Klasse (setzt das Skript). Die Regel mit :has()
   aus stil.css wird hier neutralisiert — sie blieb in manchen Browsern auf
   der zuerst gewählten Kachel stehen. */
.webinar--kompakt .wahl:has(input:checked) { border-color: var(--linie); background: var(--papier); }
.webinar--kompakt .webinar__termine .wahl.wahl--aktiv {
  border-color: var(--blau-flaeche);
  background: var(--blau-flaeche);
  color: #fff;
}
.wahl__tag {
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
}
.webinar--kompakt .wahl strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.05;
}
.wahl__zeit { font-size: var(--gr-winzig); }

.webinar--kompakt .feldgruppe--2 { margin-top: 1rem !important; }
.webinar--kompakt .feld[style] { margin-top: .9rem !important; }
.webinar--kompakt .feld__hinweis { display: none; }

/* Datenschutzhinweis: Kernaussage sichtbar, Einzelheiten aufklappbar */
details.datenhinweis summary {
  cursor: pointer;
  list-style: none;
}
details.datenhinweis summary::-webkit-details-marker { display: none; }
details.datenhinweis summary span { color: var(--blau-text); text-decoration: underline; text-underline-offset: .2em; }
details.datenhinweis[open] summary span { display: none; }
details.datenhinweis p { margin-top: .6rem; }

.webinar--kompakt .webinar__fuss { padding: 0 1.4rem 1.4rem; }
.webinar--kompakt .webinar__fuss .knopf { padding-block: 1.05rem; font-size: var(--gr-basis); }

/* Handy: Reihenfolge Überschrift → Text → Anmeldung → Knöpfe, wie auf der
   Hauptseite. Sonst stünde die Anmeldung erst nach den Knöpfen. */
@media (max-width: 61.99rem) {
  .aufmacher--anmeldung .aufmacher__gitter { gap: 1.4rem; }
  .aufmacher--anmeldung .aufmacher__gitter > div { display: contents; }
  .aufmacher--anmeldung .marke { order: 1; }
  .aufmacher--anmeldung h1 { order: 2; margin-bottom: 0; }
  .aufmacher--anmeldung .aufmacher__lead { order: 3; margin-bottom: 0; }
  .aufmacher--anmeldung .anmeldekarte { order: 4; margin: .6rem 8px 0 0; }
  .aufmacher--anmeldung .aufmacher__aktionen { order: 5; margin-bottom: 0; }
  .aufmacher--anmeldung .aufmacher__fussnote { order: 6; }
  .anmeldekarte::before { display: none; }
}
@media (max-width: 61.99rem) {
  .aufmacher--anmeldung { padding-block-start: clamp(1.75rem, 1rem + 3vw, 3rem); }
  .aufmacher--anmeldung h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem); }
  .aufmacher--anmeldung .aufmacher__lead { font-size: var(--gr-gross); }
}
/* Schmale Bildschirme: Der lange Webinartitel in der Karte kostet drei
   Zeilen und schiebt die Terminkacheln aus dem ersten Bildschirm. */
@media (max-width: 36rem) {
  .webinar--kompakt .webinar__kopf p { display: none; }
  .webinar--kompakt .webinar__kopf { padding-bottom: .9rem; }
  .webinar--kompakt .webinar__kopf h2 { margin-bottom: 0; }
}


/* Was im Webinar gezeigt wird — kurze Liste unter der Anmeldekarte.
   Übernommen von der bisherigen bipro-box.de, wo sie neben dem Formular
   steht: Wer sich anmeldet, will vorher wissen, was ihn erwartet. */
.anmeldekarte__inhalt {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  display: grid;
  gap: .45rem;
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
}
.anmeldekarte__inhalt li { position: relative; padding-left: 1.6rem; line-height: 1.45; }
.anmeldekarte__inhalt li::before {
  content: "";
  position: absolute;
  left: 0; top: .2em;
  width: 1em; height: 1em;
  background-color: var(--blau);
  -webkit-mask: var(--haken) center / contain no-repeat;
          mask: var(--haken) center / contain no-repeat;
}

/* =========================================================================
   Kontaktkarten im Seitenkopf der Kontaktseiten
   Zwei Wege nebeneinander statt eines Versprechens im Fließtext: Wer
   anruft, soll vorher sehen, wo er landet.
   ========================================================================= */

.kontaktkarten { display: grid; gap: .75rem; }
.kontaktkarte {
  border: 1.5px solid var(--tinte);
  background: var(--karte);
  padding: 1.3rem 1.4rem;
  display: grid;
  gap: .3rem;
}
.kontaktkarte__rolle {
  font-size: var(--gr-winzig);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}
.kontaktkarte__nummer {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.1;
  color: var(--tinte);
  text-decoration: none;
}
.kontaktkarte__nummer:hover { color: var(--blau-text); }
.kontaktkarte__mail { color: var(--blau-text); font-size: var(--gr-klein); }
.kontaktkarte__text { font-size: var(--gr-klein); color: var(--tinte-leise); margin-top: .2rem; }
.kontaktkarten__zeiten {
  font-size: var(--gr-klein);
  color: var(--tinte-leise);
  padding-left: 1.4rem;
  border-left: 2px solid var(--blau);
}

/* Der Kopf trägt inzwischen sieben Menüpunkte und zwei Knöpfe. Ohne diese
   beiden Regeln brach er auf mittleren Bildschirmen um: „Für wen“ stand
   zweizeilig, der Webinar-Knopf ebenso. Umbrüche sind hier immer ein
   Fehler — lieber der Umschlag ins Menü, den es ohnehin gibt. */
.navi a, .kopf__aktionen .knopf, .kopf__login { white-space: nowrap; }
@media (max-width: 86rem) { .navi { gap: 1.2rem; } }
.kontaktkarte__name { font-weight: 600; }

/* Drei Zielgruppen nebeneinander statt zwei plus eine einsame dritte */
@media (min-width: 62rem) {
  .einstieg--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Angebundene Maklerverwaltungsprogramme — Karten mit Verweis zum Anbieter.
   Lag bis 15.10.2026 in bipro-box/src/assets/css/bipro.css. Seit die PDF///BOX
   dieselbe Darstellung zeigt (statt der Logokacheln), gehört es hierher. */
.mvpliste {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 44rem) { .mvpliste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .mvpliste { grid-template-columns: repeat(3, 1fr); } }

.mvp {
  background: var(--karte);
  border: 1px solid var(--linie);
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.mvp h3 {
  font-family: var(--grotesk);
  font-size: var(--gr-basis);
  font-weight: 700;
  letter-spacing: 0;
}

.mvp h3 small { font-weight: 400; color: var(--tinte-leise); }

.mvp__weg, .mvp__hinweis { font-size: var(--gr-klein); color: var(--tinte-leise); }

.mvp__hinweis { border-left: 2px solid var(--linie); padding-left: .7rem; }

.mvp > a { margin-top: auto; font-size: var(--gr-klein); font-weight: 600; color: var(--blau-text); }