/*
 * Auftritt (Layout 2, Phase 2): kraeftig, redaktionell, mit Buehne.
 *
 * Uebernommen aus dem Scribble resources/scribbles/auftritt.css (v=21); die
 * Scribbles sind das Pflichtenheft. Fraunces fuer Ueberschriften, Hanken
 * Grotesk fuer den Text. Oben ein Band in der Flut der Farbwelt mit dem
 * Namen gross, das Kopfbild ragt ganz ueber die Kante. Die Unterseiten
 * stehen auf der Startseite als Verzeichnis mit Linien, nicht als Karten.
 * Bilder immer ganz, nie beschnitten.
 *
 * Gegenueber dem Scribble angepasst: 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.
 */

@font-face {
    font-family: 'Fraunces';
    src: url('fonts/fraunces-latin.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('fonts/hanken-latin.woff2') format('woff2-variations');
    font-weight: 100 900;
    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. Im Scribble war der helle Akzent aus dem
       dunklen gerechnet; die Branche liefert beide, und nur so haelt die
       Kontrastpruefung auf jeder Flut. */
    --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: 'Hanken Grotesk', system-ui, sans-serif;
    --schrift-titel: 'Fraunces', Georgia, serif;
    --schrift-name: var(--schrift-titel);
    --serif: 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.65;
    -webkit-font-smoothing: antialiased;
}

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,
.serif {
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-weight: 480;
}

/* Staerke und kursiv waehlt der Kunde fuer Ueberschriften, nicht fuer
   .serif (31.10.2026). */
h1,
h2,
h3 {
    font-style: var(--titel-stil, normal);
    font-weight: var(--titel-gewicht, 480);
}

h4 {
    font-style: var(--titel-stil, normal);
    font-weight: var(--titel-gewicht, bold);
}

/* ── Kopf auf der Flut ─────────────────────────────────────────────────── */

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

.kopf .innen {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 5.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--papier) 18%, transparent);
}

.marke {
    margin-right: auto;
    font-family: var(--schrift-name);
    font-size: 1.35rem;
    font-style: var(--name-stil, normal);
    font-weight: var(--name-gewicht, 560);
    text-decoration: none;
}

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

.navi a {
    color: color-mix(in srgb, var(--papier) 78%, transparent);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-decoration: none;
    text-transform: uppercase;
}

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

.kopf-telefon {
    display: none;
    color: var(--akzent-hell);
    font-weight: 650;
    text-decoration: none;
}

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

    .menue {
        display: none;
    }
}

.menue {
    position: relative;
}

.menue summary {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    list-style: none;
    text-transform: uppercase;
    cursor: pointer;
}

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

.menue nav {
    position: absolute;
    right: -1.25rem;
    top: calc(100% + 1.2rem);
    z-index: 20;
    display: grid;
    min-width: 16rem;
    padding: 0.5rem 1.4rem 1rem;
    background: var(--flut);
}

.menue nav a {
    padding: 0.7rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--papier) 18%, transparent);
    font-family: var(--serif);
    font-size: 1.2rem;
    text-decoration: none;
}

/* ── Buehne: der Name gross, das Bild ragt ueber die Kante ─────────────── */

.buehne {
    padding-block: clamp(3rem, 8vw, 6.5rem) clamp(8rem, 17vw, 13rem);
    background: var(--flut);
    color: var(--papier);
}

.branche {
    margin: 0 0 1.4rem;
    color: var(--akzent-hell);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Der Name auf der Flut, hoechstens zwei Zeilen: bei langen Namen wird die
   Zeile breiter und der Grad kleiner (--name-laenge aus dem Generator;
   seit 24.10.2026, Befund RUF). */
.buehne h1 {
    max-width: max(14ch, calc(var(--name-laenge, 19) * 0.55ch));
    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 - 3rem, 68rem) / (var(--name-laenge, 19) * 0.31))), min(8.5vw * var(--name-faktor-vw, 1), min(100vw - 3rem, 68rem) / (var(--name-laenge, 19) * 0.31)), 7rem * var(--name-faktor, 1));
    font-style: var(--name-stil, normal);
    font-weight: var(--name-gewicht, 430);
    line-height: 0.95;
    letter-spacing: -0.025em;
}

.buehne .leitsatz {
    max-width: 34rem;
    margin: 1.8rem 0 0;
    color: color-mix(in srgb, var(--papier) 84%, transparent);
    font-family: var(--serif);
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    font-style: italic;
    font-weight: 380;
    line-height: 1.4;
}

.buehne-bild {
    margin-top: calc(-1 * clamp(7rem, 15vw, 11.5rem));
}

/* Ganz, nie beschnitten: Quer- und Bandformate fuellen die Breite, ein
   quadratisches oder hohes Bild (buehne-bild--hoch) wird hoechstens so hoch
   wie der Bildschirm und steht dann mittig (Regel wie beim Bild-Band,
   09.11.2026; vorher schrumpfte auch ein breites Bild im niedrigen Fenster). */
.buehne-bild img {
    width: 100%;
    box-shadow: 0 40px 70px -30px rgb(0 0 0 / 0.55);
}

.buehne-bild--hoch img {
    width: auto;
    max-height: 82vh;
    margin: 0 auto;
}

/* ── Die Zeile mit dem Wichtigsten ─────────────────────────────────────── */

.eckdaten {
    display: grid;
    margin-block: clamp(2.5rem, 6vw, 4rem);
    border-top: 2px solid var(--tinte);
}

@media (min-width: 760px) {
    .eckdaten {
        grid-template-columns: repeat(3, 1fr);
    }
}

.eckdaten > div {
    padding: 1.1rem 1.25rem 1.1rem 0;
    border-bottom: 1px solid var(--linie);
}

@media (min-width: 760px) {
    .eckdaten > div + div {
        padding-left: 1.25rem;
        border-left: 1px solid var(--linie);
    }
}

.eckdaten small {
    display: block;
    color: var(--tinte-leise);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.eckdaten .wert {
    font-family: var(--serif);
    font-size: 1.45rem;
    text-decoration: none;
}

.status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

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

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

/* ── Verzeichnis der Unterseiten ───────────────────────────────────────── */

.verzeichnis-kopf {
    margin: clamp(2rem, 5vw, 3.5rem) 0 1rem;
    color: var(--tinte-leise);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.verzeichnis {
    margin: 0 0 clamp(3rem, 8vw, 6rem);
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--tinte);
}

.verzeichnis a {
    display: grid;
    gap: 0.3rem 2rem;
    align-items: baseline;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--linie);
    text-decoration: none;
    transition: padding 0.2s ease, color 0.2s ease;
}

@media (min-width: 760px) {
    .verzeichnis a {
        grid-template-columns: 1.1fr 1.6fr auto;
    }
}

.verzeichnis a:hover {
    padding-left: 0.75rem;
    color: var(--akzent);
}

.verzeichnis strong {
    font-family: var(--serif);
    font-size: clamp(1.6rem * var(--titel-faktor, 1), 3vw * var(--titel-faktor-vw, 1), 2.3rem * var(--titel-faktor, 1));
    font-style: var(--titel-stil, normal);
    font-weight: var(--titel-gewicht, 450);
    line-height: 1.1;
}

.verzeichnis span {
    color: var(--tinte-leise);
}

.verzeichnis .pfeil {
    font-family: var(--serif);
    font-size: 1.8rem;
    color: var(--akzent);
}

/* ── Kapitel: Ueberschrift links, Text rechts ──────────────────────────── */

.kapitel {
    display: grid;
    gap: 1.25rem 3rem;
    padding-block: clamp(3rem, 7vw, 5.5rem);
    border-top: 1px solid var(--linie);
}

@media (min-width: 900px) {
    .kapitel {
        grid-template-columns: 5fr 7fr;
    }
}

.kapitel h2 {
    margin: 0;
    font-size: clamp(2.2rem * var(--titel-faktor, 1), 4.4vw * var(--titel-faktor-vw, 1), 3.6rem * var(--titel-faktor, 1));
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.kapitel h2::after {
    content: '';
    display: block;
    width: 3.5rem;
    height: 3px;
    margin-top: 1.1rem;
    background: var(--akzent);
}

/* Auf der Unterseite steht die Ueberschrift schon oben als Seitentitel.
   Das Bild nimmt deshalb die linke Spalte, der Text die rechte; ohne Bild
   steht der Text allein in einer Lesespalte. */
@media (min-width: 900px) {
    .kapitel.seite {
        grid-template-columns: 7fr 5fr;
        align-items: start;
    }
}

.kapitel.seite.ohne-bild {
    grid-template-columns: minmax(0, 46rem);
}

/* Vom Kunden bestimmt (image_position, 30.10.2026). Startseite: Bild links
   heisst unter der Ueberschrift, der Text daneben. Unterseite: Bild rechts
   tauscht die Spalten. */
@media (min-width: 900px) {
    .kapitel.bild-links {
        grid-template-rows: auto 1fr;
    }

    .kapitel.bild-links > .versatz {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
    }

    .kapitel.bild-links > .kapitel-text {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .kapitel.seite.bild-rechts {
        grid-template-columns: 5fr 7fr;
    }

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

.kapitel.seite .versatz {
    margin-top: 0;
}

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

.kapitel-text p:first-child {
    font-family: var(--serif);
    font-size: 1.3rem;
    line-height: 1.5;
}

/* Das Bild mit versetztem Farbschatten, ganz, nicht beschnitten. */
.versatz {
    position: relative;
    margin: 2rem 1.5rem 1.5rem 0;
}

.versatz::before {
    content: '';
    position: absolute;
    inset: 1.5rem -1.5rem -1.5rem 1.5rem;
    background: color-mix(in srgb, var(--akzent) 22%, var(--papier-tief));
}

.versatz img {
    position: relative;
    width: 100%;
}

/* 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;
}

/* Im Kapitel ueber beide Spalten; auf der Unterseite eine Spalte, das Band
   in voller Breite, der Text als Lesespalte darunter bzw. darueber. */
.kapitel > .bild-band {
    grid-column: 1 / -1;
}

/* Bild oben auf der Startseite (Befund ChiefDev 08.11.2026): Ueberschrift,
   Band, Text untereinander in einer Spalte, der Text als Lesespalte. */
@media (min-width: 900px) {
    .kapitel.band-oben {
        grid-template-columns: minmax(0, 1fr);
    }

    .kapitel.band-oben > .kapitel-text {
        max-width: 46rem;
    }
}

@media (min-width: 900px) {
    .kapitel.seite.mit-band {
        grid-template-columns: minmax(0, 1fr);
    }

    .kapitel.seite.mit-band > .kapitel-text {
        max-width: 46rem;
    }
}

.liste {
    columns: 2 14rem;
    column-gap: 2.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.liste li {
    break-inside: avoid;
    padding: 0.55rem 0 0.55rem 1.3rem;
    border-bottom: 1px solid var(--linie);
    position: relative;
}

.liste li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.15rem;
    width: 0.45rem;
    height: 0.45rem;
    background: var(--akzent);
}

/* ── Zeiten und Kontakt auf 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.6vw * var(--titel-faktor-vw, 1), 2.8rem * var(--titel-faktor, 1));
}

.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) 20%, transparent);
}

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

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

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

.telefon {
    display: block;
    margin: 0 0 0.6rem;
    font-family: var(--serif);
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    font-weight: 430;
    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: 1.5px solid currentColor;
    font-size: 0.82rem;
    font-weight: 700;
    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: 600;
}

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

.seitenkopf {
    padding-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);
}

.pfad {
    margin: 0 0 1.2rem;
    color: var(--tinte-leise);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pfad a {
    text-decoration: none;
}

.seitenkopf h1 {
    margin: 0;
    font-size: clamp(3rem * var(--titel-faktor, 1), 8vw * var(--titel-faktor-vw, 1), 6.4rem * var(--titel-faktor, 1));
    font-weight: var(--titel-gewicht, 430);
    line-height: 0.98;
    letter-spacing: -0.025em;
}

.weiter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(3rem, 7vw, 5rem);
    padding: 1.6rem 0;
    border-block: 1px solid var(--tinte);
    text-decoration: none;
}

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

.weiter strong {
    font-family: var(--serif);
    font-size: clamp(1.8rem * var(--titel-faktor, 1), 4vw * var(--titel-faktor-vw, 1), 2.8rem * var(--titel-faktor, 1));
    font-style: var(--titel-stil, normal);
    font-weight: var(--titel-gewicht, 450);
}

.weiter .pfeil {
    font-family: var(--serif);
    font-size: 2.4rem;
    color: var(--akzent);
}

/* ── Fuss und Leiste auf dem Telefon ───────────────────────────────────── */
/* Die Bausteine fuss und anrufleiste sind dieselben wie bei den alten
   Vorlagen; hier bekommen sie das Aussehen aus dem Scribble. */

.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 (Phase 2). */
.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: 700;
    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, Entscheide 17.10.2026) ──────────────────────
   Auf der Startseite im Nachtband, ueber beide Spalten; die Unterseiten
   zeigen das Nachtband ohne Formular. Danke und Fehler blendet :target
   ein, ohne Skript. */

.nacht-formular {
    padding-top: 2.5rem;
    border-top: 1px solid color-mix(in srgb, var(--papier) 20%, 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.12em;
    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: 1px 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);
}

/* Die Ruecksprung-Marke landet unter der Kopfleiste, nicht dahinter. */
.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: 4px 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);
}

/* Impressum, Datenschutz, AGB (Entscheid 14.10.2026): eigene Seiten mit
   einer Lesespalte, fuer Suchmaschinen gesperrt. */
.rechtstext {
    max-width: 44rem;
    padding-bottom: 3rem;
}

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

.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: 600;
}

/* 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;
}

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

/* ── Phase 2: Logo, Menue ab sechs Unterseiten ─────────────────────────── */

/* Mit Logo steht das Logo statt des Namens, so hoch wie die Kopfzeile es
   zulaesst. Auf der Flut bekommt es eine helle Unterlage, damit ein dunkles
   Logo nicht verschwindet. */
.marke img {
    width: auto;
    max-width: min(32rem, 55vw);
    max-height: 7.2rem;
    padding: 0.2rem;
    background: var(--papier);
    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 (Zusatzleistung karte, Entscheide 19.10.2026) ────────
   Aus dem Scribble auftritt.css. Nur auf der Startseite im Nachtband,
   ueber beide Spalten vor dem Formular. Bis zum Klick eine Flaeche mit
   Adresse und Knopf; erst der Klick laedt Google Maps. */

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

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

.karte-flaeche {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.9rem;
    min-height: 20rem;
    padding: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--papier) 20%, 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: 600;
}

.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. */
.kapitel-text a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--akzent-hell);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

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

.kapitel-text .aufzaehlung li {
    margin: 0 0 0.45rem;
}

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

/* Die Erlaeuterung unter einem Listenpunkt (31.10.2026): eine Zeile ohne
   Zeichen direkt unter dem Punkt, etwas leiser. */
.erlaeuterung {
    display: block;
    margin-top: 0.15rem;
    color: color-mix(in srgb, currentColor 78%, transparent);
    font-size: 0.95em;
}

.kapitel-text .zwischentitel {
    margin: 1.4rem 0 0.4rem;
    font-size: calc(1.1em * var(--titel-faktor, 1));
}

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

.knopf-zeile a {
    display: inline-block;
    padding: 0.75rem 1.6rem;
    border: 2px solid var(--akzent-hell);
    border-radius: 999px;
    color: inherit;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.knopf-zeile a:hover {
    background: var(--akzent-hell);
    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) {
    .kapitel.band-oben > .kapitel-text.band-liste,
    .kapitel.seite.mit-band > .kapitel-text.band-liste {
        width: fit-content;
        min-width: min(46rem, 100%);
        max-width: 100%;
    }

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

    /* Stichworte bleiben zweispaltig wie ueberall; Punkte mit Erlaeuterung
       stehen untereinander, sonst braeche der Titel in der halben Breite um.
       Bild unten auf der Startseite bleibt beim Raster Ueberschrift | Text. */
    .band-liste .liste:has(.erlaeuterung) {
        columns: auto;
    }

    .kapitel.band-oben > .kapitel-text.band-spalten,
    .kapitel.seite.mit-band > .kapitel-text.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;
    }
}