/* P2 – gemeinsame Struktur der neuen Seitentypen (Fachseite, Übersicht, Text-, Kontakt-, Danke- und Fehlerseiten).
   Farben, Schriften und Radien kommen aus den --s-* Variablen der jeweiligen Site (site/<site>/style.css, Abschnitt „P2“). */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Brotkrumen */
.brotkrumen ol { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0 .5rem; font-size: .875rem; color: var(--s-kopf-text-2); }
.brotkrumen li { display: inline-flex; align-items: center; }
.brotkrumen li + li::before { content: "›"; margin-right: .5rem; opacity: .7; }
.brotkrumen a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
.brotkrumen [aria-current] { color: var(--s-kopf-titel); }

/* Seitenkopf der Unterseiten */
.seitenkopf { background: var(--s-kopf-bg); color: var(--s-kopf-text); }
.seitenkopf-in { max-width: var(--breite); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) var(--rand) clamp(2.5rem, 5vw, 4.25rem); }
.seitenkopf h1 { font-size: clamp(2.05rem, 4.1vw, 3.6rem); max-width: 22ch; margin: .25rem 0 1rem; color: var(--s-kopf-titel); }
.sk-vorzeile { margin: .5rem 0 .75rem; font: 600 .78rem/1.3 var(--s-display); letter-spacing: .14em; text-transform: uppercase; color: var(--s-kopf-akzent); }
.sk-lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; max-width: 42em; color: var(--s-kopf-text-2); margin: 0 0 1.75rem; }
.seitenkopf .cta-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: 0; }
.seitenkopf-schmal .seitenkopf-in { padding-bottom: .5rem; }
.text-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--s-kopf-titel); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--s-akzent); }
.text-link .ico { width: 18px; height: 18px; }
@media (max-width: 560px) { .seitenkopf .cta-reihe .btn { width: 100%; } }

/* Inhaltsblöcke */
.block { padding: clamp(3rem, 6vw, 5rem) 0 0; }
.block-in { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.block h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); margin: 0 0 1.25rem; color: var(--s-text); }
.block-intro { color: var(--s-text-2); max-width: 44em; margin: 0 0 1.25rem; }
.block-unter { margin-top: 2.5rem !important; }
.punkte { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.punkte > div { background: var(--s-flaeche); border: 1px solid var(--s-linie); border-radius: var(--s-radius); padding: 1.25rem 1.4rem; }
.punkte dt { font-family: var(--s-display); font-weight: var(--s-display-gewicht, 600); font-size: 1.15rem; line-height: 1.25; margin-bottom: .4rem; color: var(--s-text); }
.punkte dd { margin: 0; color: var(--s-text-2); }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
.fragen { counter-reset: q; list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.fragen li { counter-increment: q; position: relative; padding: .85rem 1rem .85rem 3.2rem; background: var(--s-flaeche); border: 1px solid var(--s-linie); border-radius: var(--s-radius); color: var(--s-text); }
.fragen li::before { content: counter(q); position: absolute; left: .9rem; top: .85rem; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--s-akzent); color: var(--s-auf-akzent); display: grid; place-items: center; font-weight: 700; font-size: .85rem; line-height: 1; }
.angaben-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.angaben-liste li { display: flex; gap: .65rem; align-items: flex-start; color: var(--s-text); }
.angaben-liste .ico { color: var(--s-akzent-text); margin-top: .15rem; }
.umfang-boxen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.umfang-boxen > div { border-radius: var(--s-radius); padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.umfang-boxen h3 { font-size: 1.2rem; margin: 0 0 .9rem; }
.umfang-boxen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.umfang-boxen li { display: flex; gap: .6rem; align-items: flex-start; }
.umfang-boxen p { margin: 0; }
.ub-ja { background: var(--s-flaeche); border: 1px solid var(--s-linie); color: var(--s-text); }
.ub-ja .ico { color: var(--s-ok); }
.ub-nein { background: var(--s-dunkel); color: var(--s-dunkel-text); }
.ub-nein h3 { color: var(--s-dunkel-titel); }
.ub-nein .ico { color: var(--s-nein); }
.ub-hinweis { border: 1px dashed var(--s-text-2); color: var(--s-text); }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.schritte li { border-top: 2px solid var(--s-text); padding: 1.1rem 1rem 0 0; }
.s-nr { display: block; font: var(--s-display-gewicht, 600) 2rem/1 var(--s-display); color: var(--s-akzent-text); margin-bottom: .6rem; }
.schritte h3, .schritte h2 { font-size: 1.15rem !important; margin: 0 0 .35rem !important; color: var(--s-text); }
.schritte p { margin: 0; color: var(--s-text-2); font-size: .97rem; }
.schritte-lang { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 2rem; }
.karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .75rem; }
.karten a { display: flex; flex-direction: column; gap: .3rem; height: 100%; min-height: 44px; padding: 1rem 1.15rem; border: 1px solid var(--s-linie); border-radius: var(--s-radius); background: var(--s-flaeche); color: var(--s-text); text-decoration: none; }
.karten a:hover { border-color: var(--s-akzent-text); }
.karten a:focus-visible { outline-offset: 2px; }
.k-kat { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--s-akzent-text); font-weight: 600; }
.k-titel { font: var(--s-display-gewicht, 600) 1.08rem/1.3 var(--s-display); }
.k-text { color: var(--s-text-2); font-size: .92rem; }
.karten-gross { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.hub-weiter { padding-bottom: clamp(3rem, 6vw, 5rem); }
.hub-weiter p { color: var(--s-text-2); max-width: 44em; }
.seite-hub main > .block:last-child, .seite-text main > .block:last-child { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* Textseiten */
.textinhalt { max-width: calc(48rem + 2 * var(--rand)); margin-left: 0; }
.textinhalt h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 2.25rem 0 .75rem; }
.textinhalt h2:first-child { margin-top: 0; }
.textinhalt p, .textinhalt li { color: var(--s-text-2); }
.textinhalt .liste { padding-left: 1.2rem; display: grid; gap: .4rem; }
.textinhalt .liste a { display: inline-block; min-height: 44px; padding: .55rem 0; }
.textinhalt .bildnachweise a { display: inline-block; min-height: 44px; padding: .55rem 0; }
.kontakt-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; margin-bottom: 1.5rem; }
.kontakt-raster .gross a { display: inline-flex; gap: .6rem; align-items: center; font-size: 1.2rem; min-height: 44px; color: var(--s-text); }
.kontakt-raster .ico { color: var(--s-akzent-text); vertical-align: middle; }
.beispiel-box { margin: 2rem 0; padding: 1.5rem; border: 1px dashed var(--s-text-2); border-radius: var(--s-radius); }
.beispiel-box .etikett { display: inline-block; margin: 0 0 .75rem; padding: .25rem .65rem; background: var(--s-dunkel); color: var(--s-dunkel-titel); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; }
.hinweis-box { background: #FFF3C4; color: #3D3300 !important; padding: .75rem 1rem; }
.danke-ref { font-size: 1.15rem; }

/* Sprachwahl (High Value hat eigene Gestaltung in seiner style.css) */
.sprachwahl { list-style: none; display: flex; margin: 0 0 0 .4rem; padding: 0; }
.sprachwahl a { min-width: 44px; justify-content: center; font-size: .8125rem !important; letter-spacing: .1em; }
.sprachwahl a[aria-current] { font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* Fuß: Navigation in Spalten */
.fuss-kopf p { margin: 0; }
.fuss-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 2rem; margin: 1rem 0 .75rem; }
.fuss-nav ul { list-style: none; margin: 0; padding: 0; }
.fuss-titel { font-weight: 700; margin: 0 0 .1rem !important; }
.fuss-nav a { padding: .6rem 0; }

/* Sprachauswahl auf der Wurzel „/“ */
.wurzel { min-height: 100vh; display: grid; place-items: center; padding: 2rem var(--rand); background: var(--s-kopf-bg); color: var(--s-kopf-text); }
.wurzel-in { max-width: 40rem; }
.wurzel h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--s-kopf-titel); margin: 0 0 .5rem; }
.wurzel-wahl { list-style: none; padding: 0; margin: 1.5rem 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.wurzel-wahl a { display: inline-flex; align-items: center; min-height: 52px; padding: .75rem 1.5rem; border: 2px solid currentColor; border-radius: var(--s-radius); color: var(--s-kopf-titel); font-weight: 600; text-decoration: none; }
.wurzel a { color: inherit; }

/* Formular-Ergänzungen P2 */
.af-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.af-zaehler { margin: .25rem 0 0; font-size: .8125rem; color: var(--af-text-2); min-height: 0; }
.af-zaehler:empty { display: none; }
.af-zaehler.ueber { color: var(--af-fehler); font-weight: 600; }
.af-hilfe-voll { width: 100%; }
.af-frei { margin-top: .5rem; }
.anfrage-info .hinweis { margin-top: 1rem; }

@media (max-width: 900px) {
  .punkte, .zwei-spalten, .umfang-boxen, .kontakt-raster, .schritte-lang { grid-template-columns: minmax(0, 1fr); }
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 520px) { .schritte, .fuss-nav { grid-template-columns: minmax(0, 1fr); } }

/* Sichtbare FAQ (Fach-, Übersichts- und Startseiten) */
.faq { display: grid; gap: 0; border-top: 1px solid var(--s-linie); max-width: 56rem; }
.faq-eintrag { padding: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--s-linie); }
.faq-eintrag h3 { font-size: 1.12rem; line-height: 1.35; margin: 0 0 .45rem; color: var(--s-text); }
.faq-eintrag p { margin: 0; color: var(--s-text-2); max-width: 48em; }

/* Icons in Fachseiten und Startseiten (lokale SVG aus tools/icons.mjs, aria-hidden) */
.punkte dt { display: flex; align-items: center; gap: .6rem; }
.punkte dt .ico { width: 26px; height: 26px; color: var(--s-akzent-text); }
.s-nr { display: flex; align-items: center; gap: .55rem; }
.s-nr .ico { width: 26px; height: 26px; }
.ub-ja li, .ub-ja ul { list-style: none; }
.ub-hinweis h3, .umfang-block h3, .karte-hell h3, .karte-linie h3, .g h3 { display: flex; align-items: center; gap: .55rem; }
.ub-hinweis h3 .ico { color: var(--s-akzent-text); }
.vorbereitung { display: flex; gap: .6rem; align-items: flex-start; margin: 1.25rem 0 0; padding: .9rem 1rem; border-left: 3px solid var(--s-akzent-text); background: var(--s-flaeche); color: var(--s-text-2); font-size: .97rem; }
.vorbereitung .ico { color: var(--s-akzent-text); margin-top: .1rem; }
.vorbereitung strong { color: var(--s-text); }
.karte-ico { display: inline-flex; margin-bottom: 1rem; }
.karte-ico .ico { width: 40px; height: 40px; }

/* Bewegung (Nutzerkorrektur 06.10.2026): dezent, nur transform/opacity (kein Layoutsprung), Inhalte ohne JS sofort sichtbar.
   Hero: gestaffelter Einstieg nur für Vorzeile, Titel und Lead; CTA-Reihe bleibt von Anfang an voll sichtbar (nur leichter Versatz).
   Scroll-Reveal: .reveal-warten setzt leiste.js NUR auf Elemente unterhalb des Sichtbereichs, wenn JS aktiv ist und keine
   reduzierte Bewegung gewünscht wird; Fokus oder Druck heben es sofort auf. Formulare und CTAs werden nie verborgen. */
@keyframes s-auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes s-schub { from { transform: translateY(10px); } to { transform: none; } }
@keyframes s-bild { from { transform: scale(1.045); } to { transform: none; } }
.hero .vorzeile, .hero h1, .hero .lead, .seitenkopf-in > .sk-vorzeile, .seitenkopf-in > h1, .seitenkopf-in > .sk-lead { animation: s-auf .5s cubic-bezier(.2, .7, .2, 1) both; }
.hero h1, .seitenkopf-in > h1 { animation-delay: .06s; }
.hero .lead, .seitenkopf-in > .sk-lead { animation-delay: .12s; }
.hero .cta-reihe, .seitenkopf-in > .cta-reihe { animation: s-schub .5s .16s cubic-bezier(.2, .7, .2, 1) both; }
.reveal { transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1); }
.reveal.reveal-warten { opacity: 0; transform: translateY(18px); }
html .btn { transition: background-color .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s; }
html .btn:active { transform: translateY(1px) scale(.985); }
.btn .ico:last-child { transition: transform .18s; }
.bild { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  html .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35); }
  .btn:hover .ico:last-child, .text-link:hover .ico:last-child { transform: translateX(3px); }
  .text-link .ico:last-child { transition: transform .18s; }
  .bild img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
  .bild:hover img { transform: scale(1.03); }
  .punkte > div, .anlaesse article { transition: transform .25s, box-shadow .25s, border-color .25s; }
  .punkte > div:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .45); }
}
@media (min-width: 900px) { .hero .hero-bild img, .hero-visual .bild img, .hero-buehne .bild img, .hero-in .k-gross img { animation: s-bild 1.4s cubic-bezier(.2, .7, .2, 1) both; } }
@media (max-width: 700px) {
  .reveal.reveal-warten { transform: translateY(8px); }
  .hero .vorzeile, .hero h1, .hero .lead, .seitenkopf-in > .sk-vorzeile, .seitenkopf-in > h1, .seitenkopf-in > .sk-lead { animation-duration: .35s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal.reveal-warten { opacity: 1; transform: none; }
  html .btn:hover, html .btn:active, .bild:hover img, .punkte > div:hover { transform: none; }
}
@media print { .reveal.reveal-warten { opacity: 1; transform: none; } }

/* Vertrauensleiste (ISO 9001:2015 + Google-Bewertung der Logisticoo GmbH) – übernimmt Textfarbe des Umfelds (hell/dunkel),
   feste Bildmaße (kein Layoutsprung), keine Überlagerung von Fotos, ohne JS vollständig sichtbar */
.vertrauen { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 1.5rem 0 0; padding: 1rem 0 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); font-size: .93rem; line-height: 1.45; }
.vt-eintrag { display: flex; align-items: center; gap: .6rem; margin: 0; min-width: 0; }
.vt-eintrag > span { min-width: 0; overflow-wrap: anywhere; }
.vt-iso { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff; }
.vt-sterne { display: inline-flex; flex: none; gap: 1px; color: #E8A317; }
.vertrauen a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.vertrauen a:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.vertrauen-details { margin-top: 2.5rem; }
.vertrauen-details .vertrauen { margin-top: .5rem; }
.rechtstext-einleitung { padding: .9rem 1rem; border-left: 3px solid var(--s-akzent-text); background: var(--s-flaeche); }
.rechtstext-quelle h2 { margin-top: 2rem; }
.rechtstext-quelle ul { padding-left: 1.2rem; }