/* Grund-CSS aller Basis-Layouts (docs/gestaltung.md, Abschnitt 9). Die Layouts setzen nur die Variablen und ändern Kopf,
   Menü und Startseite in ihrer eigenen Datei. Später kommen die Werte der Gestaltung (Farben, Schriften, Ecken) als
   Variablen dazu. Systemschriften, keine fremden Quellen (CSP 'self'). */
:root {
    --grund: #ffffff;
    --text: #1f2937;
    --gedimmt: #5b6673;
    --akzent: #1f5fbf;
    --akzent-text: #ffffff;
    --kopf: #ffffff;
    --kopf-text: var(--text);
    --flaeche: #f4f6f9;
    --linie: #e3e7ed;
    --fuss: #f4f6f9;
    --fuss-text: #4b5563;
    --radius: 8px;
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --titelschrift: var(--schrift);
    /* Japanisch (lang="ja"): Schriften des Systems mit japanischen Zeichen; serifenbetonte Layouts setzen Mincho */
    --schrift-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
    --mincho-ja: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", serif;
    --groesse: 17px;
    --breite: 1120px;
    --abstand: 48px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--schrift); font-size: var(--groesse); line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--akzent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titelschrift); line-height: 1.2; margin: 1.2em 0 0.5em; }
/* Japanisch: lateinische Schriften der Layouts haben keine japanischen Zeichen, daher eigene Stapel; Umbruch an
   Wortgrenzen (auto-phrase, wo unterstützt) und nach den japanischen Regeln, keine künstliche Kursive */
html:lang(ja) body { font-family: var(--schrift-ja); line-break: strict; word-break: auto-phrase; }
html:lang(ja) :is(h1, h2, h3, .marke) { font-family: var(--titelschrift-ja, var(--schrift-ja)); line-height: 1.4; }
html:lang(ja) :is(em, i) { font-style: normal; font-weight: 600; }
h1 { font-size: 2.2em; margin-top: 0; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.15em; }
p { margin: 0 0 1em; }

.sprungmarke { position: absolute; left: -9999px; }
.sprungmarke:focus { left: 8px; top: 8px; z-index: 20; padding: 6px 12px; background: var(--akzent); color: var(--akzent-text); }
.rahmen { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }

/* Kontaktleiste über dem Kopf (theme.json: "kontaktleiste") */
.kontaktleiste { background: var(--akzent); color: var(--akzent-text); font-size: 0.88em; }
.kontaktleiste-zeile { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 24px; padding-top: 6px; padding-bottom: 6px; }
.kontaktleiste a { color: inherit; }

/* Kopf und Menü */
.kopf { background: var(--kopf); color: var(--kopf-text); border-bottom: 1px solid var(--linie); }
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; min-height: 72px; flex-wrap: wrap; }
.marke { color: inherit; text-decoration: none; font-family: var(--titelschrift); font-weight: 700; font-size: 1.3em; }
.marke-logo { display: inline-flex; align-items: center; }
.marke-logo img { display: block; width: auto; height: auto; max-height: 52px; max-width: min(260px, 60vw); }
.menue-knopf { display: none; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: var(--radius); padding: 6px 14px; cursor: pointer; }
.hauptmenue { display: flex; align-items: center; gap: 16px; }
.hauptmenue ul { list-style: none; margin: 0; padding: 0; }
.hauptmenue > ul { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.hauptmenue li { position: relative; }
.hauptmenue a { display: block; color: inherit; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.hauptmenue a:hover, .hauptmenue .aktiv > a { border-bottom-color: var(--akzent); }
/* Untermenü: beim Zeigen oder Fokus aufklappen */
.hauptmenue li ul { display: none; position: absolute; left: -12px; top: 100%; z-index: 10; min-width: 220px; padding: 8px 12px; background: var(--kopf); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.hauptmenue li:hover > ul, .hauptmenue li:focus-within > ul { display: block; }
.sprachen { display: flex; gap: 4px; }
.sprachen a { padding: 2px 8px; border: 1px solid var(--linie); border-radius: var(--radius); color: inherit; text-decoration: none; font-size: 0.85em; }
.sprachen a[aria-current] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }

/* Menü seitlich ("menue": "seite"): Spalte links, Unterpunkte immer offen */
.mit-seitenmenue { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.mit-seitenmenue .rahmen { max-width: none; padding: 0; }
.seitenmenue { position: sticky; top: 16px; padding: 24px 0; }
.seitenmenue .hauptmenue { display: block; }
.seitenmenue .hauptmenue > ul { display: block; }
.seitenmenue .hauptmenue a { padding: 6px 12px; border-bottom: 0; border-left: 3px solid transparent; border-radius: 0 var(--radius) var(--radius) 0; }
.seitenmenue .hauptmenue a:hover { background: var(--flaeche); }
.seitenmenue .hauptmenue .aktiv > a { border-left-color: var(--akzent); background: var(--flaeche); font-weight: 600; }
.seitenmenue .hauptmenue li ul { display: block; position: static; min-width: 0; border: 0; box-shadow: none; background: transparent; padding: 0 0 4px 14px; font-size: 0.94em; }
.seitenmenue .sprachen { margin: 16px 12px 0; }
.menue-seite .kopf .menue-knopf { display: none; }

/* Inhalt */
.inhalt { padding-bottom: var(--abstand); }
.seitentitel { padding-top: var(--abstand); }
.held { background: var(--flaeche); padding: calc(var(--abstand) * 1.4) 0; margin-bottom: var(--abstand); }
.held h1 { font-size: 2.6em; max-width: 18em; }
.held-text { font-size: 1.15em; color: var(--gedimmt); max-width: 36em; margin: 0; }
/* Kopfbild (theme.json "kopf": "kopfbild"): Bildstreifen, darunter der Text */
.held-mit-bild { padding-top: 0; }
.held-bild { display: block; width: 100%; height: 300px; object-fit: cover; margin-bottom: calc(var(--abstand) * 1.2); }
/* Vollbild ("kopf": "vollbild"): Text auf dem Bild */
.kopf-vollbild .held-mit-bild { position: relative; padding: 0; min-height: 440px; display: flex; align-items: flex-end; overflow: hidden; }
.kopf-vollbild .held-mit-bild .held-bild { position: absolute; inset: 0; height: 100%; margin: 0; }
.kopf-vollbild .held-mit-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.6)); }
.kopf-vollbild .held-mit-bild .held-inhalt { position: relative; z-index: 1; width: 100%; padding-top: 64px; padding-bottom: 48px; color: #fff; }
.kopf-vollbild .held-mit-bild .held-text { color: rgba(255, 255, 255, 0.92); }

/* Blöcke: Zeilen ergeben sich aus den Breiten */
.bloecke { display: flex; flex-wrap: wrap; gap: 0 32px; }
.block { flex: 1 1 100%; min-width: 0; margin-bottom: 24px; }
/* Block Bild ist ein <figure>: ohne den Rand des Browsers (40 px seitlich), sonst passen zwei Hälften nicht nebeneinander */
figure.block { margin: 0 0 24px; }
.breite-haelfte { flex-basis: calc(50% - 16px); }
.breite-drittel { flex-basis: calc(33.333% - 22px); }
.breite-zweidrittel { flex-basis: calc(66.666% - 11px); }
.breite-viertel { flex-basis: calc(25% - 24px); }
.block > :first-child { margin-top: 0; }
.block-bild img { border-radius: var(--radius); }
.block-bildmittext { display: flex; gap: 32px; align-items: flex-start; }
.block-bildmittext.bild-rechts { flex-direction: row-reverse; }
.block-bildmittext > img, .block-bildmittext > picture, .block-bildmittext > figure { flex: 0 0 45%; border-radius: var(--radius); }
.block-bildmittext .text { flex: 1; }

.knopf { display: inline-block; background: var(--akzent); color: var(--akzent-text); text-decoration: none; padding: 10px 22px; border-radius: var(--radius); font-weight: 600; }
.knopf:hover { filter: brightness(1.08); }

.downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.downloads a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--linie); border-radius: var(--radius); text-decoration: none; color: inherit; background: var(--grund); }
.downloads a:hover { border-color: var(--akzent); }
.downloads img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }

.eintraege { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.eintraege li { border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px; }
.eintraege h3 { margin-top: 8px; }
.eintraege h3 a { color: inherit; text-decoration: none; }
.eintrag-bild img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--radius) - 2px); }
.datum { color: var(--gedimmt); font-size: 0.9em; margin-bottom: 4px; }
.weiter { font-weight: 600; }
.news-detail { max-width: 760px; }
.news-bild { border-radius: var(--radius); margin-bottom: 16px; }

.kontaktdaten { font-style: normal; }
table { border-collapse: collapse; }
th, td { padding: 4px 16px 4px 0; text-align: left; vertical-align: top; }
.oeffnungszeiten th { font-weight: 600; }

.hinweis { margin: 16px 0; padding: 12px 16px; border-left: 4px solid var(--akzent); background: var(--flaeche); border-radius: 4px; }
.hinweis p { margin: 0; }
.hinweis-wichtig { border-left-color: #b3261e; background: #fdecea; }

.einbettung { border-radius: var(--radius); }
.einbettung-platzhalter button { font: inherit; background: var(--akzent); color: var(--akzent-text); border: 0; border-radius: var(--radius); padding: 8px 16px; cursor: pointer; }

.pflichtseite { padding-bottom: 8px; }

/* Fuß */
.fuss { background: var(--fuss); color: var(--fuss-text); border-top: 1px solid var(--linie); padding: 32px 0; font-size: 0.92em; }
.fuss a { color: inherit; }
.fuss-spalten { display: flex; flex-wrap: wrap; gap: 16px 48px; justify-content: space-between; align-items: flex-start; }
.fuss-kontakt { font-style: normal; }
.fuss-menue ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.fuss-copyright { margin: 0; }

/* Schmale Bildschirme: Menü einklappbar, Blöcke untereinander */
@media (max-width: 800px) {
    :root { --abstand: 32px; --groesse: 16px; }
    .menue-knopf { display: inline-block; flex: none; }
    .marke { flex: 1 1 0; min-width: 0; font-size: 1.15em; }
    .kopf-zeile { gap: 12px 16px; min-height: 60px; }
    .kontaktleiste-zeile span:nth-child(n+3) { display: none; } /* am Handy nur Telefon und Zeiten */
    .menue-seite .kopf .menue-knopf { display: inline-block; }
    .mit-seitenmenue { display: block; }
    .seitenmenue { position: static; padding: 0; }
    .js .seitenmenue .hauptmenue { display: none; }
    .js .seitenmenue .hauptmenue.offen { display: block; padding: 12px 0; border-bottom: 1px solid var(--linie); }
    .hauptmenue { flex-basis: 100%; flex-direction: column; align-items: flex-start; padding-bottom: 12px; }
    .js .hauptmenue { display: none; }
    .js .hauptmenue.offen { display: flex; }
    .hauptmenue > ul { flex-direction: column; gap: 0; width: 100%; }
    .hauptmenue li ul { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 0 16px; background: transparent; }
    .held h1 { font-size: 1.9em; }
    .held-bild { height: 200px; }
    .kopf-vollbild .held-mit-bild { min-height: 360px; }
    .kontaktleiste-zeile { justify-content: flex-start; }
    h1 { font-size: 1.8em; }
    .breite-haelfte, .breite-drittel, .breite-zweidrittel, .breite-viertel { flex-basis: 100%; }
    .block-bildmittext, .block-bildmittext.bild-rechts { flex-direction: column; }
    .block-bildmittext > img, .block-bildmittext > picture, .block-bildmittext > figure { flex-basis: auto; }
    .rahmen { padding: 0 16px; }
}
@media (min-width: 801px) and (max-width: 1023px) {
    .breite-drittel, .breite-viertel { flex-basis: calc(50% - 16px); }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}
@media print {
    .kopf .hauptmenue, .menue-knopf, .sprachen { display: none; }
}