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

/*
| Anschlag — "Groß und plakativ"
|
| Die Schrift IST das Bild. Der Betriebsname läuft über die volle Breite,
| Farbbänder gliedern die Seite, ein einziges Foto reicht — oder keines.
| Keine Karten, keine Rahmen, keine Schatten: Kontrast entsteht durch den
| Wechsel der Flächen.
|
| Eine Schrift, Archivo, variabel über Gewicht (100–900) UND Breite
| (62–125 %). Sie liegt als Datei daneben; nichts wird von fremden Servern
| geholt.
*/

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

/*
| Die Vorgaben der Vorlage. Sie gelten, solange der Kunde keine Farbwelt
| gewählt hat: wählt er eine, überschreibt Farbwelt die sechs Flächentöne im
| <head> und Branchenakzent die zwei Akzenttöne (Entscheid ChiefDev
| 20.09.2026). Hier: warmes Cremepapier, Espresso als Flächenfarbe, Petrol
| als einziger Signalton.
*/
:root {
    --papier: #f4f1e9;
    --tinte: #17130f;
    --tinte-leise: #6d6358;
    --flut: #17130f;
    --akzent: #0f4c5c;
    /* Derselbe Ton, aber hell genug fuer die dunkle Flaeche. Petrol auf
       Espresso kommt auf 1,94 — der Unterstrich unter der Telefonnummer
       waere damit praktisch unsichtbar und riss WCAG 1.4.11 (3:1 fuer
       Bedienelemente). Hier sind es 6,9. */
    /* Am 21.09.2026 aufgehellt: mit #5ea9bd (L 0,344) war dies der
       dunkelste helle Akzent von allen sechzehn — zwoelf Branchen und vier
       Vorlagen — und damit die Schranke, wie hell eine Flut ueberhaupt sein
       darf. Auf den neuen Farbwelten frisch und sonnig kam er auf 2,84 bzw.
       2,80 und riss WCAG 1.4.11. Jetzt liegt er mit L 0,431 im Bereich der
       Branchenakzente (dunkelster dort: #e0a276, L 0,430). */
    --akzent-hell: #74bacb;
    --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, 4vw, 4rem);
    --spalte: 68ch;
}

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

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

body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    /* Platz für die Anrufleiste am unteren Rand, nur auf dem Telefon. */
    padding-bottom: env(safe-area-inset-bottom);
}

a {
    color: inherit;
}

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

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

.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 1.25rem var(--rand);
}

.wortmarke {
    font-weight: 700;
    font-stretch: 78%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.9rem;
    text-decoration: none;
}

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

/* Sprungmarken statt Menü: drei Textlinks, kein Hamburger, nichts, was
   mitscrollt. Hilft beim Überfliegen und kostet nichts. */
.sprungmarken {
    display: flex;
    gap: clamp(0.9rem, 2.5vw, 1.75rem);
    font-size: 0.82rem;
    font-weight: 600;
    font-stretch: 80%;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sprungmarken a {
    text-decoration: none;
    padding: 0.35rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s;
}

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

/* ── Das Plakat ──────────────────────────────────────────────────────── */

.plakat {
    padding: clamp(1rem, 3vw, 2.5rem) var(--rand) clamp(1.5rem, 4vw, 3rem);
}

.branche {
    font-size: clamp(0.78rem, 0.7rem + 0.3vw, 0.95rem);
    font-weight: 600;
    font-stretch: 70%;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--tinte-leise);
    margin: 0 0 clamp(0.75rem, 2vw, 1.5rem);
}

/* Der Name füllt die Breite. Das ist der ganze Trick: bei 125 % Breite und
   Gewicht 800 braucht diese Seite kein Foto, um etwas herzumachen. */
.name {
    margin: 0;
    /* 15.5vw ist der Wunsch, nicht das Gesetz. Ein langer Name — "Restaurant
       Stubenrauch" — lief damit rechts aus dem Bild; CSS kann Text nicht
       messen, deshalb kommt die Zahl der Buchstaben des laengsten Wortes als
       --name-zeichen aus dem Gerueest (SiteViewModel::longestWord).

       0.78 ist die Dickte der Archivo bei 125 % Breite und Gewicht 800,
       bewusst grosszuegig: gemessen sind 0.66 bei "Restaurant" und 0.69 bei
       "Stubenrauch", ein Name aus lauter M und W liegt darueber. Lieber ein
       Grad kleiner als ein abgeschnittener Buchstabe. Der Umbruch darunter
       ist das Notventil fuer den Fall, dass es doch nicht reicht. */
    font-size: clamp(
        2.6rem,
        min(15.5vw, (100vw - 2 * var(--rand)) / (var(--name-zeichen, 9) * 0.78)),
        17rem
    );
    font-weight: 800;
    font-stretch: 125%;
    line-height: 0.82;
    letter-spacing: -0.03em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.claim {
    margin: clamp(1rem, 2.5vw, 1.75rem) 0 0;
    margin-inline-start: 0;
    max-width: 34ch;
    font-size: clamp(1.15rem, 1rem + 0.9vw, 1.9rem);
    font-weight: 500;
    font-stretch: 88%;
    line-height: 1.25;
    text-wrap: balance;
}

/* ── Das Plakatbild: eine Bahn ueber die ganze Breite ────────────────── */

/* Anschlag ist ein Plakat. Ein Plakat hat ein Motiv, und es ist so breit wie
   das Papier — kein Rand, kein Radius, keine Zierde. */
.plakatbild {
    margin: 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;
    filter: saturate(0.82) contrast(1.08);
}

@media (max-width: 47.99rem) {
    .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;
}
}

/* ── Das Kontaktband: alles Wichtige ohne einen Wischer ──────────────── */

.kontaktband {
    background: var(--flut);
    color: var(--papier);
    padding: clamp(1.5rem, 3.5vw, 2.5rem) var(--rand);
}

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

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

.anrufen {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    text-decoration: none;
    font-weight: 700;
    font-stretch: 105%;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
    letter-spacing: -0.015em;
    color: var(--papier);
    border-bottom: 3px solid var(--akzent-hell);
    padding-bottom: 0.15rem;
    transition: border-color 0.15s;
}

.anrufen:hover {
    border-bottom-color: var(--papier);
}

.anrufen .vorsatz {
    font-size: 0.72rem;
    font-weight: 600;
    font-stretch: 70%;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.6;
}

.status {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Die Statuszeile ist eine Zugabe: ohne JavaScript erscheint sie gar nicht,
   und es wird kein Platz dafür freigehalten — so springt nichts. Die
   Wochentabelle weiter unten steht immer im HTML. */
.status[hidden] {
    display: none;
}

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

.status[data-offen='ja'] .punkt {
    background: var(--offen-flut);
}

.anschrift {
    font-size: 0.95rem;
    line-height: 1.45;
    opacity: 0.85;
}

.anschrift a {
    color: inherit;
}

/* ── Abschnitte ──────────────────────────────────────────────────────── */

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

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

.block-kopf {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin: 0 0 clamp(1.25rem, 3vw, 2.25rem);
}

.zaehler {
    font-size: 0.78rem;
    font-weight: 700;
    font-stretch: 70%;
    letter-spacing: 0.2em;
    color: var(--akzent);
}

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

h2 {
    margin: 0;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
    font-weight: 700;
    font-stretch: 112%;
    line-height: 1;
    letter-spacing: -0.02em;
}

.text {
    max-width: var(--spalte);
}

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

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

/* Leistungen als nummerierte Liste in großer Schrift — die Aufzählung ist
   der Inhalt, nicht ein Kasten drumherum. */
.leistungen {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid currentColor;
}

.leistungen li {
    display: flex;
    align-items: baseline;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    padding: clamp(0.6rem, 1.5vw, 1rem) 0;
    border-bottom: 1px solid currentColor;
    font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.75rem);
    font-weight: 600;
    font-stretch: 100%;
    letter-spacing: -0.01em;
}

.leistungen .nr {
    font-size: 0.72rem;
    font-weight: 700;
    font-stretch: 70%;
    letter-spacing: 0.16em;
    color: var(--akzent);
    flex: none;
    min-width: 2ch;
}

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

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

/* Ein Regelwerk statt drei Schnappschüsse: festes Seitenverhältnis,
   einheitlicher Zuschnitt und derselbe Farbeingriff für alle. Damit wird aus
   zusammenhanglosem Material eine Serie. */
.galerie {
    display: grid;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    margin: 0;
}

.galerie figure {
    margin: 0;
}

.galerie a {
    display: block;
}

.galerie img {
    display: block;
    width: 100%;
    /* height: auto ist noetig, nicht Zierde: das height-Attribut am <img>
       steht fuer die Originaldatei und schlaegt sonst aspect-ratio — das
       Bild kaeme im Seitenverhaeltnis der Datei statt im Zuschnitt der
       Vorlage. Die Attribute bleiben trotzdem stehen, sie verhindern das
       Springen beim Laden. */
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: saturate(0.72) contrast(1.06);
    transition: filter 0.2s;
}

.galerie a:hover img {
    filter: saturate(1) contrast(1.06);
}

.galerie figcaption {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-stretch: 78%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinte-leise);
}

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

/* Vergrößern ohne eine Zeile JavaScript: :target. Klick öffnet, Klick
   daneben schließt, Escape geht über den Zurück-Knopf. */
.lupe {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    place-items: center;
    padding: 1.5rem;
    background: rgb(23 19 15 / 0.92);
}

.lupe:target {
    display: grid;
}

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

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

/* ── Öffnungszeiten ──────────────────────────────────────────────────── */

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

.zeiten th,
.zeiten td {
    text-align: left;
    padding: 0.55rem 0;
    border-bottom: 1px solid currentColor;
    font-weight: 500;
}

.zeiten td {
    text-align: right;
    font-weight: 600;
}

.zeiten tr:first-child th,
.zeiten tr:first-child td {
    border-top: 1px solid currentColor;
}

.zeiten .zu {
    opacity: 0.5;
    font-weight: 500;
}

.hinweis {
    margin: 1rem 0 0;
    max-width: var(--spalte);
    font-size: 0.95rem;
    opacity: 0.8;
}

/* ── Kontakt und Fuß ─────────────────────────────────────────────────── */

.kontaktgitter {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    max-width: 52rem;
}

.kontaktgitter dt {
    font-size: 0.75rem;
    font-weight: 700;
    font-stretch: 70%;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tinte-leise);
    margin-bottom: 0.4rem;
}

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

.kontaktgitter dd {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
}

.netze {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 0.25rem;
}

.netze a {
    font-weight: 600;
    text-underline-offset: 0.25em;
}

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

.fuss details {
    margin-top: 0.75rem;
    max-width: var(--spalte);
}

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

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

/* ── Anrufleiste am unteren Rand, nur auf dem Telefon ────────────────── */

/* Zwei Drittel der Besucher kommen vom Handy und wollen zwei Dinge:
   anrufen und hinfinden. Beides bleibt in Daumenreichweite. */
.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);
    box-shadow: 0 -1px 0 rgb(244 241 233 / 0.15);
}

.anrufleiste a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.25rem;
    text-decoration: none;
    font-weight: 700;
    font-stretch: 88%;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.anrufleiste a + a {
    border-left: 1px solid rgb(244 241 233 / 0.2);
}

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

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

    .fuss {
        padding-bottom: clamp(2rem, 5vw, 3.5rem);
    }
}

/* ── Rücksicht ───────────────────────────────────────────────────────── */

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

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

    body {
        background: #fff;
        color: #000;
    }

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

/* Auf breiten Schirmen bekommt der Zuspruch einen eigenen Einzug — sonst
   reiht sich alles an derselben Kante auf und die Seite wird monoton. */
@media (min-width: 58rem) {
    .claim {
        margin-inline-start: 52%;
        max-width: 30ch;
    }

    .zeiten {
        max-width: 40rem;
        font-size: 1.05rem;
    }
}