/* Vertriebswebseite pldpro.at – eigenes, schlankes Stylesheet auf Basis der
   gemeinsamen Tokens aus shared/pldpro-tokens.css. Kein Framework, kein JS. */

*, *::before, *::after { box-sizing: border-box; }

/* =========================================================================
   Werkstatt-Markenidentitaet (Design-Workshop 27.08.2026, CHANGELOG-DESIGN.md)

   Seit 29.08.2026 (Phase B) traegt shared/pldpro-tokens.css dieselbe
   Werkstatt-Palette und dieselben Schriften fuer BEIDE Projekte - der
   fruehere vollstaendige :root-Override hier ist damit redundant geworden
   und entfaellt. Was bleibt, ist bewusst NUR das, was fuer die Produkt-App
   nicht gilt oder dort etwas anderes bedeuten wuerde:

   - Success/Info/Error: in der Produkt-App echte Statusfarben (Gruen/Blau/
     Rot, CLAUDE.md-Konvention), hier auf der Website nur eine rein
     dekorative Kategorie-Vorschau auf /funktionen ohne Statusbedeutung -
     deshalb weiterhin eigene, vom Produkt abweichende Toene (Ocker/Oliv/
     dunkles Rostrot statt Gruen/Blau/Rot).
   - --wk-ochre/--wk-olive/--wk-ink-border: zusaetzliche, nur hier gebrauchte
     Werkstatt-Farbtoene fuer Signatur-Elemente (Register-Streifen,
     Dokument-Rahmen), die es im Produkt nicht gibt.
   ========================================================================= */
:root {
    --pld-brand-success: #5F6A4E;
    --pld-brand-info: #C98A2E;
    --pld-brand-error: #A6362A;

    /* Kategorie-Vorschau auf /funktionen - rein dekorativ auf der Website,
       anders als im Produkt keine Statusbedeutung zu wahren. */
    --pld-cat-primary: #231F1A;
    --pld-cat-accent: #C98A2E;
    --pld-cat-info: #5F6A4E;
    --pld-cat-success: #8C3F2A;
    --pld-cat-neutral: #6B6350;

    /* Zusaetzliche, nur hier gebrauchte Werkstatt-Farbtoene. */
    --wk-ochre: #C98A2E;
    --wk-olive: #5F6A4E;
    --wk-ink-border: #231F1A;
}

@media (prefers-color-scheme: dark) {
    :root {
        --pld-brand-success: #8A9878;
        --pld-brand-info: #DDA750;
        --pld-brand-error: #D97A6A;

        --pld-cat-primary: #EDE8DF;
        --pld-cat-accent: #DDA750;
        --pld-cat-info: #8A9878;
        --pld-cat-success: #C1745A;
        --pld-cat-neutral: #B7AE9E;

        --wk-ochre: #DDA750;
        --wk-olive: #8A9878;
        --wk-ink-border: #EDE8DF;
    }
}

body {
    background: var(--pld-brand-background);
    color: var(--pld-brand-text-primary);
    font-family: var(--pld-font-body);
    font-size: var(--pld-text-base);
    line-height: 1.6;
    margin: 0;
}

/* Ein langes deutsches Kompositum ("Aufbewahrungspflichten",
   "Auftragsverarbeitungsvertrag") ist in Ueberschriftgroesse breiter als eine
   Spalte auf einem 360px-Bildschirm und schiebt die ganze Seite waagrecht auf.
   Keine Schriftgroesse allein loest das dauerhaft - das naechste laengere Wort
   erzeugt denselben Fall erneut.

   Zwei Eigenschaften, bewusst beide: hyphens:auto trennt sauber an
   Silbengrenzen (braucht <html lang="de"> - steht in _Layout.cshtml - UND
   im Browser hinterlegte Trennmuster fuer Deutsch, die nicht ueberall
   vorhanden sind; wo sie fehlen, passiert schlicht nichts).
   overflow-wrap:break-word ist die Rueckfallebene ohne diese Voraussetzung:
   es bricht haesslicher, aber garantiert - und greift ohnehin nur dann, wenn
   das Wort sonst ueberliefe. Fund 01.09.2026: mit hyphens allein blieb
   /avv bei 435px Breite stehen. */
h1, h2, h3, h4 {
    font-family: var(--pld-font-heading);
    hyphens: auto;
    line-height: 1.25;
    margin: 0 0 .75rem;
    overflow-wrap: break-word;
}

h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -.02em; }

/* Fest 2rem war unterhalb von 800px groesser als das dort auf 1.75rem
   reduzierte .pld-hero h1 (siehe Regel weiter unten) - auf jeder Unterseite
   stand die Hierarchie am Telefon damit auf dem Kopf, und "Aufbewahrungs-
   pflichten" war bei 32px 384px breit in einer 335px-Spalte. clamp() haelt
   den Desktop-Wert exakt bei 2rem und faellt bei 375px auf rund 25px. */
h2 { font-size: clamp(1.5rem, 1.1rem + 2vw, var(--pld-text-2xl)); font-weight: 700; }
h3 { font-size: var(--pld-text-lg); font-weight: 600; }

p { margin: 0 0 1rem; }

a { color: var(--pld-brand-primary); }
a:hover { color: var(--pld-brand-primary-hover); }

code, .pld-mono {
    color: var(--pld-brand-text-secondary);
    font-family: var(--pld-font-mono);
    font-size: var(--pld-text-sm);
}

.pld-container {
    margin: 0 auto;
    max-width: 68rem;
    padding: 0 1.25rem;
}

/* --- Kopf- und Fußzeile ---------------------------------------------------- */

.pld-header {
    background: var(--pld-brand-surface);
    border-bottom: 1px solid var(--pld-brand-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.pld-header-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    padding: .875rem 1.25rem;
    position: relative;
}

.pld-logo {
    align-items: center;
    color: var(--pld-brand-text-primary);
    display: flex;
    font-family: var(--pld-font-heading);
    font-size: var(--pld-text-lg);
    font-weight: 700;
    gap: .5rem;
    text-decoration: none;
}

.pld-logo img { height: 30px; width: 30px; }
.pld-logo .accent { color: var(--pld-brand-accent); }

.pld-nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.pld-nav a {
    color: var(--pld-brand-text-secondary);
    font-size: var(--pld-text-sm);
    font-weight: 500;
    text-decoration: none;
}

.pld-nav a:hover,
.pld-nav a[aria-current="page"] {
    color: var(--pld-brand-primary);
}



/* Checkbox-Umschalter: unsichtbar, aber weiterhin fokussierbar/bedienbar
   (nicht display:none) – derselbe Ansatz wie beim Preise-Akkordeon. */
.pld-nav-toggle {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.pld-nav-toggle-label {
    align-items: center;
    border: 1px solid var(--pld-brand-border);
    border-radius: 8px;
    color: var(--pld-brand-text-primary);
    cursor: pointer;
    display: none;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.pld-nav-toggle-label svg { height: 1.25rem; width: 1.25rem; }

.pld-nav-toggle:focus-visible + .pld-nav-toggle-label {
    outline: 2px solid var(--pld-brand-primary);
    outline-offset: 2px;
}

/* Der CTA sitzt seit 01.09.2026 ausserhalb von <nav> (siehe _Layout.cshtml)
   und bleibt deshalb auch im Klappmenue-Modus sichtbar. Auf dem Desktop
   schiebt ihn die Navigation nach rechts ans Ende der Kopfzeile. */
.pld-header-cta { flex-shrink: 0; }

/* Die Links brachen unterhalb dieser Breite in der klebenden Kopfzeile auf
   mehrere Zeilen um und fraßen den halben Bildschirm (MARKETING-SITE.md,
   Abschnitt 8) – ab hier wird die Navigation zum Klappmenü. Der Wert stammt
   aus der frueheren, laengeren Navigation und bleibt bewusst stehen: mit
   fuenf Links waere ein spaeterer Umbruch moeglich, aber die Kopfzeile
   traegt jetzt zusaetzlich den CTA ausserhalb des Menues. */
@media (max-width: 899px) {
    /* Reihenfolge in der Kopfzeile: Logo, CTA, Menuesymbol. Ohne die
       order-Werte stuende das Menuesymbol vor dem CTA, weil die Checkbox im
       Markup vor der Navigation stehen muss (Nachfolge-Kombinator). */
    .pld-nav-toggle-label { display: flex; order: 3; }

    /* Etwas kompakter als am Desktop, aber ueber der ueblichen
       Mindest-Trefferflaeche. */
    .pld-header-cta {
        font-size: var(--pld-text-sm);
        order: 2;
        padding: .55rem .9rem;
    }

    .pld-nav {
        background: var(--pld-brand-surface);
        border-bottom: 1px solid var(--pld-brand-border);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
        left: 0;
        padding: .75rem 1.25rem 1.25rem;
        position: absolute;
        right: 0;
        top: 100%;
    }

    .pld-nav a { padding: .625rem 0; }

    .pld-nav-toggle:checked ~ .pld-nav { display: flex; }
}

/* --- Abschnitte ------------------------------------------------------------ */

main { padding: 3rem 0; }

/* --- Buttons --------------------------------------------------------------- */

.pld-btn {
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
    font-family: var(--pld-font-heading);
    font-size: var(--pld-text-sm);
    font-weight: 600;
    padding: .7rem 1.15rem;
    text-decoration: none;
}

.pld-btn-primary { background: var(--pld-brand-accent); color: #F3EEE4; }
.pld-btn-primary:hover { background: #A6503A; color: #F3EEE4; }

.pld-btn-secondary {
    background: transparent;
    border-color: var(--pld-brand-border);
    color: var(--pld-brand-text-primary);
}

.pld-btn-secondary:hover { border-color: var(--pld-brand-primary); color: var(--pld-brand-primary); }

/* --- Formular --------------------------------------------------------------- */

.pld-form { max-width: 34rem; }

.pld-field { display: block; margin-bottom: 1.1rem; }

.pld-field > span {
    color: var(--pld-brand-text-secondary);
    display: block;
    font-size: var(--pld-text-sm);
    margin-bottom: .3rem;
}

.pld-field input,
.pld-field textarea {
    background: var(--pld-brand-surface);
    border: 1px solid var(--pld-brand-border);
    border-radius: 6px;
    color: var(--pld-brand-text-primary);
    font: inherit;
    padding: .6rem .7rem;
    width: 100%;
}

.pld-field input:focus,
.pld-field textarea:focus {
    border-color: var(--pld-brand-primary);
    outline: 2px solid rgba(140, 63, 42, .2);
}

.pld-field textarea { min-height: 8rem; resize: vertical; }

/* Honeypot: fuer Menschen unsichtbar, fuer einfache Bots ein Koeder. */
.pld-hp {
    height: 0;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    width: 0;
}

.validation-summary-errors,
.field-validation-error {
    color: var(--pld-brand-error);
    font-size: var(--pld-text-sm);
}

.validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }

.pld-placeholder {
    background: color-mix(in srgb, var(--pld-brand-accent) 10%, transparent);
    border: 1px dashed var(--pld-brand-accent);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.pld-placeholder h3 { color: var(--pld-brand-accent); }

table.pld-table {
    border-collapse: collapse;
    width: 100%;
}

table.pld-table th,
table.pld-table td {
    border-bottom: 1px solid var(--pld-brand-border);
    padding: .7rem .5rem;
    text-align: left;
}

table.pld-table th {
    color: var(--pld-brand-text-secondary);
    font-size: var(--pld-text-sm);
    font-weight: 600;
}

/* Fund 28.08.2026: "th, td { white-space: nowrap }" gefolgt von
   "td { white-space: normal }" liess de facto nur die <th scope="col">
   -Spaltenkoepfe einzeilig - lange Kopfzeilen wie "SharePoint / Microsoft
   365" oder "Enterprise-DMS (DocuWare u. a.)" zwangen ihre ganze Spalte auf
   die volle Phrasenbreite, obwohl die Zellinhalte darunter laengst umbrachen.
   Das allein trieb die Tabelle bei 1280px Fensterbreite auf ueber 1250px
   Eigenbreite - deutlich breiter als noch als "schmale Randerscheinung"
   durchgehen konnte. Koepfe duerfen jetzt genauso umbrechen wie die Zellen. */
table.pld-table-compare th,
table.pld-table-compare td {
    white-space: normal;
}

table.pld-table-compare th:nth-child(2),
table.pld-table-compare td:nth-child(2) {
    background: color-mix(in srgb, var(--pld-brand-primary) 8%, transparent);
    font-weight: 600;
}

/* Vergleichstabelle auf schmalen/mittleren Bildschirmen: Design-Review
   27.08.2026 hatte den bestehenden horizontalen Scroll-Container ohne jeden
   sichtbaren Hinweis gefunden - eine Zelle brach mitten im Wort ab, ohne
   dass erkennbar war, dass ueberhaupt mehr Inhalt existiert. Ab hier wird
   die Tabelle stattdessen zu gestapelten Karten umgebaut, eine Karte je
   Kriterium - reines CSS, kein JavaScript (Website-Grundsatz).

   Die Grenze liegt bewusst bei 1023px, nicht wie zunaechst angenommen bei
   799px (Fund 28.08.2026, nachgemessen per scrollWidth/clientWidth): auch
   nach dem Wortumbruch-Fix fuer die <th>-Spaltenkoepfe blieb die echte
   Tabelle zwischen etwa 800px und 1024px Fensterbreite noch breiter als ihr
   Container (z. B. 1028px Eigenbreite bei nur 795px verfuegbarem Platz bei
   850px Fensterbreite) - ein einzelnes langes Wort je Spalte reicht als
   Mindestbreite aus, um das bei mittleren Breiten zu ueberschreiten. Ab
   1024px reicht der verfuegbare Platz durchgaengig; darunter ist die
   Kartenansicht die zuverlaessigere Wahl statt einer Tabelle, die mal
   passt und mal nicht. */
@media (max-width: 1023px) {
    table.pld-table-compare,
    table.pld-table-compare tbody,
    table.pld-table-compare tr {
        display: block;
        min-width: 0;
    }

    table.pld-table-compare thead {
        /* Nicht display:none - eine unsichtbare, aber vorhandene Kopfzeile
           bliebe fuer Screenreader eine leere, verwirrende erste Karte.
           position:absolute ausserhalb des sichtbaren Bereichs entfernt sie
           optisch, ohne sie aus dem Vorlesefluss zu nehmen. */
        height: 1px;
        overflow: hidden;
        position: absolute;
        width: 1px;
    }

    table.pld-table-compare tbody tr {
        background: var(--pld-brand-surface);
        border: 1px solid var(--pld-brand-border);
        border-radius: 10px;
        margin-bottom: 1rem;
        overflow: hidden;
        padding: .25rem 1rem;
    }

    table.pld-table-compare th[scope="row"] {
        display: block;
        font-size: var(--pld-text-base);
        padding: .85rem 0 .5rem;
    }

    /* Label ueber dem Wert statt nebeneinander (Fund 28.08.2026: eine
       Nebeneinander-Anordnung per display:flex ueberliess den Wert einem
       anonymen Flex-Item ohne eigenes Element - dessen Default-min-width:auto
       verhindert Umbruch und schneidet laengere Saetze wie "Allzweck-
       Zusammenarbeit, jede Unternehmensgroesse" sichtbar am rechten Rand ab,
       statt sie umzubrechen. Diese Tabelle hat mehrere Zellen mit ganzen
       Saetzen statt kurzer Werte - dafuer ist "Label oben, Wert darunter in
       normalem Blockfluss" robuster als jede Flex-Breitenkorrektur, weil gar
       keine Flex-Schrumpf-Mathematik mehr im Spiel ist.) */
    table.pld-table-compare td {
        border-top: 1px solid var(--pld-brand-border);
        display: block;
        padding: .75rem 0 .85rem;
    }

    /* Das Spaltenlabel kommt aus dem data-label-Attribut der Zelle
       (Vergleich.cshtml) statt aus der ausgeblendeten Kopfzeile - reines CSS
       kann den Text einer anderen Zelle nicht lesen, attr() auf der Zelle
       selbst schon. */
    table.pld-table-compare td::before {
        color: var(--pld-brand-text-secondary);
        content: attr(data-label);
        display: block;
        font-family: var(--pld-font-mono);
        font-size: var(--pld-text-xs);
        letter-spacing: .04em;
        margin-bottom: .3rem;
        text-transform: uppercase;
    }

    /* Die PLD-Pro-Hervorhebung wirkt im Kartenmodus als eigener,
       hervorgehobener Block statt als Spalte - derselbe Selektor wie oben,
       keine zweite Pflege noetig. */
    table.pld-table-compare td:nth-child(2) {
        border-radius: 6px;
        border-top-color: transparent;
        margin: .4rem 0;
        padding: .65rem .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* Nur fuer den Druck/PDF-Export der Rechtsseiten (AGB, AVV) gedacht, nicht
   fuer eine allgemeine Druckansicht der ganzen Website: Kopf- und Fusszeile
   tragen auf Papier keine Information (Navigation, Login-Link), die
   Container-Breite darf die volle Seite nutzen statt der Bildschirm-Spalte
   zu folgen. */
@media print {
    .pld-header {
        display: none;
    }

    .pld-container {
        max-width: none;
        padding: 0;
    }
}

/* =========================================================================
   Satzspiegel der Website (Fassung v3, 12.10.2026; seit 19.10.2026 die
   einzige – vorher eigenes Stylesheet site-v3.css neben /v2 und /orig).
   Alle Regeln gelten unter html.pld-v3 (_Layout.cshtml); der Praefix ist
   historisch und bleibt, damit diese Regeln die allgemeinen oben sicher
   uebersteuern.

   Leitidee: ein ruhiger Satzspiegel. Befund an der Fassung v2: Spalten
   innerhalb einer Seite waren unterschiedlich breit, Saetze brachen unnoetig
   um (Textkante 189 px, in abgesetzten Abschnitten 169 px).

   Daraus drei Regeln, die diese Datei durchsetzt:
   1. EINE Textkante. Jeder Abschnitt ist ein Band ueber die volle Breite mit
      derselben .v3-wrap-Spalte darin. Kein Ausbrechen per 100vw mehr.
   2. EINE Breite je Seite (13.10.2026, Erik): jeder Block – Einleitung,
      Fliesstext, Raster, Tabelle, Hinweis – fuellt die Spalte. Die erste
      Fassung begrenzte Fliesstext zusaetzlich auf ein Lesemass von 42 rem;
      dann brach eine Einleitung nach zwei Dritteln um, waehrend das Raster
      darunter bis zum Rand lief – genau das Nebeneinander zweier Breiten,
      das unruhig wirkt. Das gilt fuer jede Seite, auch Ratgeber, Rechtstexte
      und Formulare (30.10.2026, Erik): die fruehere schmale Spalte fuer
      Textseiten wirkte schmaler als die Seite, von der man kam.
   3. Raster mit gleich breiten Spalten (minmax(0, 1fr)) und einer Spaltenzahl,
      die zur Anzahl der Elemente passt – keine 3+1-Reihen. */

html.pld-v3 {
    --v3-wrap: 64rem;
    --v3-gutter: clamp(1.25rem, 4vw, 2rem);
    --v3-section-space: clamp(3rem, 6.5vw, 5.5rem);
    --v3-rule: var(--pld-brand-border);
    --v3-ink: var(--pld-brand-text-primary);
    --v3-muted: var(--pld-brand-text-secondary);
    --v3-tint: var(--pld-brand-background);
    --v3-paper: var(--pld-brand-surface);
    scroll-padding-top: 5rem;
}

html.pld-v3 body {
    background: var(--v3-paper);
    font-size: 1.0625rem;
    line-height: 1.65;
}

html.pld-v3 main { padding: 0; }

/* --- Typografie ------------------------------------------------------------- */

/* Ueberschriften brechen ausgewogen um (keine einzelnen Woerter in der
   letzten Zeile), Fliesstext ohne Hurenkinder. Beides Baseline in Chrome,
   Edge und Safari; Firefox faellt ohne Schaden auf normalen Umbruch zurueck.
   Silbentrennung am Desktop aus: dort ist Platz, und eine getrennte Zeile in
   einer Werbeaussage liest sich schlechter als eine etwas kuerzere Zeile.
   Am Telefon bleibt sie an, sonst sprengen deutsche Komposita die Spalte. */
html.pld-v3 h1,
html.pld-v3 h2,
html.pld-v3 h3 {
    color: var(--v3-ink);
    hyphens: manual;
    text-wrap: balance;
}

html.pld-v3 h1 {
    font-size: clamp(2rem, 1.4rem + 2.2vw, 2.875rem);
    letter-spacing: -.02em;
    line-height: 1.12;
    margin-bottom: 1.25rem;
}

html.pld-v3 h2 {
    font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.125rem);
    letter-spacing: -.01em;
    line-height: 1.2;
    margin-bottom: 1rem;
}

html.pld-v3 h3 {
    font-size: 1.1875rem;
    line-height: 1.35;
    margin-bottom: .5rem;
}

html.pld-v3 p,
html.pld-v3 li {
    text-wrap: pretty;
}

html.pld-v3 p { margin: 0 0 1rem; }
html.pld-v3 p:last-child { margin-bottom: 0; }

@media (max-width: 599px) {
    /* Nur Ueberschriften trennen, und nur lange Woerter
       (ab 12 Zeichen, mindestens 5 je Teil): ein getrenntes "erfas-sen" im
       Fliesstext stoert mehr, als eine etwas kuerzere Zeile. Fliesstext
       bricht notfalls hart um (overflow-wrap), statt die Spalte zu sprengen. */
    html.pld-v3 h1,
    html.pld-v3 h2,
    html.pld-v3 h3 {
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 12 5 5;
    }

    html.pld-v3 p,
    html.pld-v3 li,
    html.pld-v3 td,
    html.pld-v3 th { overflow-wrap: break-word; }
}

/* Wortgruppen, die nie getrennt werden sollen ("29 €", "§ 132 BAO",
   "30 Tage kostenlos") – ergaenzt die geschuetzten Leerzeichen im Text. */
html.pld-v3 .v3-nowrap { white-space: nowrap; }

html.pld-v3 .v3-lead {
    color: var(--v3-muted);
    font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
    line-height: 1.55;
    text-wrap: pretty;
}

/* Kleine Ueberschrift ueber einem Block, nur wo sie etwas einordnet. */
html.pld-v3 .v3-kicker {
    color: var(--pld-brand-accent);
    font-family: var(--pld-font-mono);
    font-size: var(--pld-text-xs);
    letter-spacing: .08em;
    margin: 0 0 .75rem;
    text-transform: uppercase;
}

html.pld-v3 .v3-small {
    color: var(--v3-muted);
    font-size: var(--pld-text-sm);
}

/* --- Satzspiegel ------------------------------------------------------------ */

html.pld-v3 .v3-wrap {
    margin-inline: auto;
    max-width: calc(var(--v3-wrap) + 2 * var(--v3-gutter));
    padding-inline: var(--v3-gutter);
}

html.pld-v3 .v3-section {
    border-top: 1px solid var(--v3-rule);
    padding-block: var(--v3-section-space);
}

/* Abgesetzter Untergrund – sparsam: Seitenkopf und Abschluss, sonst nur, wo
   ein Abschnitt bewusst aus dem Lesefluss heraustritt. */
html.pld-v3 .v3-section--tint { background: var(--v3-tint); }

html.pld-v3 .v3-section--flush { border-top: 0; }

/* Kopf eines Abschnitts: Ueberschrift und Einleitung im Lesemass. */
html.pld-v3 .v3-head {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

html.pld-v3 .v3-head:last-child { margin-bottom: 0; }
html.pld-v3 .v3-head .v3-lead { margin-top: 0; }


/* Ein einheitlicher Abstand zwischen Bloecken innerhalb eines Abschnitts.
   Der Abschnittskopf traegt seinen eigenen Abstand nach unten, deshalb
   zaehlt nur, was auf einen anderen Block folgt. Nur in Inhaltsabschnitten:
   Seitenkopf, Kopf- und Fusszeile nutzen .v3-wrap ebenfalls und setzen ihre
   Abstaende selbst (sonst stuende z. B. zwischen h1 und Einleitung ein
   Blockabstand). */
html.pld-v3 .v3-section .v3-wrap > :not(.v3-head) + * { margin-top: clamp(2rem, 4vw, 2.75rem); }

html.pld-v3 .v3-prose h2 { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
html.pld-v3 .v3-prose h3 { margin-top: 2rem; }
html.pld-v3 .v3-prose h2:first-child,
html.pld-v3 .v3-prose h3:first-child { margin-top: 0; }

html.pld-v3 .v3-prose ul,
html.pld-v3 .v3-prose ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

html.pld-v3 .v3-prose li + li { margin-top: .5rem; }

/* Rechtstexte (14.10.2026): dieselbe Auszeichnung wie an der Wurzel
   (Pages/Shared/Rechtstexte), hier in der Formensprache von v3 – ruhige
   Ueberschriften, Begriffsliste wie .v3-terms, Hinweis wie .v3-note. */
html.pld-v3 .v3-legal h2 { font-size: 1.3125rem; }
html.pld-v3 .v3-legal p { margin: 0 0 1rem; }
html.pld-v3 .v3-legal .legal-sub { padding-left: 1.5rem; }
html.pld-v3 .v3-legal .legal-nowrap { white-space: nowrap; }
html.pld-v3 .v3-legal .legal-firm { margin-bottom: 1.75rem; }

html.pld-v3 .v3-legal .legal-terms {
    border-top: 2px solid var(--v3-ink);
    margin: 0 0 1rem;
}

html.pld-v3 .v3-legal .legal-terms > div {
    border-bottom: 1px solid var(--v3-rule);
    display: grid;
    gap: .25rem 1.5rem;
    grid-template-columns: minmax(0, 1fr);
    padding-block: .85rem;
}

@media (min-width: 600px) {
    html.pld-v3 .v3-legal .legal-terms > div { grid-template-columns: 14rem minmax(0, 1fr); }
}

html.pld-v3 .v3-legal .legal-terms dt { font-weight: 600; }
html.pld-v3 .v3-legal .legal-terms dd { color: var(--v3-muted); margin: 0; }
html.pld-v3 .v3-legal .legal-terms dd p { margin: 0; }
html.pld-v3 .v3-legal .legal-terms dd p + p { margin-top: .5rem; }

html.pld-v3 .v3-legal .legal-note {
    border-left: 3px solid var(--pld-brand-accent);
    margin-bottom: 2.25rem;
    padding: .25rem 0 .25rem 1.25rem;
}

html.pld-v3 .v3-legal .legal-note p { color: var(--v3-muted); margin: 0; }

html.pld-v3 .v3-legal .legal-parties p { margin: 0; }
html.pld-v3 .v3-legal .legal-parties .legal-joiner {
    color: var(--v3-muted);
    font-size: var(--pld-text-sm);
    margin-block: .5rem;
}

/* --- Seitenkopf ------------------------------------------------------------- */

html.pld-v3 .v3-pagehead {
    background: var(--v3-tint);
    border-bottom: 1px solid var(--v3-rule);
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
}

html.pld-v3 .v3-pagehead .v3-lead { margin-bottom: 0; }
html.pld-v3 .v3-pagehead + .v3-section { border-top: 0; }

/* Startseite: Text links, Bildschirmfoto rechts. Die Textspalte ist die
   schmalere (5 von 12), das Bild bekommt den Platz, den es zum Lesen
   braucht. */
html.pld-v3 .v3-hero {
    background: var(--v3-tint);
    border-bottom: 1px solid var(--v3-rule);
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem);
}

html.pld-v3 .v3-hero-grid {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
    html.pld-v3 .v3-hero-grid {
        align-items: start;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

html.pld-v3 .v3-hero-grid h1 { margin: 0; }

html.pld-v3 .v3-hero-grid .v3-lead { margin-top: 0; }

/* Ausschnitt der Belegliste ueber die volle Spalte, nahezu 1:1 – das ganze
   Bildschirmfoto neben dem Text war nur als Flaeche erkennbar (13.10.2026).
   Am Telefon schneidet die Karte unten mitten im Eintrag ab, daher die
   auslaufende Kante. */
html.pld-v3 .v3-hero .v3-hero-shot { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

@media (max-width: 40rem) {
    html.pld-v3 .v3-hero-shot img {
        -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
        mask-image: linear-gradient(to bottom, #000 78%, transparent);
    }
}


html.pld-v3 .v3-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-top: 2rem;
}

html.pld-v3 .v3-actions .pld-btn { white-space: nowrap; }

/* Faktenleiste unter dem Seitenkopf: gleich breite Zellen statt einer
   frei fliessenden Wortreihe – die stand in /v2 mit ungleichen Abstaenden
   und brach auf mittleren Breiten an zufaelliger Stelle um. */
html.pld-v3 .v3-facts {
    border-top: 1px solid var(--v3-rule);
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
    padding: 0;
}

@media (min-width: 960px) {
    html.pld-v3 .v3-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

html.pld-v3 .v3-facts li {
    color: var(--v3-muted);
    font-size: var(--pld-text-sm);
    line-height: 1.45;
    padding: 1.1rem 1.25rem 0 0;
}

html.pld-v3 .v3-facts strong {
    color: var(--v3-ink);
    display: block;
    font-family: var(--pld-font-heading);
    font-size: 1rem;
    margin-bottom: .2rem;
}

/* --- Raster ----------------------------------------------------------------- */

/* Gleich breite Spalten. Die Spaltenzahl waehlt die Seite passend zur Anzahl
   der Elemente (v3-cols-2 fuer 2/4, v3-cols-3 fuer 3/6) – so entsteht nie
   eine Reihe mit einem einzelnen Nachzuegler. */
html.pld-v3 .v3-cols {
    display: grid;
    gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
    html.pld-v3 .v3-cols-2,
    html.pld-v3 .v3-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    html.pld-v3 .v3-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Element im Raster: eine Linie oben statt eines Kastens. Ruhiger als
   Karten mit Rahmen und Hintergrund, und die Linien bilden ueber die Reihe
   eine gemeinsame Kante. */
html.pld-v3 .v3-item {
    border-top: 2px solid var(--v3-ink);
    padding-top: 1.1rem;
}

html.pld-v3 .v3-item p { color: var(--v3-muted); }

/* Ueberschrift eines Elements, das semantisch eine h2 ist (eigenstaendiger
   Abschnitt ohne uebergeordnete Abschnittsueberschrift), aber im Raster wie
   eine h3 aussehen soll. */
html.pld-v3 .v3-item-title,
html.pld-v3 .v3-plan-name {
    font-size: 1.1875rem;
    letter-spacing: 0;
    line-height: 1.35;
    margin-bottom: .5rem;
}

html.pld-v3 .v3-form-action { margin-top: 1.5rem; }

html.pld-v3 .v3-item-title a,
html.pld-v3 .v3-item h3 a { color: inherit; text-decoration: none; }
html.pld-v3 .v3-item-title a:hover { text-decoration: underline; }
html.pld-v3 .v3-item h3 a:hover { text-decoration: underline; }

/* Nummerierte Schritte – nur fuer echte Reihenfolgen. */
html.pld-v3 .v3-steps {
    counter-reset: v3-step;
    list-style: none;
    margin: 0;
    padding: 0;
}

html.pld-v3 .v3-steps > li { counter-increment: v3-step; }

html.pld-v3 .v3-steps > li::before {
    color: var(--pld-brand-accent);
    content: counter(v3-step, decimal-leading-zero);
    display: block;
    font-family: var(--pld-font-mono);
    font-size: var(--pld-text-sm);
    font-weight: 600;
    margin-bottom: .35rem;
}

/* --- Gegenueberstellung ----------------------------------------------------- */

html.pld-v3 .v3-compare {
    border-top: 2px solid var(--v3-ink);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
    html.pld-v3 .v3-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.pld-v3 .v3-compare > div + div {
        border-left: 1px solid var(--v3-rule);
        padding-left: clamp(1.5rem, 3vw, 2.5rem);
    }
    html.pld-v3 .v3-compare > div:first-child { padding-right: clamp(1.5rem, 3vw, 2.5rem); }
}

@media (max-width: 699px) {
    html.pld-v3 .v3-compare > div + div { border-top: 1px solid var(--v3-rule); }
}

html.pld-v3 .v3-compare > div { padding-block: 1.25rem; }

html.pld-v3 .v3-compare ul {
    display: grid;
    gap: .7rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

html.pld-v3 .v3-compare > div:first-child li { color: var(--v3-muted); }
html.pld-v3 .v3-compare > div + div li { color: var(--v3-ink); font-weight: 500; }

html.pld-v3 .v3-compare-label {
    color: var(--v3-muted);
    font-family: var(--pld-font-mono);
    font-size: var(--pld-text-xs);
    letter-spacing: .08em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

html.pld-v3 .v3-compare > div + div .v3-compare-label { color: var(--pld-brand-accent); }

/* --- Preise ----------------------------------------------------------------- */

html.pld-v3 .v3-plans {
    display: grid;
    gap: 1.75rem clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
    html.pld-v3 .v3-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

html.pld-v3 .v3-plan {
    background: var(--v3-paper);
    border: 1px solid var(--v3-rule);
    border-radius: var(--pld-radius-default);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    position: relative;
}

html.pld-v3 .v3-section--tint .v3-plan { background: var(--v3-paper); }

html.pld-v3 .v3-plan--featured { border-color: var(--v3-ink); }

/* Etikett auf der Rahmenkante, damit alle Karten gleich hoch beginnen. */
html.pld-v3 .v3-plan-badge {
    background: var(--v3-ink);
    border-radius: 999px;
    color: var(--v3-paper);
    font-size: var(--pld-text-xs);
    font-weight: 600;
    left: 1.5rem;
    letter-spacing: .02em;
    padding: .2rem .65rem;
    position: absolute;
    top: -.75rem;
}

html.pld-v3 .v3-plan h3 { margin-bottom: .25rem; }

html.pld-v3 .v3-plan-price {
    font-family: var(--pld-font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    margin: .5rem 0 1rem;
    white-space: nowrap;
}

html.pld-v3 .v3-plan-price small {
    color: var(--v3-muted);
    font-family: var(--pld-font-body);
    font-size: var(--pld-text-sm);
    font-weight: 400;
}

html.pld-v3 .v3-plan ul {
    border-top: 1px solid var(--v3-rule);
    display: grid;
    gap: .55rem;
    list-style: none;
    margin: 0;
    padding: 1rem 0 0;
}

html.pld-v3 .v3-plan li { font-size: var(--pld-text-sm); }

/* --- Tabellen ---------------------------------------------------------------- */

html.pld-v3 .v3-table { overflow-x: auto; }
html.pld-v3 .v3-table table.pld-table th,
html.pld-v3 .v3-table table.pld-table td { vertical-align: top; }

html.pld-v3 .v3-table table.pld-table thead th {
    border-bottom: 2px solid var(--v3-ink);
    color: var(--v3-ink);
}

html.pld-v3 .v3-table table.pld-table tbody th[scope="row"] {
    color: var(--v3-ink);
    font-size: inherit;
    font-weight: 600;
}

/* Datenzeilen mit Zahlen buendig untereinander. */
html.pld-v3 .v3-num { font-variant-numeric: tabular-nums; }

/* Konditionen: zwei Spalten, Beschriftung schmal und fest. */
html.pld-v3 .v3-terms {
    border-top: 2px solid var(--v3-ink);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
}

html.pld-v3 .v3-terms > div {
    border-bottom: 1px solid var(--v3-rule);
    display: grid;
    gap: .25rem 1.5rem;
    grid-template-columns: minmax(0, 1fr);
    padding-block: .85rem;
}

@media (min-width: 600px) {
    html.pld-v3 .v3-terms > div { grid-template-columns: 11rem minmax(0, 1fr); }
}

html.pld-v3 .v3-terms dt { font-weight: 600; }
html.pld-v3 .v3-terms dd { color: var(--v3-muted); margin: 0; }

/* --- Hinweis ------------------------------------------------------------------ */

/* "Was wir nicht behaupten" und aehnliche Einordnungen: eine Linie links,
   kein farbiger Kasten. */
html.pld-v3 .v3-note {
    border-left: 3px solid var(--pld-brand-accent);
    padding: .25rem 0 .25rem 1.25rem;
}

html.pld-v3 .v3-note h3 { font-size: 1.0625rem; }
html.pld-v3 .v3-note p { color: var(--v3-muted); }

/* --- Haeufige Fragen ---------------------------------------------------------- */

html.pld-v3 .v3-faq {
    border-top: 2px solid var(--v3-ink);
}

html.pld-v3 .v3-faq details { border-bottom: 1px solid var(--v3-rule); }

html.pld-v3 .v3-faq summary {
    cursor: pointer;
    display: flex;
    font-family: var(--pld-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    gap: 1rem;
    justify-content: space-between;
    list-style: none;
    padding-block: 1.1rem;
    text-wrap: pretty;
}

html.pld-v3 .v3-faq summary::-webkit-details-marker { display: none; }

html.pld-v3 .v3-faq summary::after {
    color: var(--v3-muted);
    content: "+";
    flex-shrink: 0;
    font-family: var(--pld-font-body);
    font-weight: 400;
}

html.pld-v3 .v3-faq details[open] summary::after { content: "–"; }

html.pld-v3 .v3-faq summary:focus-visible {
    outline: 2px solid var(--pld-brand-accent);
    outline-offset: 2px;
}

html.pld-v3 .v3-faq details > div {
    color: var(--v3-muted);
    padding-bottom: 1.25rem;
}

/* --- Bildschirmfotos ---------------------------------------------------------- */

html.pld-v3 .v3-shot { margin: 0; }

/* Der Ausloeser ist ein echter Knopf (popovertarget), kein Link auf
   #anker: die fruehere :target-Lightbox sprang beim Schliessen an den
   Seitenanfang (href="#") – Erik-Befund 12.10.2026, "wenn man wegzoomt,
   ist man irgendwo". Das Popover aendert weder Adresse noch
   Scrollposition, schliesst per Escape, Klick daneben oder Knopf, und
   braucht kein JavaScript (Baseline 2024). */
html.pld-v3 .v3-zoom {
    background: none;
    border: 0;
    cursor: zoom-in;
    display: block;
    padding: 0;
    width: 100%;
}

html.pld-v3 .v3-zoom:focus-visible {
    outline: 2px solid var(--pld-brand-accent);
    outline-offset: 4px;
}

html.pld-v3 .v3-shot img {
    background: var(--v3-paper);
    border: 1px solid var(--v3-rule);
    border-radius: var(--pld-radius-default);
    box-shadow: 0 1px 2px rgba(35, 31, 26, .06), 0 12px 32px -16px rgba(35, 31, 26, .35);
    display: block;
    height: auto;
    width: 100%;
}

html.pld-v3 .v3-shot figcaption {
    color: var(--v3-muted);
    font-size: var(--pld-text-sm);
    margin-top: .9rem;
}

html.pld-v3 .v3-shot--phone { max-width: 18rem; }

/* Zwei Aufnahmen nebeneinander (Steuerberater, Formate): oben buendig,
   mit Luft zu den Elementen davor und zum Text danach. */
html.pld-v3 .v3-shot-pair {
    align-items: start;
    margin-block: clamp(2.25rem, 4vw, 3rem);
}

/* Spalten im Verhaeltnis der Bildbreiten (378 : 568 CSS-Pixel): beide
   Aufnahmen erscheinen in fast natuerlicher Groesse, die Schrift darin
   gleich gross. */
@media (min-width: 700px) {
    html.pld-v3 .v3-shot-pair { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* --- Videos (Pages/Shared/_Video.cshtml) ------------------------------------ */

/* Rahmen und Schatten wie die Bildschirmfotos: das Vorschaubild hat
   denselben Papierton wie die Seite und waere ohne Kante nur eine leere
   Flaeche. aspect-ratio haelt den Platz frei, bevor das Bild geladen ist. */
html.pld-v3 .v3-video { margin: 0; }

html.pld-v3 .v3-video video {
    aspect-ratio: 16 / 9;
    background: var(--v3-paper);
    border: 1px solid var(--v3-rule);
    border-radius: var(--pld-radius-default);
    box-shadow: 0 1px 2px rgba(35, 31, 26, .06), 0 12px 32px -16px rgba(35, 31, 26, .35);
    display: block;
    height: auto;
    width: 100%;
}

html.pld-v3 .v3-video figcaption {
    color: var(--v3-muted);
    font-size: var(--pld-text-sm);
    margin-top: .9rem;
}

/* Titel auf eigener Zeile, darunter Laenge und Hinweise – am Telefon
   begaenne sonst jede umbrochene Zeile mit einem Trennpunkt. */
html.pld-v3 .v3-video figcaption strong {
    color: var(--v3-ink);
    display: block;
    margin-bottom: .15rem;
}

/* Hinweis im Seitenkopf der Startseite: ein Sprung zum Video, kein dritter
   Knopf neben den beiden Handlungsaufforderungen. */
html.pld-v3 .v3-videolink {
    font-size: var(--pld-text-sm);
    margin: 1rem 0 0;
}

/* Bildfolge (Funktionen, 13.10.2026): drei gleich hohe Aufnahmen eines
   echten Ablaufs. Ein Bild in drei Teilen, kein Raster – deshalb drei
   Spalten auf einer sonst zweispaltigen Seite, wie die Gegenueberstellung.
   Am Telefon nebeneinander zum Wischen statt 2000 px untereinander; es
   scrollt nur die Folge selbst, nie die Seite. */
html.pld-v3 .v3-sequence { margin: 0; }

html.pld-v3 .v3-sequence-steps {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.pld-v3 .v3-sequence-steps > li::before { content: none; }

html.pld-v3 .v3-sequence-steps img {
    aspect-ratio: 860 / 1520;
    background: var(--v3-paper);
    border: 1px solid var(--v3-rule);
    border-radius: var(--pld-radius-default);
    box-shadow: 0 1px 2px rgba(35, 31, 26, .06), 0 12px 32px -16px rgba(35, 31, 26, .35);
    display: block;
    height: auto;
    width: 100%;
}

/* Die beiden App-Ausschnitte enden mitten im Inhalt. */
html.pld-v3 .v3-sequence-steps .v3-fade img {
    -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent);
    mask-image: linear-gradient(to bottom, #000 90%, transparent);
}

html.pld-v3 .v3-sequence-steps h3 {
    font-size: 1.1875rem;
    margin: 1.1rem 0 .35rem;
}

html.pld-v3 .v3-sequence-steps h3::before {
    color: var(--pld-brand-accent);
    content: counter(v3-step, decimal-leading-zero);
    font-family: var(--pld-font-mono);
    font-size: var(--pld-text-sm);
    font-weight: 600;
    margin-right: .6rem;
}

html.pld-v3 .v3-sequence-steps p { color: var(--v3-muted); }

html.pld-v3 .v3-sequence figcaption {
    color: var(--v3-muted);
    font-size: var(--pld-text-sm);
    margin-top: 1.25rem;
}

@media (max-width: 40rem) {
    html.pld-v3 .v3-sequence-steps {
        grid-auto-columns: 78%;
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding-bottom: .75rem;
        scroll-snap-type: x mandatory;
    }

    html.pld-v3 .v3-sequence-steps > li { scroll-snap-align: start; }
}

/* Das Popover selbst ist nur so gross wie das Bild; der abgedunkelte Rest
   ist ::backdrop – ein Klick dorthin gilt als "daneben" und schliesst. */
html.pld-v3 .v3-lightbox {
    background: transparent;
    border: 0;
    margin: auto;
    max-height: 92vh;
    max-width: 94vw;
    overflow: visible;
    padding: 0;
}

html.pld-v3 .v3-lightbox::backdrop { background: rgba(20, 17, 14, .82); }

/* Groesse aus dem Fenster, nicht aus dem Bild (14.10.2026, Erik): das Bild
   fuellt 94 % der Breite oder 88 % der Hoehe, je nachdem, was zuerst
   erreicht ist – auf einem grossen Bildschirm entsprechend groesser. Das
   Seitenverhaeltnis kommt je Vergroesserung als --v3-ar ("1530 / 770") aus
   dem Markup; width:auto haette nie ueber die Pixelbreite der Datei hinaus
   vergroessert. Die Aufnahmen liegen in doppelter Aufloesung vor, damit das
   Hochrechnen scharf bleibt. */
html.pld-v3 .v3-lightbox img {
    border-radius: var(--pld-radius-default);
    box-shadow: 0 12px 48px rgba(0, 0, 0, .45);
    display: block;
    height: auto;
    width: min(94vw, calc(88vh * var(--v3-ar, 16 / 10)));
}

html.pld-v3 .v3-lightbox-close {
    background: var(--v3-paper);
    border: 1px solid var(--v3-rule);
    border-radius: 999px;
    color: var(--v3-ink);
    cursor: pointer;
    font: 600 var(--pld-text-sm)/1 var(--pld-font-body);
    padding: .55rem .9rem;
    position: absolute;
    right: .75rem;
    top: .75rem;
}

/* --- Abschluss-Band ----------------------------------------------------------- */

html.pld-v3 .v3-cta {
    background: var(--v3-tint);
    border-top: 1px solid var(--v3-rule);
    padding-block: var(--v3-section-space);
}


/* --- Formulare ---------------------------------------------------------------- */

html.pld-v3 .pld-form { max-width: none; }

/* In der vollen Spalte stehen kurze Felder zu zweit nebeneinander, sonst
   liefe ein Namensfeld ueber 1000 px. Nachricht, Hinweis, Fehlerliste und
   Knopf ueber beide Spalten; am Telefon eine Spalte. */
@media (min-width: 40rem) {
    html.pld-v3 .pld-form {
        column-gap: 1.5rem;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.pld-v3 .pld-form > :not(.pld-field),
    html.pld-v3 .pld-form > .pld-field:has(textarea) { grid-column: 1 / -1; }

    html.pld-v3 .pld-form > button { justify-self: start; }
}

html.pld-v3 .pld-field input,
html.pld-v3 .pld-field textarea { background: #fff; }

@media (prefers-color-scheme: dark) {
    html.pld-v3 .pld-field input,
    html.pld-v3 .pld-field textarea { background: var(--v3-tint); }
}

html.pld-v3 .v3-form-note {
    color: var(--v3-muted);
    font-size: var(--pld-text-sm);
    margin-block: 1.25rem;
}

/* --- Kopf, Vorschau-Streifen, Fusszeile ---------------------------------------- */

html.pld-v3 .pld-header-inner { padding-block: .875rem; }

html.pld-v3 .pld-nav a[aria-current="page"] {
    color: var(--v3-ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .45em;
}

@media (min-width: 900px) {
    html.pld-v3 .pld-nav { gap: 1.75rem; margin-left: auto; margin-right: 1.5rem; }
}

html.pld-v3 .v3-footer {
    background: var(--v3-tint);
    border-top: 1px solid var(--v3-rule);
    color: var(--v3-muted);
    font-size: var(--pld-text-sm);
    padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

html.pld-v3 .v3-footer a { color: var(--v3-muted); text-decoration: none; }
html.pld-v3 .v3-footer a:hover { color: var(--v3-ink); text-decoration: underline; }

html.pld-v3 .v3-footer-grid {
    display: grid;
    gap: 2rem 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
    html.pld-v3 .v3-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

html.pld-v3 .v3-footer-title {
    color: var(--v3-ink);
    font-family: var(--pld-font-heading);
    font-weight: 600;
    margin-bottom: .75rem;
}

html.pld-v3 .v3-footer ul {
    display: grid;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

html.pld-v3 .v3-footer-base {
    align-items: baseline;
    border-top: 1px solid var(--v3-rule);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
    justify-content: space-between;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
}

html.pld-v3 .v3-footer-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* Druck (auch die PDF-Kopien von AGB und AVV im Produkt entstehen so): nur
   der Inhalt, ohne Fuss mit Navigation. Der Kopf traegt noch .pld-header
   und faellt ueber die Druckregel in site.css weg. */
@media print {
    html.pld-v3 .v3-footer { display: none; }
}