/*
 * academy.css - gemeinsame Gestaltungsgrundlage für Seminarseiten auf audatis.de und die
 * Buchungsstrecke auf booking.audatis.de. Reines CSS ohne Bau (kein Grunt, kein Sass),
 * damit die Datei ohne Werkzeugkette ausgeliefert und vom Booking 1:1 übernommen wird.
 *
 * Regeln: Jede Klasse beginnt mit .ac-, jede Variable mit --ac-. So kollidiert nichts mit
 * main.min.css des Themes. Formsprache des Themes: eckig, Versalien in Knöpfen und Vorzeilen.
 * Spec: project/booking/docs/superpowers/specs/2026-10-13-seminarseite-buchungsintegration-design.md, T1.
 */
:root {
  --ac-blau: #007abb;
  --ac-blau-tief: #00527d;
  --ac-anthrazit: #485155;
  --ac-anthrazit-tief: #2f3639;
  --ac-text: #2d3d41;
  --ac-text-leise: #5b676c;
  --ac-grund: #f8f9fa;
  --ac-hellgrau: #ecedee;
  --ac-linie: #dfe4e6;
  --ac-weiss: #ffffff;
  --ac-gruen: #597e20;
  --ac-gruen-hell: #eef4e0;
  --ac-gruen-text: #4a6a17;
  --ac-blau-hell: #9fd6f5;
  --ac-rot: #bc0e20;
  --ac-rot-hell: #fbe9eb;
  --ac-schrift: "Myriad Pro", "MyriadPro", "Segoe UI", system-ui, sans-serif;
  --ac-abstand: 16px;
  /* Höhe des festen Seitenkopfs der Website (header, position: fixed, z-index 5). Alles, was auf der
     Seminarseite klebt, sitzt darunter und nicht darüber. Gemessen 14.10.2026: 130 px, bis 575 px 100 px. */
  --ac-kopf: 130px;
  --ac-fakten-grund: #b4c7d0;
  --ac-fakten-linie: #94adb9;
}

/* Eigene Rahmenberechnung: keine Abhängigkeit von einer globalen Regel der einbettenden Seite. */
.ac-knopf, .ac-knopf *, .ac-box, .ac-box *, .ac-kopfband, .ac-kopfband *, .ac-fakten, .ac-fakten *, .ac-sprungnavi, .ac-sprungnavi *, .ac-wahl, .ac-wahl *, .ac-anzahl, .ac-anzahl *, .ac-summe, .ac-summe *, .ac-tabelle, .ac-tabelle *, .ac-mobilleiste, .ac-mobilleiste *, .ac-kacheln, .ac-kacheln *, .ac-akkordeon, .ac-akkordeon * { box-sizing: border-box; }

.ac-vorzeile { font-family: var(--ac-schrift); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ac-blau-tief); }

.ac-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 28px; border: 0; border-radius: 0; background: var(--ac-blau); color: var(--ac-weiss); font-family: var(--ac-schrift); font-weight: 700; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .15s; }
.ac-knopf:hover { background: var(--ac-blau-tief); color: var(--ac-weiss); text-decoration: none; }
.ac-knopf:focus-visible, .ac-wahl label:focus-within, .ac-anzahl button:focus-visible, .ac-sprungnavi a:focus-visible, .ac-akkordeon summary:focus-visible { outline: 3px solid var(--ac-blau); outline-offset: 2px; }
.ac-knopf:focus { outline: 3px solid var(--ac-blau); outline-offset: 2px; }
.ac-knopf--hell { background: var(--ac-weiss); color: var(--ac-anthrazit-tief); }
.ac-knopf--hell:hover { background: var(--ac-hellgrau); color: var(--ac-anthrazit-tief); }
.ac-knopf--rahmen { background: transparent; color: var(--ac-blau-tief); box-shadow: inset 0 0 0 2px var(--ac-blau); }
.ac-knopf--rahmen:hover { background: var(--ac-blau); color: var(--ac-weiss); }
.ac-knopf--klein { min-height: 44px; padding: 8px 16px; font-size: .85rem; }

.ac-kopfband { background: linear-gradient(115deg, var(--ac-blau-tief) 0%, var(--ac-blau) 60%); background-color: var(--ac-blau-tief); color: var(--ac-weiss); padding: 28px var(--ac-abstand) 40px; }
.ac-kopfband :focus-visible, .ac-kopfband :focus { outline-color: var(--ac-weiss); }
.ac-kopfband .ac-vorzeile { color: var(--ac-weiss); }
.ac-kopfband h1 { color: var(--ac-weiss); font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); line-height: 1.15; margin: 10px 0 0; max-width: 22ch; text-wrap: balance; }
.ac-kopfband p { color: var(--ac-weiss); font-size: 1.15rem; max-width: 60ch; margin: 14px 0 0; }

.ac-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 30px 0 0; padding: 0; background: var(--ac-fakten-linie); border: 1px solid var(--ac-fakten-linie); max-width: 780px; }
/* Kästen hell (#b4c7d0) auf dem blauen Kopfband, Schrift dunkel. Kontrast gemessen: dt #2f3639 7,0:1, dd #2d3d41 6,5:1. */
.ac-fakten > div { min-width: 0; background: var(--ac-fakten-grund); padding: 12px 16px; }
.ac-fakten dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-anthrazit-tief); font-weight: 700; }
.ac-fakten dd { margin: 2px 0 0; font-weight: 600; color: var(--ac-text); overflow-wrap: anywhere; hyphens: auto; }

.ac-raster { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 40px; align-items: start; }
@media (max-width: 575px) { :root { --ac-kopf: 100px; } }
/* Ab 1024 px zeigt die Website rechts das feste Kontaktschild (.on-sticky-contact, im Kopf, also über
   allem unterhalb des Kopfs). Die klebende Buchungsbox endet links davon: Abstand zum Schild gemessen am
   14.10.2026, mindestens 12 px Luft, unter 1216 px fest 147 px, darüber schrumpfend, ab 1514 px keiner. */
@media (min-width: 1024px) { .ac-seite .ac-raster { padding-right: clamp(0px, calc(757px - 50vw), 147px); } }
@media (max-width: 980px) { .ac-raster { grid-template-columns: minmax(0, 1fr); } }

.ac-sprungnavi { position: sticky; top: var(--ac-kopf); z-index: 4; display: flex; gap: 4px; overflow-x: auto; background: var(--ac-grund); border-bottom: 1px solid var(--ac-linie); }
.ac-sprungnavi a { flex: none; padding: 14px 12px; min-height: 44px; font-family: var(--ac-schrift); font-weight: 700; font-size: .9rem; color: var(--ac-text-leise); text-decoration: none; border-bottom: 3px solid transparent; }
.ac-sprungnavi a:hover { color: var(--ac-blau-tief); border-color: var(--ac-blau); }

.ac-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ac-kacheln li { list-style: none; background: var(--ac-weiss); border-left: 4px solid var(--ac-blau); padding: 14px 16px; color: var(--ac-text); }
.ac-kacheln strong { display: block; font-family: var(--ac-schrift); }

.ac-haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ac-haken li { list-style: none; position: relative; padding-left: 28px; color: var(--ac-text); }
.ac-haken li::before { content: ""; position: absolute; left: 4px; top: .45em; width: 12px; height: 7px; border-left: 3px solid var(--ac-gruen); border-bottom: 3px solid var(--ac-gruen); transform: rotate(-45deg); }

.ac-box { background: var(--ac-weiss); border: 1px solid var(--ac-linie); box-shadow: 0 18px 40px -20px rgba(20,30,35,.45); color: var(--ac-text); }
.ac-box__kopf { padding: 18px 20px 14px; border-top: 5px solid var(--ac-blau); }
.ac-box__fuss { padding: 12px 20px 18px; font-size: .85rem; color: var(--ac-text-leise); }
.ac-box fieldset { border: 0; margin: 0; padding: 0 20px 14px; }
.ac-box legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-text-leise); }
.ac-box .ac-knopf { width: calc(100% - 40px); margin: 4px 20px 0; }

.ac-wahl { display: grid; gap: 6px; }
.ac-wahl label { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ac-linie); cursor: pointer; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ac-wahl label:has(input:checked) { border-color: var(--ac-blau); box-shadow: inset 0 0 0 1px var(--ac-blau); background: #f0f7fb; }
.ac-wahl input { width: 18px; height: 18px; margin: 0; accent-color: var(--ac-blau); }
.ac-wahl small { display: block; font-size: .85rem; color: var(--ac-text-leise); }

.ac-marke { display: inline-block; padding: 2px 7px; font-size: .75rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.ac-marke--knapp { background: var(--ac-rot-hell); color: var(--ac-rot); }
.ac-marke--frueh { background: var(--ac-gruen-hell); color: var(--ac-gruen-text); }
.ac-marke--frei { color: var(--ac-gruen-text); }
.ac-marke--neutral { background: var(--ac-hellgrau); color: var(--ac-text-leise); }

.ac-anzahl { display: inline-flex; align-items: center; border: 1px solid var(--ac-linie); }
.ac-anzahl button { width: 48px; height: 48px; border: 0; background: var(--ac-hellgrau); color: var(--ac-text); font-size: 1.3rem; cursor: pointer; }
.ac-anzahl output, .ac-anzahl select { min-width: 52px; height: 48px; text-align: center; font-size: 1.2rem; border: 0; background: var(--ac-weiss); color: var(--ac-text); }

.ac-summe { margin: 0 20px; padding: 14px 0; border-top: 1px solid var(--ac-linie); display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.ac-summe > div { display: flex; justify-content: space-between; gap: 10px; }
.ac-summe .ac-summe__gesamt { font-weight: 700; font-size: 1.1rem; }
.ac-summe .ac-summe__klein { font-size: .85rem; color: var(--ac-text-leise); }

/* Schritte ohne Zahlen: Beschriftung über dem Balken, damit Legenden wie "Termin" darunter nicht doppelt wirken. */
.ac-schritte { display: flex; gap: 6px; margin: 0; padding: 0 20px 14px; list-style: none; font-size: .75rem; color: var(--ac-text-leise); }
.ac-schritte > span, .ac-schritte > li { flex: 1; min-width: 0; margin: 0; border-bottom: 3px solid var(--ac-linie); padding-bottom: 4px; list-style: none; }
.ac-schritte > [aria-current] { border-color: var(--ac-blau); color: var(--ac-text); font-weight: 700; }

.ac-akkordeon details { background: var(--ac-weiss); border: 1px solid var(--ac-linie); margin-bottom: 8px; }
.ac-akkordeon summary { display: flex; justify-content: space-between; gap: 12px; min-height: 48px; align-items: center; padding: 12px 18px; font-family: var(--ac-schrift); font-weight: 700; cursor: pointer; list-style: none; color: var(--ac-text); }
.ac-akkordeon summary::-webkit-details-marker { display: none; }
.ac-akkordeon summary::after { content: "+"; color: var(--ac-blau); font-size: 1.3rem; }
.ac-akkordeon details[open] summary::after { content: "-"; }
.ac-akkordeon details > :not(summary) { padding: 0 18px 16px; margin: 0; }

.ac-tabellenrahmen { position: relative; overflow-x: auto; max-width: 100%; }
.ac-tabelle { width: 100%; border-collapse: collapse; background: var(--ac-weiss); font-variant-numeric: tabular-nums; }
.ac-tabelle th { text-align: left; padding: 10px 14px; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-text-leise); border-bottom: 2px solid var(--ac-blau); }
.ac-tabelle td { padding: 14px; border-bottom: 1px solid var(--ac-linie); vertical-align: middle; color: var(--ac-text); }

/* Fokusziele nicht unter festem Seitenkopf oder fester Leiste unten verstecken: Der Browser hält beim
   Durchtabben diesen Abstand (Befund F-BOOK-0204, WCAG 2.4.11). */
html:has(.ac-seite) { scroll-padding-top: calc(var(--ac-kopf) + 60px); }
@media (max-width: 980px) { html:has(.ac-mobilleiste) { scroll-padding-bottom: 96px; } }

/* Seiten, die .ac-mobilleiste einsetzen, brauchen unten ein Padding in Höhe der Leiste (ca. 72 px),
   sonst verdeckt sie das letzte Inhaltselement. */
.ac-mobilleiste { display: none; }
@media (max-width: 980px) {
  .ac-mobilleiste { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; justify-content: space-between; align-items: center; gap: 12px; padding: 10px var(--ac-abstand) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--ac-weiss); border-top: 1px solid var(--ac-linie); box-shadow: 0 -8px 20px -12px rgba(0,0,0,.35); }
}

/* ------------------------------------------------------------------------------------------
 * Seminarseite (on_audatis_seminare, Vorlage Seminar/ShowNeu): Seitenaufbau nach dem Mockup
 * project/booking/docs/mockups/seminarseite-mockup.html. Kopfband und Box oben bleiben gültig,
 * hier kommen nur die Bausteine dazu, die die Seite zusätzlich braucht.
 * ------------------------------------------------------------------------------------------ */
.ac-seite, .ac-seite * { box-sizing: border-box; }
.ac-seite { position: relative; background: var(--ac-grund); color: var(--ac-text); font-family: var(--ac-schrift); line-height: 1.6; overflow-x: clip; }
.ac-seite [hidden] { display: none !important; }
.ac-huelle { max-width: 1200px; margin: 0 auto; padding-inline: var(--ac-abstand); }
.ac-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ac-kopfband.ac-kopfband--seite, .ac-seite .ac-kopfband { padding-inline: 0; }
.ac-kopfband--bild { position: relative; overflow: hidden; }
.ac-kopfband__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; pointer-events: none; }
.ac-kopfband__inhalt { position: relative; }
/* Brotkrumen im Kopfband der Seminarseite (ACADEMY › Themenbereich › Seminar), gleichlautend mit der BreadcrumbList */
.ac-brotkrumen { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0 0 10px; padding: 0; list-style: none; font-size: .85rem; color: var(--ac-weiss); }
.ac-brotkrumen li { display: inline-flex; align-items: center; min-height: 24px; }
.ac-brotkrumen li + li::before { content: "\203A"; margin-right: 6px; }
/* Weiß wie Vorzeile und Einleitung: #e6ecee hätte auf dem blauen Kopfband nur 3,9:1 (weiß auf #007abb 4,7:1). */
.ac-brotkrumen a { color: var(--ac-weiss); text-decoration: underline; text-underline-offset: 2px; }
.ac-brotkrumen a:hover { text-decoration-thickness: 2px; }
.ac-kopfband .ac-vorzeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ac-plakette { display: inline-block; padding: 3px 9px; border: 1px solid var(--ac-weiss); background: var(--ac-weiss); color: var(--ac-anthrazit-tief); font-size: .7rem; letter-spacing: .1em; }

.ac-raster--seite { padding-bottom: 60px; }
.ac-inhalt { min-width: 0; }
.ac-block { padding-block: 34px; border-bottom: 1px solid var(--ac-linie); scroll-margin-top: calc(var(--ac-kopf) + 60px); }
.ac-block:last-child { border-bottom: 0; }
.ac-block h2 { font-family: var(--ac-schrift); font-size: 1.65rem; line-height: 1.2; margin: 0 0 16px; color: var(--ac-text); }
.ac-block .ac-vorzeile { display: block; margin-bottom: 6px; }
.ac-fliesstext { max-width: 66ch; }
.ac-block a:not(.ac-knopf), .ac-box__fuss a { color: var(--ac-blau-tief); }
.ac-hinweis-leise { font-size: .92rem; color: var(--ac-text-leise); margin-top: 12px; }

.ac-agenda { border: 1px solid var(--ac-linie); background: var(--ac-weiss); margin-bottom: 16px; }
.ac-agenda__kopf { padding: 14px 18px; background: var(--ac-hellgrau); border-bottom: 1px solid var(--ac-linie); font-weight: 700; color: var(--ac-text); }
.ac-agenda ol { margin: 0; padding: 6px 18px 10px; list-style: none; counter-reset: ac-agenda; }
.ac-agenda li { list-style: none; counter-increment: ac-agenda; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--ac-linie); color: var(--ac-text); }
.ac-agenda li:last-child { border-bottom: 0; }
.ac-agenda li::before { content: counter(ac-agenda); font-size: 1.3rem; line-height: 1.2; color: var(--ac-blau-tief); }
.ac-agenda small { display: block; color: var(--ac-text-leise); font-size: .9rem; }

.ac-zweierlei { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.ac-leistungen { margin-top: 24px; }

.ac-referent { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; background: var(--ac-weiss); padding: 20px; border: 1px solid var(--ac-linie); margin-bottom: 12px; }
.ac-referent__bild { width: 96px; height: 96px; object-fit: cover; }
.ac-referent__initialen { display: grid; place-items: center; background: var(--ac-hellgrau); border: 1px solid var(--ac-linie); font-size: 2rem; color: var(--ac-blau-tief); }
.ac-referent h3 { margin: 0; font-size: 1.2rem; color: var(--ac-text); }
.ac-referent__rolle { color: var(--ac-text-leise); font-size: .95rem; margin: 2px 0 8px; }
@media (max-width: 600px) { .ac-referent { grid-template-columns: minmax(0, 1fr); } }

.ac-bewertungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ac-bewertung { margin: 0; background: var(--ac-weiss); border: 1px solid var(--ac-linie); padding: 16px 18px; }
.ac-bewertung blockquote { margin: 6px 0; }
.ac-bewertung__sterne { color: var(--ac-blau-tief); letter-spacing: .1em; }
.ac-bewertung__name { margin: 0; font-size: .9rem; color: var(--ac-text-leise); }

.ac-terminliste small { color: var(--ac-text-leise); }
.ac-terminliste .ac-knopf, .ac-terminliste__preis { white-space: nowrap; }
/* Schmale Ansicht: je Termin eine Karte (Datum, Ort, Status, Preis, Knopf untereinander). Die Tabelle
   bleibt im HTML erhalten; die Beschriftungen kommen aus data-label der Zellen, nichts steht doppelt. */
@media (max-width: 640px) {
  .ac-tabellenrahmen:has(.ac-terminliste) { overflow-x: visible; }
  .ac-terminliste, .ac-terminliste tbody, .ac-terminliste tr, .ac-terminliste td { display: block; width: 100%; }
  .ac-terminliste { background: transparent; }
  .ac-terminliste thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ac-terminliste tr { background: var(--ac-weiss); border: 1px solid var(--ac-linie); border-left: 4px solid var(--ac-blau); margin-bottom: 12px; padding: 6px 16px 14px; }
  .ac-terminliste td { padding: 8px 0; border-bottom: 1px dashed var(--ac-linie); }
  .ac-terminliste td:empty { display: none; }
  .ac-terminliste td:first-child { font-size: 1.05rem; }
  .ac-terminliste td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-text-leise); }
  .ac-terminliste td:last-child { border-bottom: 0; padding: 12px 0 0; }
  .ac-terminliste td:last-child .ac-knopf { display: flex; width: 100%; justify-content: center; }
}

.ac-plusband { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; margin-top: 24px; padding: 26px; background: var(--ac-anthrazit); color: var(--ac-weiss); }
.ac-plusband .ac-vorzeile { color: var(--ac-blau-hell); }
.ac-plusband h3 { margin: 4px 0 0; font-size: 1.35rem; color: var(--ac-weiss); }
.ac-plusband p { margin: 6px 0 0; color: #e6ecee; }
.ac-plusband :focus-visible, .ac-plusband :focus { outline-color: var(--ac-weiss); }

.ac-preis-gross { font-size: 2.2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ac-text); }
.ac-preis-gross small { margin-left: 6px; font-size: .85rem; font-weight: 400; color: var(--ac-text-leise); }
.ac-preis-gross--klein { font-size: 1.4rem; }
.ac-vorzeile--leise { color: var(--ac-text-leise); }

/* Seitenspalte: Bewertungsbox und Buchungsbox kleben gemeinsam, ohne eigene Bildlaufleiste. Ist die Spalte höher als
   der Platz unter dem Seitenkopf, läuft sie mit der Seite mit und bleibt erst mit ihrem unteren Rand stehen;
   buchungsbox.js setzt dafür --ac-spalte-hoehe. Ohne Skript gilt der Ersatzwert 200vh: dann klebt nichts. */
.ac-raster--seite > .ac-inhalt { grid-column: 1; grid-row: 1; }
.ac-raster--seite > .ac-seitenspalte { grid-column: 2; grid-row: 1; }
.ac-seitenspalte { position: sticky; top: min(calc(var(--ac-kopf) + 16px), calc(100vh - var(--ac-spalte-hoehe, 200vh) - 16px)); align-self: start; margin-top: -120px; z-index: 4; display: grid; gap: 16px; }
.ac-box--bewertung { padding: 16px 20px; border-top: 5px solid var(--ac-blau); }
.ac-bewertungsbox__wert { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ac-bewertungsbox__zahl { font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(--ac-text); font-variant-numeric: tabular-nums; }
.ac-bewertungsbox__anzahl { font-size: .85rem; color: var(--ac-text-leise); }
.ac-bewertungsbox__zitat { margin: 10px 0 0; padding: 0; font-size: .95rem; line-height: 1.45; color: var(--ac-text); }
.ac-bewertungsbox__zitat footer { margin-top: 4px; font-size: .85rem; color: var(--ac-text-leise); }
.ac-bewertungsbox__mehr { display: inline-block; margin-top: 8px; font-size: .9rem; color: var(--ac-blau-tief); }
.ac-box__zeile { margin: 0 20px 10px; font-size: .9rem; }
.ac-box__zeile--leise { color: var(--ac-text-leise); }
.ac-box__zustand { padding: 0 20px 6px; }
.ac-box__fuss { display: grid; gap: 4px; }
.ac-box form.ac-termingruppe { margin: 0; padding: 4px 0 0; }
.ac-box form.ac-termingruppe + form.ac-termingruppe { border-top: 1px solid var(--ac-linie); padding-top: 14px; }
.ac-tarife, .ac-tarif { display: grid; gap: 6px; }
.ac-tarif__preis { text-align: right; white-space: nowrap; }
.ac-tarif__nachlass { color: var(--ac-gruen-text) !important; font-weight: 700; }
.ac-tarif__anzahl { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: .85rem; color: var(--ac-text-leise); }
.ac-terminwahl { padding-top: 0; }

.ac-mobilleiste .ac-vorzeile { color: var(--ac-text-leise); }

@media (max-width: 980px) {
  .ac-raster--seite > .ac-inhalt, .ac-raster--seite > .ac-seitenspalte { grid-column: 1; grid-row: auto; }
  .ac-seitenspalte { position: static; margin-top: 24px; }
  .ac-seite { padding-bottom: 84px; }
  .ac-plusband { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) { .ac-knopf { transition: none; } }