/* Gemeinsame Nutzerführung der öffentlichen Seiten. */
.einstieg-aktionen { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin-top:1.5rem; }
.centered .einstieg-aktionen { justify-content:center; }
.einstieg-hinweis { font-size:.9rem; color:var(--ink-2, #46504a); margin-top:.8rem; }
.ablauf-karten { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
.ablauf-karte { padding:1.4rem; border:1px solid var(--line, #d8d5cc); border-radius:16px; background:var(--surface, #fff); }
.ablauf-karte h3 { font-size:1.15rem; line-height:1.3; margin:0 0 .7rem; }
.ablauf-karte p { margin:0; }
.beispiel-ablauf { padding:1.5rem; border:1px solid var(--line, #d8d5cc); border-radius:16px; background:var(--surface, #fff); margin:1.5rem 0; }
.beispiel-ablauf > p:first-child { margin-top:0; }
.beispiel-marke { font-size:.8rem; font-weight:600; color:var(--green, #2e4f35); }
.anbieter-kurz { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:1rem 0; }
.anbieter-kurz li { border:1px solid var(--line, #d8d5cc); border-radius:8px; padding:.45rem .7rem; }
.katalog-details { border:1px solid var(--line, #d8d5cc); border-radius:12px; padding:1rem; margin:1.5rem 0; }
.katalog-details > summary { cursor:pointer; font-weight:600; min-height:44px; display:list-item; align-content:center; }
.seiten-inhalt { padding:1.1rem 1.4rem; border:1px solid var(--line, #d8d5cc); border-radius:12px; margin:1.5rem 0; }
.seiten-inhalt summary { font-weight:600; cursor:pointer; min-height:44px; align-content:center; }
.seiten-inhalt ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem 1.5rem; padding-left:1.2rem; margin-top:.8rem; }
.seiten-inhalt a { display:inline-block; padding:.25rem 0; }
.seiten-inhalt + h2, .seiten-inhalt + section { scroll-margin-top:7rem; }
html { scroll-padding-top:7rem; }
.tarif-orientierung { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin:1.4rem auto; }
.tarif-orientierung a { padding:1rem; border:1px solid var(--line, #d8d5cc); border-radius:12px; text-decoration:none; color:inherit; }
.tarif-orientierung strong { display:block; color:var(--green, #2e4f35); margin-bottom:.3rem; }
.vorschau-umfang { padding:1rem 1.2rem; border:1px solid var(--line, #d8d5cc); border-radius:12px; background:var(--surface, #fff); }
.vorschau-umfang p { margin:.4rem 0; }
/* Fragen und Antworten (Startseite, Preise). Bis zum 09.10.2026 standen diese Regeln als Abschrift im Kopf von
   preise.html; die Werte sind dieselben. Neu sind nur die zwei letzten: Abstand vor dem Verweis unter einer Antwort,
   und Links in Antworten sind unterstrichen (vorher war „Speicher- und Löschfristen“ nicht als Link zu erkennen).
   Die Antworten selbst schreibt scripts/seo.py aus derselben Liste wie das Schema im Kopf. */
.faq-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
.faq-title { font-size:clamp(2.6rem,6vw,4.4rem); font-weight:800; letter-spacing:-.05em; line-height:.9; }
.faq-list { display:grid; gap:.7rem; }
.faq-item { background:var(--surface); border-radius:var(--r); }
.faq-item summary { list-style:none; cursor:pointer; padding:1.3rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; font-size:clamp(1rem,1.5vw,1.12rem); font-weight:700; letter-spacing:-.022em; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; flex:none; font-size:var(--fs-titel-l); font-weight:400; line-height:1; color:var(--ink-2); transition:transform .45s var(--ease); }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item .faq-body { padding:0 1.5rem 1.4rem; color:var(--ink-2); }
.faq-item .faq-body p { margin:0; max-width:62ch; }
.faq-item .faq-body p + p { margin-top:.7rem; }
.faq-item .faq-body a { color:var(--ink); text-decoration:underline; text-underline-offset:.2em; }
@media(max-width:860px) { .faq-grid { grid-template-columns:1fr; } }
/* Was marketing-vorschau.js ausblendet, bleibt ausgeblendet (09.10.2026). Das Skript setzt `hidden` an den Knöpfen
   einer Prüfzeile, an „Zuordnen/Passt nicht“ und an „Nächsten Fall zeigen“. Die Klassen dieser Elemente setzen aber
   selbst `display` (flex bzw. der Knopf), und eine Klassenregel schlägt das Attribut. Gemessen: „Nächsten Fall zeigen“
   stand schon vor der ersten Entscheidung da, und nach „Bestätigen“ blieben die Knöpfe der Zeile stehen.
   NICHT für die Zeilen der Karten darüber (.usp-row): Die halten ihren Platz unsichtbar frei, damit die Karte beim
   Einlaufen nicht wächst. */
.demo-listen-buttons[hidden], [data-demo-proof] .proof-actions[hidden], .demo-weiter[hidden] { display:none; }
/* „Passt nicht“ stand am Handy auf zwei Zeilen (09.10.2026, gemessen bei 375 px in Chrome und WebKit: beide Knöpfe
   104 px hoch statt 52). Die zwei Knöpfe teilen sich die Karte, und mit dem Polster eines gewöhnlichen Knopfes (2rem
   je Seite) blieben dem Text 77 px. Jetzt das schmalere Polster und kein Umbruch im Knopf; reicht die Breite für
   beide nicht (unter etwa 340 px), stehen sie untereinander statt gequetscht. Gilt für die Startseite und /funktionen:
   Beide zeigen dieselbe Karte. */
[data-demo-proof] .proof-actions { flex-wrap:wrap; }
[data-demo-proof] .proof-actions .btn { padding-inline:1rem; white-space:nowrap; }
/* Die Vergleichstabelle derselben Karte braucht 294 px (drei Spalten, das Datum bricht nicht um), die Karte hat bei
   360 px Fensterbreite innen aber nur 284 und bei 320 px 246. Auf der Startseite schob die Tabelle deshalb beide
   Vorschauen über den rechten Seitenrand (gemessen: 10 px bei 360, 50 px bei 320), auf /funktionen ragte sie bei 320 px
   aus der Karte. Am Handy engere Zellen und die Schrift des Fließtexts; auf sehr schmalen Geräten noch eine Stufe.
   `table.` und `div` in der Auswahl, weil marketing-vorschau.js auf /funktionen eigene Regeln gleicher Stärke später
   einsetzt. */
@media(max-width:30rem) {
  [data-demo-proof] table.proof-table { font-size:1rem; }
  [data-demo-proof] table.proof-table th, [data-demo-proof] table.proof-table td { padding-inline:.3rem; }
}
@media(max-width:22.4rem) {
  div[data-demo-proof] { padding:1rem; }
  [data-demo-proof] table.proof-table { font-size:.9rem; }
}
.marketing-tabelle { width:100%; border-collapse:collapse; margin:1.5rem 0; }
.marketing-tabelle th, .marketing-tabelle td { text-align:left; vertical-align:top; padding:.9rem; border-bottom:1px solid var(--line, #d8d5cc); overflow-wrap:anywhere; }
.marketing-tabelle th { font-weight:600; }
.recht .seiten-inhalt { max-width:none; }
.pv-gruppe { border:1px solid var(--line, #d8d5cc); border-radius:12px; padding:1rem 1.2rem; margin-top:1rem !important; }
.pv-gruppe > summary { cursor:pointer; font-weight:600; font-size:1.1rem; min-height:44px; align-content:center; }
.pv-gruppe[open] > summary { margin-bottom:1rem; }
.pv-suche label { display:block; font-weight:600; margin-bottom:.5rem; }
.tab { table-layout:fixed; overflow-wrap:anywhere; }
.wissen .tab th, .wissen .tab td { overflow-wrap:anywhere; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid var(--green, #2e4f35); outline-offset:4px; }

details.seiten-inhalt > summary:hover,
details.seiten-inhalt > summary:focus-visible,
details.katalog-details > summary:hover,
details.katalog-details > summary:focus-visible,
details.pv-gruppe > summary:hover,
details.pv-gruppe > summary:focus-visible {
  color: var(--hover-akzent, var(--green));
}

/* Ein Inline-Verweis, der über zwei Zeilen läuft, bildet sonst ein einziges
   großes Trefferrechteck. Ohne senkrechtes Polster bleiben benachbarte
   Quellen getrennt; der größere Zeilenabstand hält sie am Telefon gut
   erreichbar. */
.wissen .quelle > a {
  display: inline-block;
  padding-block: 0;
  line-height: 1.75;
}

/* Der nicht gewählte Zeitraum braucht dieselbe ruhige Antwort wie andere
   zurückhaltende Knöpfe; der gewählte bleibt durch seine eigene Fläche klar. */
.toggle button[aria-pressed="false"]:hover,
.toggle button[aria-pressed="false"]:focus-visible {
  background-color: var(--hover-flaeche, var(--surface-2));
  color: var(--ink);
}

p > a:not([class]):hover,
p > a:not([class]):focus-visible,
p.quelle > a:hover,
p.quelle > a:focus-visible,
p.st-hilfe > a:hover,
p.st-hilfe > a:focus-visible {
  color: var(--hover-akzent, var(--green));
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}
/* Der zweite Verweis neben dem Hauptknopf („Umfang der kostenlosen Vorschau“) und die drei Karten „Tarif nach
   Bedarf“ antworteten nicht. Der Lauf sah sie erst am 12.10.2026: bis dahin verschwanden sie hinter gleich
   aussehenden Verweisen, die antworten (scripts/ui_v2_aufnahme.py, `einmal`). */
.einstieg-aktionen > a:not(.btn):hover,
.einstieg-aktionen > a:not(.btn):focus-visible {
  color: var(--hover-akzent, var(--green));
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}
details.faq-item > summary:hover,
details.faq-item > summary:focus-visible,
.seiten-inhalt ol a:hover,
.seiten-inhalt ol a:focus-visible,
.branchen-portale a:hover,
.branchen-portale a:focus-visible,
.beispiel-ablauf > a:not(.btn):hover,
.beispiel-ablauf > a:not(.btn):focus-visible {
  color: var(--hover-akzent, var(--green));
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}
.tarif-orientierung a:hover,
.tarif-orientierung a:focus-visible {
  border-color: var(--hover-akzent, var(--green));
  background-color: var(--hover-flaeche, var(--surface));
}
/* Die Preisseite lädt dieses Blatt nach ihrem eigenen Stilblock. Dadurch
   lesen Tarifwahl, Zeitumschalter und Vergleichsschalter dieselbe
   Normalstufe wie die allgemeinen `.btn`, statt je eine feste Höhe zu
   erben. */
.choose { min-height:var(--knopf-normal); }
.toggle button { min-height:var(--knopf-normal); }
#alle-leistungen { min-height:var(--knopf-normal); }
@media(max-width:47.9rem) {
  .nav-act > a.btn-primary { display:inline-flex; min-height:44px; padding:.5rem .65rem; font-size:.8rem; white-space:nowrap; }
  .nav-act { gap:.45rem; }
  .nav-burger { min-width:44px; min-height:44px; }
  .head { padding-top:2rem; padding-bottom:1.5rem; }
  .head h1, .head .display { font-size:clamp(1.8rem,7vw,2.5rem); line-height:1.12; }
  .head .lead { font-size:1rem; line-height:1.55; }
  .ablauf-karten, .tarif-orientierung, .seiten-inhalt ol { grid-template-columns:1fr; }
  .ablauf-karte, .beispiel-ablauf { padding:1.1rem; }
  .wissen > .h2 { margin-top:2rem; }
  .branchen-portale { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .marketing-tabelle th, .marketing-tabelle td { padding:.65rem .4rem; font-size:.9rem; }
  .einstieg-aktionen > .btn { min-height:var(--knopf-normal); }
}
/* DER MENÜKNOPF RAGTE AM HANDY AUS DER KOPFLEISTE (gemessen am 09.10.2026 bei 375 px, Chrome und WebKit: Leiste bis
   356,6 px, Knopf bis 376 px, also 19 px über die Pille und 1 px über das Fenster). Seit dem 07.10.2026 steht
   „Kostenlos starten“ auch am Handy in der Leiste (Regel oben); Logo, Knopf und Menüknopf brauchen zusammen 367 px,
   die Leiste hat bei 375 px aber nur 338. Erst ab rund 404 px Fensterbreite passte es. Die Seite rollte deshalb nicht
   seitwärts (overflow-x: clip), man sah es nur.

   Bis 26rem (416 px) rückt alles zusammen: kleineres Zeichen, kleinere Wortmarke, schmalere Polster. Der Knopf zum
   Antippen bleibt 44 px hoch, der Menüknopf 44 x 44. Unter 22.4rem (358 px) reicht auch das nicht mehr; dort steht
   wie vor dem 07.10. nur das Logo neben dem Menüknopf, und „Kostenlos starten“ steht im Menü.

   AM ENGSTEN IST ES BEI 361 PX, nicht bei 359: Bis 360 px ist der Seitenrand 0.9rem, darüber 1.15rem, die Leiste
   wird beim Schritt von 360 auf 361 also 7 px schmaler. Die Werte unten lassen dort 8 px Luft zwischen Logo und
   Knopf; tests/test_startseite_knoepfe_und_handy.py rechnet es für jede Breite nach. */
@media(max-width:26rem) {
  .nav-bar { padding-left:.7rem; padding-right:.5rem; gap:.4rem; }
  .nav-logo { gap:.4rem; padding-right:0; font-size:1.06rem; }
  .nav-logo svg { width:28px; height:28px; }
  .nav-act { gap:.35rem; }
  .nav-act > a.btn-primary { padding-inline:.6rem; font-size:.78rem; }
}
@media(max-width:22.4rem) {
  .nav-act > a.btn-primary { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto !important; }
  .rise { transform:none !important; opacity:1 !important; transition:none !important; }
}