/* ===========================================================================
   EIN ABSCHNITT MIT BILD.

   Diese Regeln stehen EINMAL und gelten für alle acht Vorlagen. Sie werden
   vor das Stylesheet der Vorlage gesetzt (ThemeRenderer::stylesheet), damit
   jede Vorlage sie überschreiben kann, ohne sie kopieren zu müssen.

   WAS HIER GEREGELT WIRD UND WAS NICHT. Hier steht, wie groß ein Bild sein
   darf, damit es GANZ sichtbar bleibt — das ist Statik, keine Gestaltung,
   und acht Kopien davon liefen auseinander. Genau das war der Befund vom
   22.09.2026: die Vorlagen hatten siebzehn verschiedene Bildrahmen, und was
   nicht hineinpasste, schnitt object-fit weg.

   Alles andere bleibt der Vorlage: Schriften, Farben, Zähler, Bänder,
   Listenpunkte. Ein Abschnitt OHNE Bild wird hier gar nicht angefasst — er
   sieht aus wie eh und je, weil die Vorlage ihn wie eh und je setzt.

   DIE ZWEI KLASSEN .block.abschnitt sind Absicht: die Vorlagen setzen .block
   auf ein eigenes Raster (Kontor etwa Überschrift links schmal, Text rechts
   breit), und ein Abschnitt mit Bild braucht seine eigene Aufteilung. Zwei
   Klassen schlagen eine, ganz ohne !important und unabhängig davon, in
   welcher Reihenfolge die Stylesheets stehen.

   DIE REGEL: nie beschnitten. Kein aspect-ratio, kein object-fit: cover.
   ========================================================================= */

.block.abschnitt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.25rem, 3.5vw, 2.75rem);
}

.abschnitt-bild {
    margin: 0;
    /* --bildanteil setzt der Baustein aus der Bildform: 60 %, 50 %, 34 %.
       flex-basis statt width, damit die Zeile auf schmalen Schirmen
       umbricht und beides untereinander steht. */
    flex: 1 1 var(--bildanteil, 50%);
    min-width: min(100%, 15rem);
}

.abschnitt-text {
    flex: 1 1 calc(100% - var(--bildanteil, 50%) - 3rem);
    min-width: min(100%, 15rem);
}

/* Im Quelltext steht seit dem 22.09.2026 erst der Text, dann das Bild
   (Entscheid ChiefDev): auf dem Telefon soll die Überschrift oben stehen und
   nicht ein Foto, zu dem man die Überschrift noch nicht gelesen hat.

   Damit liegt das Bild von selbst RECHTS. Umgestellt wird deshalb der
   umgekehrte Fall — und nur auf dem großen Schirm, wo es überhaupt zwei
   Spalten gibt. order statt zweier Auszeichnungen: sonst stünde derselbe
   Abschnitt zweimal im Markup. */
@media (min-width: 48rem) {
    .abschnitt:not(.abschnitt--rechts) .abschnitt-bild {
        order: -1;
    }
}

/* --- Volles Band ------------------------------------------------------- */

/* Ein Bild breiter als 2:1 trägt neben einem Text nichts mehr. Es bekommt
   die ganze Zeile, der Text steht darunter.

   KEIN AUSBRUCH AUS DEM SEITENRAND MEHR (Befund ChiefDev, 22.09.2026). Hier
   stand margin-inline: calc(var(--rand) * -1), damit das Band über die volle
   Fensterbreite läuft — zusammen mit max-width: none. Bei einem Bild, das
   schmaler ist als das Fenster, ergab das genau das Gegenteil: es klebte am
   linken Rand und ließ rechts ein Drittel leer stehen. Genau der Fall aus
   seinem Beispiel: eine 1280 Punkte breite Ablaufgrafik in einem Kasten von
   1970.

   Jetzt füllt es die Zeile, solange es breit genug ist, und sitzt mittig,
   sobald es das nicht ist. Beides macht dieselbe Regel: margin-inline: auto
   greift erst, wenn max-width wirklich klemmt. */
.block.abschnitt--band {
    display: block;
}

/* Im Band steht das Bild jetzt UNTER dem Text, nicht darüber — deshalb
   margin-top und nicht mehr margin-bottom. */
.abschnitt--band .abschnitt-bild {
    margin-top: clamp(1.25rem, 3.5vw, 2.25rem);
}

/* --- Das Bild selbst ---------------------------------------------------- */

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

/* Nie größer als die Datei selbst: hochskaliert wird ein Bild weich, und
   weich ist schlimmer als klein. --eigenbreite setzt der Baustein aus den
   Maßen, die im Profil stehen.

   UND DANN MITTIG (Entscheid ChiefDev, 22.09.2026): ein Bild, das schmaler
   ist als seine Spalte, klebte bisher am linken Rand und ließ rechts daneben
   eine Lücke stehen — neben einem Textblock sieht das nach Versehen aus,
   nicht nach Absicht. margin-inline: auto greift nur, wenn es wirklich
   schmaler ist; füllt das Bild die Spalte, ändert sich nichts. */
.abschnitt-bild {
    max-width: var(--eigenbreite, none);
    margin-inline: auto;
}

/* ERBT DIE FARBE, statt --tinte-leise zu nehmen: auf einem Band in der Flut
   steht die Unterschrift sonst dunkelgrau auf Dunkelgrün und ist nicht zu
   lesen (gemessen 22.09.2026 an Kontor, 1,4:1). inherit nimmt, was das Band
   selbst gesetzt hat, und die Deckkraft macht daraus eine Nebenzeile. */
.abschnitt-bildunterschrift {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: inherit;
    opacity: 0.72;
}

/* Der Textteil führt innen dieselben Abstände wie sonst ein Block; die
   Vorlage setzt Überschrift, Absätze und Liste darin unverändert. */
.abschnitt-text > :first-child {
    margin-top: 0;
}

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

/*
| Kontor — "Klar und sachlich"
|
| Neue Sachlichkeit: strenges Spaltenraster, alles linksbündig, Haarlinien
| statt Kästen. Die Daten SIND der Inhalt — Öffnungszeiten, Preise und
| Rufnummern stehen in Ziffern mit fester Laufweite, wie in einem Kursblatt.
|
| Das ist die direkte Antwort auf "sachlich informativ". Wo Anschlag mit
| Größe arbeitet, arbeitet Kontor mit Ordnung.
|
| Zwei Schriften: Public Sans für alles, IBM Plex Mono für jede Zahl, die
| man vergleichen können muss. Beide liegen als Datei daneben.
*/

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

@font-face {
    font-family: 'Plex Mono';
    src: url('fonts/plex-mono-latin.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

/* Die Vorgaben der Vorlage; die Farbwelt des Kunden und der Akzent seiner
   Branche überschreiben sie im <head>. Hier: Wolkenweiß, Tiefgrau, EIN
   gesättigter Ton — und der ausschließlich für Links und den Anrufblock. */
:root {
    --papier: #fbfaf8;
    --tinte: #16181a;
    --tinte-leise: #5f656b;
    --linie: #d3d5d6;
    --flut: #101315;
    --akzent: #1b4f9c;
    --akzent-hell: #8ab4e8;
    --offen: #57b98a;

    /* Der Punkt der Statuszeile auf der Flut. Seit dem 21.09.2026 ein
       eigener Ton: ein einziger musste vorher gleichzeitig auf fast weissem
       Papier und auf der Flut bestehen, und das zwang JEDE Farbwelt zu einem
       nahezu schwarzen Band. Siehe Farbwelt.php. Der Rueckfall hier ist
       derselbe Wert wie --offen — ohne gewaehlte Farbwelt aendert sich
       nichts. */
    --offen-flut: #57b98a;
    --rand: clamp(1.25rem, 5vw, 5rem);
    --gitter: minmax(0, 11rem) minmax(0, 1fr);
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: 'Public Sans', system-ui, sans-serif;
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    line-height: 1.6;
    padding-bottom: env(safe-area-inset-bottom);
}

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 3px;
}

/* Monospace NUR dort, wo Zahlen untereinander stehen und verglichen werden
   — in der Wochentabelle. Eine Rufnummer mit Leerzeichen zerfaellt darin in
   drei Bloecke; sie bekommt Tabellenziffern in der Textschrift. */
.zahl {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
}

/* ── Kopf ────────────────────────────────────────────────────────────── */

.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding: 1.1rem var(--rand);
    border-bottom: 1px solid var(--linie);
}

.wortmarke {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.wortmarke img {
    display: block;
    height: 28px;
    width: auto;
}

.sprungmarken {
    display: flex;
    gap: clamp(0.9rem, 2.5vw, 1.75rem);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.sprungmarken a {
    text-decoration: none;
    color: var(--tinte-leise);
}

.sprungmarken a:hover {
    color: var(--akzent);
}

/* ── Der Kopfsatz ────────────────────────────────────────────────────── */

/* Kein Plakat, sondern ein Briefkopf: Branche, Name, ein Satz. Die Größe
   bleibt beherrscht — die Wirkung entsteht durch Weißraum und Kante. */
.plakat {
    padding: clamp(2rem, 6vw, 5rem) var(--rand) clamp(1.5rem, 4vw, 3rem);
    display: grid;
    gap: 0 clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
    .plakat {
        grid-template-columns: var(--gitter);
    }
}

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

@media (min-width: 52rem) {
    .branche {
        grid-column: 1;
        grid-row: 1;
        margin-top: 0.75rem;
    }

    .plakat .name,
    .plakat .claim {
        grid-column: 2;
    }
}

.name {
    margin: 0;
    font-size: clamp(2.4rem, 1.6rem + 3.6vw, 5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.claim {
    margin: clamp(0.75rem, 2vw, 1.25rem) 0 0;
    max-width: 46ch;
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
    font-weight: 400;
    line-height: 1.45;
    color: var(--tinte-leise);
}

/* ── Kontaktband ─────────────────────────────────────────────────────── */

.kontaktband {
    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
    padding: clamp(1.25rem, 3vw, 2rem) var(--rand);
}

.kontaktband-innen {
    display: grid;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    grid-template-columns: 1fr;
    align-items: baseline;
}

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

.anrufen {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--akzent);
    font-weight: 700;
    font-size: clamp(1.35rem, 1.05rem + 1.2vw, 2rem);
}

.anrufen .vorsatz {
    font-family: 'Public Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tinte-leise);
}

.status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    color: var(--tinte-leise);
}

.status[hidden] {
    display: none;
}

.punkt {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--tinte-leise);
    flex: none;
}

.status[data-offen='ja'] .punkt {
    background: #1f7a4d;
}

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

/* ── Abschnitte im Raster ────────────────────────────────────────────── */

/* Die Überschrift steht LINKS in der schmalen Spalte, der Inhalt rechts.
   Dadurch entsteht eine durchgehende Kante über die ganze Seite — das ist
   die Ordnung, von der diese Vorlage lebt. */
.block {
    display: grid;
    gap: 0.75rem clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: 1fr;
    padding: clamp(2rem, 5vw, 3.5rem) var(--rand);
    border-bottom: 1px solid var(--linie);
}

@media (min-width: 52rem) {
    .block {
        grid-template-columns: var(--gitter);
    }
}

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

.block-kopf {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0;
}

.zaehler {
    font-family: 'Plex Mono', monospace;
    font-size: 0.75rem;
    color: var(--akzent);
}

.block--flut .zaehler {
    color: var(--akzent-hell);
}

h2 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
}

.text {
    max-width: 68ch;
}

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

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

/* Leistungen als Zweispalter mit Haarlinie — eine Liste, keine Kacheln. */
.leistungen {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: clamp(1.5rem, 4vw, 3rem);
}

@media (max-width: 38rem) {
    .leistungen {
        columns: 1;
    }
}

.leistungen li {
    break-inside: avoid;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--linie);
    font-size: 1.05rem;
}

.block--flut .leistungen li {
    border-bottom-color: rgb(251 250 248 / 0.18);
}

.leistungen .nr {
    font-family: 'Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--tinte-leise);
    flex: none;
}

.block--flut .leistungen .nr {
    color: var(--akzent-hell);
}

/* ── Bilder ──────────────────────────────────────────────────────────── */

/* Im Raster, nie randlos: ein Bild ist hier ein Beleg, kein Aufmacher. */
/* ── Das Plakatbild ──────────────────────────────────────────────────── */

/* Kontor ist ein Kontobuch: das Bild bekommt dieselbe Randspalte wie jeder
   Block und dieselbe Graustufe wie die Galerie — Farbe erst beim Hinsehen. */
.plakatbild {
    padding: 0 var(--rand);
    background: var(--papier);
}
.plakatbild img {
    /* NIE BESCHNITTEN (22.09.2026). Hier standen aspect-ratio und
       object-fit: cover — ein 3:1-Bild verlor darin die halbe Breite, samt
       der Schrift darin. Jetzt bestimmt das Bild seine Höhe selbst;
       max-height hält ein Hochformat davon ab, den ganzen Schirm zu füllen:
       es wird dann schmaler statt angeschnitten. */
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 72vh;
    margin-inline: auto;
    filter: grayscale(1) contrast(1.05);
    transition: filter 0.3s;
}
.plakatbild:hover img {
    filter: grayscale(0) contrast(1.05);
}

@media (max-width: 47.99rem) {
    .plakatbild {
        padding: 0;
    }

    .plakatbild img {
    /* NIE BESCHNITTEN (22.09.2026). Hier standen aspect-ratio und
       object-fit: cover — ein 3:1-Bild verlor darin die halbe Breite, samt
       der Schrift darin. Jetzt bestimmt das Bild seine Höhe selbst;
       max-height hält ein Hochformat davon ab, den ganzen Schirm zu füllen:
       es wird dann schmaler statt angeschnitten. */
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 72vh;
    margin-inline: auto;
}
}

.galerie {
    display: grid;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    margin: 0;
}

.galerie figure {
    margin: 0;
}

.galerie img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    transition: filter 0.2s;
}

.galerie a:hover img {
    filter: grayscale(0) contrast(1.05);
}

.galerie figcaption {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--tinte-leise);
}

.lupe {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    place-items: center;
    padding: 1.5rem;
    background: rgb(16 19 21 / 0.94);
}

.lupe:target {
    display: grid;
}

.lupe img {
    max-width: min(100%, 56rem);
    max-height: 88vh;
    width: auto;
}

.lupe .zu {
    position: absolute;
    inset: 0;
}

/* ── Öffnungszeiten als Kursblatt ────────────────────────────────────── */

.zeiten {
    width: 100%;
    max-width: 30rem;
    border-collapse: collapse;
}

.zeiten th,
.zeiten td {
    text-align: left;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--linie);
    font-weight: 400;
}

.zeiten td {
    text-align: right;
    font-family: 'Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}

.zeiten .zu {
    color: var(--tinte-leise);
    font-family: 'Public Sans', sans-serif;
}

.hinweis {
    margin: 0.85rem 0 0;
    max-width: 60ch;
    font-size: 0.9rem;
    color: var(--tinte-leise);
}

/* ── Kontakt ─────────────────────────────────────────────────────────── */

.kontaktgitter {
    display: grid;
    gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    margin: 0;
}

.kontaktgitter dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tinte-leise);
    margin-bottom: 0.3rem;
}

.block--flut .kontaktgitter dt {
    color: var(--akzent-hell);
}

.kontaktgitter dd {
    margin: 0;
    line-height: 1.5;
}

.netze {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.fuss {
    padding: clamp(1.25rem, 3vw, 2rem) var(--rand) clamp(5rem, 8vw, 2.5rem);
    font-size: 0.82rem;
    color: var(--tinte-leise);
}

.fuss summary {
    cursor: pointer;
    color: var(--tinte);
    font-weight: 600;
}

.fuss address {
    font-style: normal;
    margin-top: 0.6rem;
    line-height: 1.6;
}

/* ── Anrufleiste ─────────────────────────────────────────────────────── */

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

.anrufleiste a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.98rem;
}

.anrufleiste a + a {
    border-left: 1px solid rgb(251 250 248 / 0.2);
}

.anrufleiste .haupt {
    background: var(--akzent);
}

@media (min-width: 52rem) {
    .anrufleiste {
        display: none;
    }

    .fuss {
        padding-bottom: clamp(1.5rem, 4vw, 3rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

@media print {
    .sprungmarken,
    .anrufleiste,
    .lupe {
        display: none;
    }

    .block--flut {
        background: #fff;
        color: #000;
    }
}