/*
 * Anschlag (Layout 3, Entscheide ChiefDev 22.10.2026): gross und plakativ.
 *
 * Uebernommen aus dem Scribble resources/scribbles/anschlag.css (v=42); die
 * Scribbles sind das Pflichtenheft. Angelehnt an die alte Vorlage Anschlag
 * (bis 17.10.2026) und an Klartext und Auftritt angeglichen. Eine Schrift,
 * Archivo, variabel ueber Gewicht und Breite. Der Name ueber die volle
 * Breite, ein Kontaktband, die Unterseiten als Farbbaender, keine Karten,
 * keine Schatten, keine Zaehler. Bilder immer ganz, nie beschnitten.
 *
 * Gegenueber dem Scribble angepasst wie bei Auftritt: Rueckfallwerte der
 * Farben, der helle Akzent aus der Branche statt gerechnet, der Statuspunkt
 * aus der Farbwelt, Fuss und Anrufleiste aus den gemeinsamen Bausteinen,
 * das Logo und das Menue ab sechs Unterseiten. Kopf, Unterseite,
 * Rechtsseite und das dunkle Band tragen die Auszeichnung von Auftritt.
 */

@font-face {
    font-family: 'Archivo';
    src: url('fonts/archivo-latin.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}

:root {
    /* Rueckfall: Farbwelt hell. */
    --papier: #fafafa;
    --papier-tief: #eeeeee;
    --karte: #ffffff;
    --tinte: #141414;
    --tinte-leise: #5e5e5e;
    --linie: #d8d8d8;
    --flut: #161616;
    --offen: #178a4a;
    --offen-flut: #178a4a;
    /* Rueckfall ohne Branche; die Branche liefert beide Akzente. */
    --akzent: #1d4e89;
    --akzent-hell: #ffd27a;
    --breite: 76rem;
    /* Schrift: die Vorlage setzt ihre eigene, der Kunde kann jede ersetzen
       (Schriftwahl, 30.10.2026); der Firmenname folgt sonst den
       Ueberschriften. Die Textgroesse setzt der Generator an html, die
       Faktoren fuer Ueberschriften und Namen an :root: --titel-faktor und
       --name-faktor fuer rem und em (schon durch die Textgroesse geteilt),
       --titel-faktor-vw und --name-faktor-vw fuer vw. Staerke und kursiv
       je Rolle (31.10.2026): --titel-gewicht, --text-gewicht,
       --name-gewicht, --titel-stil, --text-stil, --name-stil; ohne Wahl
       gilt der Rueckfall an jeder Stelle, also der bisherige Wert. */
    --schrift-text: 'Archivo', system-ui, sans-serif;
    --schrift-titel: var(--schrift-text);
    --schrift-name: var(--schrift-titel);
}

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

body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: var(--schrift-text);
    /* Der Text traegt Staerke und Stil an alles weiter, was keine eigene hat. */
    font-style: var(--text-stil, normal);
    font-weight: var(--text-gewicht, normal);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: var(--schrift-titel);
    font-style: var(--titel-stil, normal);
    font-weight: var(--titel-gewicht, bold);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

.innen {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 1.25rem;
}

h1,
h2,
h3 {
    font-weight: var(--titel-gewicht, 750);
    font-stretch: 112%;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Lange Woerter wie "Geschaeftsbedingungen" oder ein langer Firmenname
   sprengen sonst am Telefon die grosse Ueberschrift. */
h1,
h2 {
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Kleine Versalzeile: Dach, Pfad, Beschriftungen. Keine Zaehler vor
   Ueberschriften, wie bei Klartext und Auftritt (Entscheid ChiefDev
   22.10.2026). */
.branche,
.pfad,
.vorsatz {
    font-size: 0.78rem;
    font-weight: 700;
    font-stretch: 72%;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* ── Kopf auf dem Papier: Wortmarke und Sprungmarken ───────────────────── */

.kopf {
    border-bottom: 2px solid var(--tinte);
}

.kopf .innen {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 5rem;
}

.marke {
    margin-right: auto;
    font-family: var(--schrift-name);
    font-size: 0.95rem;
    font-style: var(--name-stil, normal);
    font-weight: var(--name-gewicht, 800);
    font-stretch: 80%;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.navi {
    display: none;
    gap: 1.4rem;
}

.navi a {
    padding: 0.3rem 0;
    border-bottom: 3px solid transparent;
    font-size: 0.8rem;
    font-weight: 700;
    font-stretch: 80%;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
}

.navi a:hover,
.navi a[aria-current] {
    border-bottom-color: var(--akzent);
}

.kopf-telefon {
    display: none;
    font-weight: 800;
    font-stretch: 100%;
    text-decoration: none;
}

@media (min-width: 900px) {
    .navi {
        display: flex;
    }

    .kopf-telefon {
        display: block;
    }

    .menue {
        display: none;
    }
}

.menue {
    position: relative;
}

.menue summary {
    padding: 0.45rem 0.9rem;
    border: 2px solid var(--tinte);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}

.menue summary::-webkit-details-marker {
    display: none;
}

.menue nav {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 10;
    display: grid;
    min-width: 14rem;
    padding: 0.5rem 0;
    background: var(--flut);
    color: var(--papier);
}

.menue nav a {
    padding: 0.7rem 1.1rem;
    font-weight: 700;
    font-stretch: 85%;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

/* ── Das Plakat: der Name ueber die volle Breite ───────────────────────── */

.plakat {
    padding-block: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
}

.plakat .branche {
    margin: 0 0 clamp(0.9rem, 2vw, 1.5rem);
    color: var(--tinte-leise);
    letter-spacing: 0.34em;
}

/* Der Name fuellt die Breite, aber nicht mehr als zwei Zeilen. Wie lang er
   ist, misst der Generator (laengstes Wort --name-zeichen, ganzer Name
   --name-laenge); im Scribble gelten die Vorgaben fuer "Baeckerei
   Waldmueller". Seit 24.10.2026 kleiner (Befund RUF: zu gross, drei Zeilen
   bei langen Namen). */
.plakat h1 {
    margin: 0;
    /* Eigene Schrift und Groesse des Namens (30.10.2026): kleiner geht
       immer, groesser auf dem Telefon nur, solange er passt. */
    font-family: var(--schrift-name);
    font-size: clamp(min(2.4rem * var(--name-faktor, 1), max(2.4rem, min((100vw - 2.5rem) / (var(--name-zeichen, 10) * 0.74), (2 * (100vw - 2.5rem)) / (var(--name-laenge, 19) * 0.74)))), min(10vw * var(--name-faktor-vw, 1), (100vw - 2.5rem) / (var(--name-zeichen, 10) * 0.74), (2 * (100vw - 2.5rem)) / (var(--name-laenge, 19) * 0.74)), 8.5rem * var(--name-faktor, 1));
    font-style: var(--name-stil, normal);
    font-weight: var(--name-gewicht, 820);
    font-stretch: 125%;
    line-height: 0.86;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.plakat .leitsatz {
    max-width: 34ch;
    margin: clamp(1.1rem, 2.5vw, 1.8rem) 0 0;
    font-size: clamp(1.2rem, 1rem + 1vw, 1.9rem);
    font-weight: 500;
    font-stretch: 90%;
    line-height: 1.25;
    text-wrap: balance;
}

/* Ein Motiv, so breit wie die Seite, ganz und nie beschnitten. Quer- und
   Bandformate fuellen die Breite immer; nur ein quadratisches oder hohes
   Bild (plakatbild--hoch) steht hoechstens 72vh hoch und mittig. Vorher
   galt die Grenze fuer jedes Bild, und in einem niedrigen Fenster stand ein
   breites Kopfbild schmal in der Mitte (Befund ChiefDev 09.11.2026). */
.plakatbild {
    margin: 0;
    background: var(--papier-tief);
}

.plakatbild img {
    width: 100%;
}

.plakatbild--hoch img {
    width: auto;
    max-height: 72vh;
    margin-inline: auto;
}

/* ── Das Kontaktband: anrufen, offen, wo ───────────────────────────────── */

.kontaktband {
    padding-block: clamp(1.5rem, 3.5vw, 2.4rem);
    border-bottom: 2px solid var(--tinte);
}

.kontaktband .innen {
    display: grid;
    gap: 1.1rem 2.5rem;
    align-items: center;
}

@media (min-width: 760px) {
    .kontaktband .innen {
        grid-template-columns: auto 1fr auto;
    }
}

.anrufen {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.7rem;
    padding-bottom: 0.15rem;
    border-bottom: 4px solid var(--akzent);
    font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
    font-weight: 800;
    font-stretch: 105%;
    letter-spacing: -0.015em;
    text-decoration: none;
    justify-self: start;
}

.anrufen .vorsatz {
    color: var(--tinte-leise);
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-weight: 600;
}

.status::before {
    content: '';
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--offen);
}

.status[data-offen="nein"]::before {
    background: var(--tinte-leise);
}

.anschrift {
    margin: 0;
    color: var(--tinte-leise);
    line-height: 1.45;
}

/* ── Die Unterseiten als Farbbaender ───────────────────────────────────── */

.baender {
    display: grid;
}

.band {
    display: block;
    padding-block: clamp(2.2rem, 5vw, 3.8rem);
    background: var(--flut);
    color: var(--papier);
    text-decoration: none;
}

.band:nth-child(even) {
    background: var(--papier-tief);
    color: var(--tinte);
}

.band .innen {
    display: grid;
    gap: 0.5rem 2rem;
    align-items: end;
}

@media (min-width: 760px) {
    .band .innen {
        grid-template-columns: 1fr auto;
    }
}

/* Ein Strich im Akzent ueber der Ueberschrift ersetzt die Nummer. */
.band h2::before {
    content: '';
    display: block;
    width: 3rem;
    height: 0.4rem;
    margin-bottom: 1.1rem;
    background: var(--akzent-hell);
}

.band:nth-child(even) h2::before {
    background: var(--akzent);
}

.band h2 {
    margin: 0;
    font-size: clamp(2.4rem * var(--titel-faktor, 1), 1.4rem * var(--titel-faktor, 1) + 4.5vw * var(--titel-faktor-vw, 1), 5.4rem * var(--titel-faktor, 1));
    font-weight: var(--titel-gewicht, 800);
    font-stretch: 120%;
    line-height: 0.9;
}

.band p {
    grid-column: 1;
    max-width: 48ch;
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.85;
}


.band .mehr {
    font-weight: 800;
    font-stretch: 85%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.band:hover .mehr,
.band:focus-visible .mehr {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 0.35em;
}

/* ── Bloecke auf der Startseite (Starterpaket und Startseitenbloecke) ──── */

.block {
    padding-block: clamp(2.5rem, 7vw, 5.5rem);
}

.block--flut {
    background: var(--flut);
    color: var(--papier);
}

.block h2 {
    margin: 0 0 clamp(1.2rem, 3vw, 2.2rem);
    font-size: clamp(2rem * var(--titel-faktor, 1), 1.2rem * var(--titel-faktor, 1) + 3vw * var(--titel-faktor-vw, 1), 3.8rem * var(--titel-faktor, 1));
}

.block-inhalt {
    display: grid;
    gap: 2rem 3rem;
}

/* Ein Bild mit Breitenangabe darf die Spalte nicht sprengen: ohne
   min-width 0 waechst eine Rasterspalte auf die Breite der Datei. */
.block-inhalt > *,
.kapitel.seite > * {
    min-width: 0;
}

@media (min-width: 900px) {
    .block-inhalt:has(figure) {
        grid-template-columns: 1.1fr 1fr;
        align-items: start;
    }

    /* Vom Kunden bestimmt (image_position, 30.10.2026). */
    .block.bild-links .block-inhalt:has(figure) {
        grid-template-columns: 1fr 1.1fr;
    }

    .block.bild-links .block-inhalt > figure {
        order: -1;
    }
}

.text {
    max-width: 62ch;
}

.text p {
    margin: 0 0 1rem;
}

.text p:last-child {
    margin-bottom: 0;
}

.block figure,
.kapitel figure {
    margin: 0;
}

/* Bild als Band ueber oder unter dem Text (image_position top/bottom,
   06.11.2026): immer ganz, nie beschnitten (Befund ChiefDev 08.11.2026: der
   16:9-Zuschnitt zeigte von einem Hochformat nur einen riesigen Ausschnitt).
   Ein Querformat fuellt die Breite des Abschnitts; ein quadratisches oder
   hohes Bild (bild-band--hoch) steht hoechstens so hoch wie das Fenster,
   schmaler und mittig. */
.bild-band {
    margin: 0;
}

.bild-band img {
    display: block;
    width: 100%;
    height: auto;
}

.bild-band--hoch img {
    width: auto;
    max-width: 100%;
    max-height: min(80vh, 56rem);
    margin-inline: auto;
}

.block .bild-band--oben {
    margin-bottom: clamp(1.2rem, 3vw, 2.2rem);
}

/* Bild oben ohne Text (08.11.2026): das Band schliesst den Block. */
.block .bild-band--oben:last-child {
    margin-bottom: 0;
}

.block .bild-band--unten {
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* Auf der Unterseite ist das Band kein Spaltenbild: eine Spalte, volle Breite. */
@media (min-width: 900px) {
    .kapitel.seite.mit-band:has(figure) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Aufzaehlungen gross, mit Linien: die Liste ist der Inhalt. */
.liste {
    margin: 0;
    padding: 0;
    border-top: 2px solid currentColor;
    list-style: none;
}

/* Block statt Flex (31.10.2026): in Flex wurde jedes fette Wort und jeder
   Link ein eigener Kasten neben dem Text. Der Haengeeinzug haelt umbrochene
   Zeilen und die Erlaeuterung buendig hinter dem Quadrat. */
.liste li {
    padding: clamp(0.55rem, 1.4vw, 0.9rem) 0 clamp(0.55rem, 1.4vw, 0.9rem) 1.6rem;
    text-indent: -1.6rem;
    border-bottom: 1px solid currentColor;
    font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.7rem);
    font-weight: 650;
    font-stretch: 100%;
    letter-spacing: -0.01em;
}

.liste li::before {
    content: '';
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 1rem;
    background: var(--akzent);
    transform: translateY(-0.15em);
}

.block--flut .liste li::before {
    background: var(--akzent-hell);
}

/* ── Unterseite ────────────────────────────────────────────────────────── */

.seitenkopf {
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
}

.pfad {
    margin: 0 0 1.1rem;
    color: var(--tinte-leise);
}

.pfad a {
    text-decoration: none;
}

.seitenkopf h1 {
    margin: 0;
    font-size: clamp(3rem * var(--titel-faktor, 1), 10vw * var(--titel-faktor-vw, 1), 8rem * var(--titel-faktor, 1));
    font-weight: var(--titel-gewicht, 820);
    font-stretch: 125%;
    line-height: 0.86;
    letter-spacing: -0.035em;
}

.kapitel.seite {
    display: grid;
    gap: 2rem 3rem;
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 900px) {
    .kapitel.seite:has(figure) {
        grid-template-columns: 1fr 1.1fr;
        align-items: start;
    }

    /* Vom Kunden bestimmt (image_position, 30.10.2026): Bild rechts. */
    .kapitel.seite.bild-rechts:has(figure) {
        grid-template-columns: 1.1fr 1fr;
    }

    .kapitel.seite.bild-rechts > figure {
        order: 2;
    }
}

.kapitel-text {
    max-width: 62ch;
}

.kapitel-text p {
    margin: 0 0 1rem;
}

.kapitel-text p:first-child {
    font-size: 1.2rem;
    font-weight: 500;
}

/* Weiter zur naechsten Unterseite: ein Band in der Flut. */
.weiter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(3rem, 7vw, 5rem);
    padding: 1.6rem 1.5rem;
    background: var(--flut);
    color: var(--papier);
    text-decoration: none;
}

.weiter small {
    display: block;
    color: var(--akzent-hell);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.weiter strong {
    font-size: clamp(1.8rem * var(--titel-faktor, 1), 4vw * var(--titel-faktor-vw, 1), 3rem * var(--titel-faktor, 1));
    font-style: var(--titel-stil, normal);
    font-weight: var(--titel-gewicht, 800);
    font-stretch: 115%;
    letter-spacing: -0.02em;
}

.weiter .pfeil {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--akzent-hell);
}

/* Die Klassen von Auftritt, die Unterseite und Rechtsseite teilen. */
.versatz img {
    width: 100%;
}

/* ── Zeiten und Kontakt in der Flut ────────────────────────────────────── */

.nachtband {
    padding-block: clamp(3.5rem, 8vw, 6rem);
    background: var(--flut);
    color: var(--papier);
}

.nachtband .innen {
    display: grid;
    gap: 3rem;
}

@media (min-width: 900px) {
    .nachtband .innen {
        grid-template-columns: 1fr 1fr;
    }
}

.nachtband h2 {
    margin: 0 0 1.2rem;
    font-size: clamp(2rem * var(--titel-faktor, 1), 3.8vw * var(--titel-faktor-vw, 1), 3rem * var(--titel-faktor, 1));
    font-stretch: 118%;
}

.zeiten {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.zeiten td {
    padding: 0.6rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--papier) 25%, transparent);
    font-weight: 500;
}

.zeiten td:last-child {
    text-align: right;
    font-weight: 650;
}

.zeiten tr.heute td {
    color: var(--akzent-hell);
    font-weight: 800;
}

.nachtband .fussnote {
    margin: 1rem 0 0;
    color: color-mix(in srgb, var(--papier) 75%, transparent);
    font-size: 0.93rem;
}

.telefon {
    display: inline-block;
    margin: 0 0 0.8rem;
    padding-bottom: 0.1rem;
    border-bottom: 4px solid var(--akzent-hell);
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    font-weight: 800;
    font-stretch: 105%;
    line-height: 1.1;
    text-decoration: none;
}

.nachtband .kontakt-zeilen {
    margin: 0 0 1.4rem;
    color: color-mix(in srgb, var(--papier) 80%, transparent);
}

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.7rem 1.5rem;
    border: 2px solid currentColor;
    font-size: 0.82rem;
    font-weight: 800;
    font-stretch: 85%;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}

.knopf-voll {
    border-color: var(--akzent-hell);
    background: var(--akzent-hell);
    color: var(--flut);
}

.knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.netze {
    display: flex;
    gap: 1.25rem;
    margin-top: 1.4rem;
}

.netze a {
    color: var(--akzent-hell);
    font-weight: 700;
}

/* ── Fuss und Leiste auf dem Telefon ───────────────────────────────────── */

.fuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem 1.5rem;
    padding: 2rem max(1.25rem, calc((100% - var(--breite)) / 2 + 1.25rem));
    background: var(--papier-tief);
    color: var(--tinte-leise);
    font-size: 0.88rem;
}

.fuss p {
    margin: 0;
}

/* Impressum, Datenschutz, AGB als Verweise im Fuss. */
.fuss .rechtliches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
}

.fuss .rechtliches a[aria-current] {
    color: var(--tinte);
}

.anrufleiste {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--flut);
    color: var(--papier);
    padding-bottom: env(safe-area-inset-bottom);
}

.anrufleiste a {
    padding: 1rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.anrufleiste a.haupt {
    background: var(--akzent-hell);
    color: var(--flut);
}

@media (max-width: 899px) {
    body {
        padding-bottom: 3.4rem;
    }
}

@media (min-width: 900px) {
    .anrufleiste {
        display: none;
    }
}

[hidden] {
    display: none !important;
}

/* ── Kontaktformular (K12): im Nachtband ueber beide Spalten ───────────── */

.nacht-formular {
    padding-top: 2.5rem;
    border-top: 1px solid color-mix(in srgb, var(--papier) 25%, transparent);
}

@media (min-width: 900px) {
    .nacht-formular {
        grid-column: 1 / -1;
    }
}

.nacht-formular[hidden],
.meldung {
    display: none;
}

.formular {
    display: grid;
    gap: 1.1rem;
}

@media (min-width: 700px) {
    .formular {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .formular .breit {
        grid-column: 1 / -1;
    }
}

.formular .feld span {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.formular .feld small {
    color: color-mix(in srgb, var(--papier) 70%, transparent);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.formular input,
.formular textarea {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 2px solid color-mix(in srgb, var(--papier) 35%, transparent);
    background: color-mix(in srgb, var(--papier) 7%, transparent);
    color: var(--papier);
    font: inherit;
}

.formular textarea {
    min-height: 9rem;
    resize: vertical;
}

.formular input:focus,
.formular textarea:focus {
    border-color: var(--akzent-hell);
    outline: 2px solid var(--akzent-hell);
    outline-offset: 1px;
}

.formular .knopf {
    font-family: inherit;
    cursor: pointer;
}

.formular .knopf:disabled {
    border-color: color-mix(in srgb, var(--papier) 35%, transparent);
    background: transparent;
    color: color-mix(in srgb, var(--papier) 60%, transparent);
    cursor: not-allowed;
}

.absenden {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.2rem;
}

.hinweis-klein {
    margin: 0;
    color: color-mix(in srgb, var(--papier) 75%, transparent);
    font-size: 0.9rem;
}

.hinweis-klein a {
    color: var(--papier);
}

.meldung {
    scroll-margin-top: 6rem;
}

/* Fuer Menschen unsichtbar, fuer Automaten ein Feld wie jedes andere. */
.lockfeld {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.meldung:target {
    display: block;
    margin: 0 0 1.2rem;
    padding: 0.9rem 1.1rem;
    border-left: 5px solid var(--akzent-hell);
    background: color-mix(in srgb, var(--papier) 10%, transparent);
}

.meldung-gut:target ~ .formular {
    display: none;
}

.meldung-fehler:target {
    border-left-color: #ff9b8f;
}

.meldung a {
    color: var(--akzent-hell);
}

/* ── Rechtsseiten: eine Lesespalte ─────────────────────────────────────── */

.rechtstext {
    max-width: 44rem;
    padding-bottom: 3rem;
}

.rechtstext h2 {
    margin: 2rem 0 0.5rem;
    font-size: calc(1.2rem * var(--titel-faktor, 1));
    font-stretch: 105%;
}

.rechtstext p {
    margin: 0 0 1rem;
}

.rechtstext .platzhalter {
    padding: 0.8rem 1rem;
    border: 1px dashed var(--linie);
    color: var(--tinte-leise);
}

.rechtstext .pdf {
    font-weight: 700;
}

/* Die AGB des Kunden bringen Zwischenueberschriften, Listen und Tabellen
   mit (AgbBereiniger). Eine breite Tabelle scrollt fuer sich, die Seite
   nicht. */
.rechtstext h3,
.rechtstext h4 {
    margin: 1.5rem 0 0.4rem;
    font-size: calc(1rem * var(--titel-faktor, 1));
}

.rechtstext ul,
.rechtstext ol {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.rechtstext li {
    margin-bottom: 0.3rem;
}

.rechtstext table {
    display: block;
    max-width: 100%;
    margin: 0 0 1rem;
    overflow-x: auto;
    border-collapse: collapse;
}

.rechtstext th,
.rechtstext td {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--linie);
    text-align: left;
    vertical-align: top;
}

.rechtstext a {
    overflow-wrap: anywhere;
}

/* ── Logo, Menue ab sechs Unterseiten ──────────────────────────────────── */

/* Mit Logo steht das Logo statt des Namens, so hoch wie die Kopfzeile es
   zulaesst. */
.marke img {
    width: auto;
    max-width: min(32rem, 55vw);
    max-height: 7.2rem;
    object-fit: contain;
}

/* Logo doppelt so gross wie bis 10.11.2026 (Wunsch ChiefDev): am Rechner
   7,2rem hoch und bis 32rem breit, am Handy 5,4rem hoch und so breit, dass
   9rem fuer Menueknopf und Abstaende bleiben (sonst wuchs ein breites Logo am
   Handy kaum). Eine kleine Datei bleibt in ihrer eigenen Groesse (max-*, kein
   Hochrechnen), damit sie scharf bleibt. */
@media (max-width: 699px) {
    .marke img {
        max-width: min(32rem, calc(100vw - 9rem));
        max-height: 5.4rem;
    }
}

@media (min-width: 900px) {
    .kopf--aufklappen .navi,
    .kopf--aufklappen .kopf-telefon {
        display: none;
    }

    .kopf--aufklappen .menue {
        display: block;
    }
}

/* ── Google-Karte: nur auf der Startseite, vor dem Formular ────────────── */

.nacht-karte {
    padding-top: 2.5rem;
    border-top: 1px solid color-mix(in srgb, var(--papier) 25%, transparent);
}

@media (min-width: 900px) {
    .nacht-karte {
        grid-column: 1 / -1;
    }
}

.nacht-karte[hidden] {
    display: none;
}

.karte-flaeche {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.9rem;
    min-height: 20rem;
    padding: 1.5rem;
    border: 2px solid color-mix(in srgb, var(--papier) 25%, transparent);
    background: color-mix(in srgb, var(--papier) 6%, transparent);
    text-align: center;
}

.karte-flaeche .hinweis-klein {
    max-width: 30rem;
    margin: 0;
}

.karte-adresse {
    margin: 0;
    font-weight: 700;
}

.karte-flaeche.geladen {
    display: block;
    padding: 0;
}

.karte-flaeche iframe {
    display: block;
    width: 100%;
    height: 24rem;
    border: 0;
}

/* Auszeichnung in den Texten (seit 24.10.2026): Links, Knopfzeile, Aufzaehlung. */
.text a,
.kapitel-text a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--akzent);
    text-underline-offset: 0.2em;
}

/* Die ruhige Aufzaehlung fuer Saetze und Nummern (die plakative .liste
   bleibt den Stichworten); ein Zwischentitel ist eine Zeile ganz in Fett. */
.text .aufzaehlung,
.kapitel-text .aufzaehlung {
    margin: 0 0 1.1rem;
    padding-left: 1.4rem;
}

.text .aufzaehlung li,
.kapitel-text .aufzaehlung li {
    margin: 0 0 0.45rem;
    font-weight: 500;
}

.text .aufzaehlung li::marker,
.kapitel-text .aufzaehlung li::marker {
    color: var(--akzent);
    font-weight: 800;
}

/* Die Erlaeuterung unter einem Listenpunkt (31.10.2026): eine Zeile ohne
   Zeichen direkt unter dem Punkt, in Textgroesse und etwas leiser — auf
   Papier wie auf der Flut. */
.erlaeuterung {
    display: block;
    margin-top: 0.2rem;
    color: color-mix(in srgb, currentColor 78%, transparent);
    font-weight: var(--text-gewicht, normal);
}

.liste .erlaeuterung {
    text-indent: 0;
    font-size: 1.0625rem;
    font-stretch: 100%;
    letter-spacing: normal;
    line-height: 1.5;
}

.text .zwischentitel,
.kapitel-text .zwischentitel {
    margin: 1.4rem 0 0.4rem;
    font-size: calc(1.12em * var(--titel-faktor, 1));
    font-stretch: 110%;
    letter-spacing: 0.01em;
}

.knopf-zeile {
    margin-top: 1.3rem;
}

.knopf-zeile a {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    border: 3px solid var(--tinte);
    background: var(--tinte);
    color: var(--papier, #fff);
    font-weight: 800;
    font-stretch: 110%;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
}

.knopf-zeile a:hover {
    background: transparent;
    color: var(--tinte);
}

/* ── Text neben einem Bild-Band (Entscheid ChiefDev 09.11.2026) ──────────

   Unter oder ueber einem breiten Bild ist die Breite frei; die Lesespalte
   liess sie halb leer, und grosse Listenpunkte brachen um. Welche Form gilt,
   entscheidet der Generator je Block (ContentSection::bandsatz):
   band-liste waechst bis zum laengsten Listenpunkt — Absaetze und
   Erlaeuterungen laufen mit, bestimmen die Breite aber nicht (contain);
   band-spalten setzt einen kurzen Fliesstext in zwei Spalten. Unter 900px
   bleibt alles eine Spalte. */
@media (min-width: 900px) {
    .mit-band .band-liste {
        width: fit-content;
        min-width: min(62ch, 100%);
        max-width: 100%;
    }

    .band-liste > h2,
    .band-liste p,
    .band-liste .erlaeuterung,
    .band-liste .aufzaehlung {
        contain: inline-size;
    }

    .mit-band .band-spalten {
        max-width: none;
        column-count: 2;
        column-gap: clamp(2rem, 4vw, 3.5rem);
        orphans: 2;
        widows: 2;
    }

    .band-spalten > h2 {
        column-span: all;
    }

    .band-spalten .zwischentitel {
        break-after: avoid;
    }

    .band-spalten li {
        break-inside: avoid;
    }
}