/* bmd-auto: geschrieben vom Inhalts-Installer und bei dessen Updates erneuert (vorher wird eine .bak-Kopie angelegt).
   Eigene Änderungen? Dann diese Zeile mit "bmd-auto" löschen – danach bleibt die Datei unangetastet. */

:root { --bmd-navy: #263572; --bmd-gold: #e7cc8e; --bmd-cream: #f8efdc; }

/* Seitenhintergrund: warmes Creme wie auf der alten Website, ganz zart */
body.site {
  background:
    radial-gradient(1100px 700px at 0% 0%, color-mix(in srgb, var(--bmd-gold) 22%, transparent), transparent 65%),
    linear-gradient(180deg, #fffdf8, #fbf6ec);
  background-attachment: fixed;
}

/* Logo in der Kopfzeile etwas größer (Querformat) */
body.site .container-header .brand-logo img { height: clamp(46px, 6vw, 72px); width: auto; }

/* Adresszeile über dem Logo (Position topbar) */
.container-topbar { background: var(--imhof-primary); color: #fff; font-size: .85rem; }
.bmd-topbar { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; margin: 0; padding: .4rem 1rem; }
body.site .bmd-topbar a { color: #fff; text-decoration: none; }
body.site .bmd-topbar a:hover { text-decoration: underline; }
@media (max-width: 767.98px) { .bmd-topbar > span { display: none; } }

/* Module in "Unten A" untereinander statt nebeneinander */
body.site .container-bottom-a { display: block; }
body.site .container-bottom-a > * { margin-inline: 0; }

.bmd-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; color: var(--imhof-primary); margin-bottom: .5rem; }
.bmd-lead { font-size: 1.15rem; max-width: 65ch; }
.bmd-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
:is(h1, h2) small { display: block; font-size: .5em; letter-spacing: .14em; color: var(--imhof-primary); margin-top: .35rem; }

/* Startbereich: Text links, Vorteile-Kugel mit umlaufender Schrift rechts */
.bmd-hero { padding-block: clamp(2rem, 6vw, 4.5rem); background: linear-gradient(135deg, #fffaf0, var(--bmd-cream)); }
.bmd-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 899.98px) { .bmd-hero__grid { grid-template-columns: minmax(0, 1fr); } }
.bmd-hero :is(h1, h2) { font-size: clamp(1.25rem, 3.6vw, 2.6rem); line-height: 1.2; margin-top: 0; }
/* Lange Wörter wie „Personenbeförderungsschein“: auf dem Handy kleiner setzen; notfalls umbrechen statt die Seite zu verbreitern */
body.site :is(h1, h2, h3, .bmd-disc) { overflow-wrap: break-word; }
@media (max-width: 575.98px) {
  html body.site.site :is(h1, .h1) { font-size: clamp(1.05rem, 5vw, 2rem); letter-spacing: .02em; }
  html body.site.site :is(h2, .h2) { font-size: clamp(1.15rem, 5.4vw, 1.6rem); }
}
.bmd-ring { width: min(80vw, 400px); margin: 2.5rem auto; }
.bmd-ring .imhof-star { display: none; }
.bmd-ring .photo-ring__ring text { fill: var(--bmd-navy); letter-spacing: 4px; }
.bmd-disc {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .1rem;
  padding: 13%; border-radius: 50%; text-align: center; color: #3b2a14;
  font-size: clamp(.92rem, 2.6vw, 1.12rem); line-height: 1.3;
  background: radial-gradient(circle at 35% 28%, #fdf7e6 0%, #f2e4c3 42%, #e3c584 100%);
  box-shadow: 0 24px 40px -18px rgba(85, 19, 17, .45), inset 0 -10px 30px rgba(160, 120, 50, .18);
}
.bmd-disc p { margin: 0 0 .55rem; }
.bmd-disc strong { color: #2a1d0c; }
.bmd-disc__call { display: inline-block; margin-top: .2rem; padding: .45rem 1rem; border-radius: 999px; background: var(--imhof-primary); color: #fff !important; text-decoration: none; font-size: .9em; line-height: 1.25; transition: transform .25s ease, box-shadow .25s ease; }
.bmd-disc__call strong { color: #fff; font-size: 1.1em; letter-spacing: .03em; }
.bmd-disc__call:hover, .bmd-disc__call:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(85, 19, 17, .7); }

.bmd-section { margin: clamp(2.5rem, 6vw, 4.5rem) 0; }
.bmd-section > h2 { text-align: center; margin-bottom: 2rem; }

/* Leistungs-Karten mit den Fotos der alten Website */
.bmd-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.bmd-card { display: flex; flex-direction: column; overflow: hidden; padding: 0 !important; color: inherit; text-decoration: none; }
.bmd-card img { display: block; width: 100%; height: auto; aspect-ratio: 380 / 260; object-fit: cover; }
.bmd-card__body { padding: 1.1rem 1.25rem 1.4rem; }
.bmd-card__body strong { display: block; font-size: 1.1rem; color: var(--imhof-primary); margin-bottom: .35rem; }

.bmd-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin: clamp(1.5rem, 4vw, 3rem) 0; }
.bmd-split--top { align-items: start; }
.bmd-box { height: 100%; padding: 1.5rem; border-radius: var(--imhof-radius); background: #fff; border-top: 4px solid var(--bmd-gold); box-shadow: var(--imhof-shadow); }
.bmd-box h2, .bmd-box h3 { margin-top: 0; }
.bmd-photo { display: block; width: 100%; max-width: 480px; height: auto; border-radius: var(--imhof-radius); box-shadow: var(--imhof-shadow); }
.bmd-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; margin: 2rem 0; }
.bmd-photos img { width: 100%; height: auto; border-radius: var(--imhof-radius); box-shadow: var(--imhof-shadow); }
.bmd-qr { width: 180px; height: auto; border-radius: 8px; box-shadow: var(--imhof-shadow); }

.bmd-check { list-style: none; padding: 0; }
.bmd-check li { position: relative; padding-left: 1.8rem; margin: .45rem 0; }
.bmd-check li::before { content: "✓"; position: absolute; left: 0; color: var(--imhof-primary); font-weight: 700; }

.bmd-steps { counter-reset: bmd-step; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.bmd-steps li { counter-increment: bmd-step; padding: 1.25rem; border-radius: var(--imhof-radius); background: var(--imhof-light); }
.bmd-steps li::before { content: counter(bmd-step); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-bottom: .6rem; border-radius: 50%; background: var(--imhof-primary); color: #fff; font-weight: 700; }

/* Regionen: Kacheln mit den SEO-Unterseiten */
.bmd-regionen ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .9rem; }
.bmd-regionen a { display: block; height: 100%; padding: 1rem 1.2rem; border-radius: var(--imhof-radius); background: #fff; border-left: 4px solid var(--bmd-navy); box-shadow: var(--imhof-shadow); color: inherit; text-decoration: none; transition: transform .25s ease; }
.bmd-regionen a:hover { transform: translateY(-3px); }
.bmd-regionen a span { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--imhof-primary); font-weight: 700; margin-bottom: .25rem; }

.bmd-faq { max-width: 52rem; margin-inline: auto; }
.bmd-faq details { border-bottom: 1px solid color-mix(in srgb, var(--imhof-dark) 15%, transparent); padding: 1rem 0; }
.bmd-faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; }
.bmd-faq details p { margin: .75rem 0 0; }

/* Anfahrt und Karte (Google Maps erst nach Klick) */
.bmd-address { font-size: 1.1rem; }
.bmd-anfahrt h3 { font-size: 1.1rem; margin: 1.4rem 0 .4rem; }
.bmd-map { position: relative; min-height: 380px; border-radius: var(--imhof-radius); overflow: hidden; box-shadow: var(--imhof-shadow); background: repeating-linear-gradient(45deg, #f4ead3 0 14px, #efe2c4 14px 28px); }
.bmd-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bmd-map__consent { position: absolute; inset: 1.25rem; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem; border-radius: var(--imhof-radius); background: rgba(255, 255, 255, .94); text-align: center; font-size: .95rem; }
.bmd-map__title { font-size: 1.2rem; font-weight: 700; color: var(--imhof-primary); }
.bmd-map__consent label { font-size: .85rem; cursor: pointer; }

.bmd-footer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1.5rem; line-height: 1.7; }
.bmd-footer a, .bmd-credits a { color: inherit; }
.bmd-credits { margin-top: 2rem; font-size: .8rem; opacity: .75; }

/* v1.0.1: Kopf (Logo + Menü) und Fuß in warmem Grau-Beige statt Blau */
/* v1.0.4: deckend statt halbtransparent (gleicher Farbton wie vorher über dem Creme-Hintergrund) – Menü bleibt beim Scrollen gut lesbar */
body.site:is(.header-glass, .header-gradient) .container-header {
  background: #e7e0d6;
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--imhof-dark);
}
body.site .container-header .mod-menu > li > a { color: var(--imhof-dark); }
body.site .container-header .mod-menu > li > a:is(:hover, :focus-visible),
body.site .container-header .mod-menu > li.active > a { color: var(--imhof-primary); }
body.site .container-footer { background: rgb(217 210 199 / 60%); background-image: none; color: #2d2a26; }
body.site .container-footer a { color: var(--imhof-primary); }
body.site .container-footer a:hover { color: var(--bmd-navy); }

/* Lichtschein am Mauszeiger (ohne Funkeln): Gold, damit er auf Creme sichtbar bleibt */
.imhof-cursor-glow { background: radial-gradient(circle, color-mix(in srgb, var(--bmd-gold) 45%, transparent), transparent 65%); }

/* Menü-Schalter (Brötchen) mobil: rote Striche auf zartem Blau statt weiß */
body.site .imhof-burger { color: var(--imhof-primary); background: color-mix(in srgb, var(--bmd-navy) 14%, #fff); box-shadow: 0 2px 8px rgba(31, 45, 99, .18); }
body.site .imhof-nav-close { color: var(--imhof-primary); }

/* Sehtest-Tafel auf der P-Schein-Seite: Zeilen werden immer kleiner */
.bmd-sehtafel { container-type: inline-size; max-width: 46rem; margin: clamp(2rem, 6vw, 4rem) auto; padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 4vw, 3rem); background: #fff; border: 1px solid #ddd6c8; border-radius: 6px; box-shadow: 0 1px 0 #fff inset, 0 22px 40px -22px rgba(0, 0, 0, .35); text-align: center; }
.bmd-sehtafel__bitte { margin: 0 0 1.25rem; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--imhof-primary); font-weight: 600; }
.bmd-sehtafel__zeilen p { margin: 0 0 .9em; font-weight: 700; letter-spacing: .08em; line-height: 1.15; color: #111; }
body.site .bmd-sehtafel__zeilen a { color: inherit; text-decoration: none; }
.bmd-sehtafel .z1 { font-size: max(15px, 4.4cqi); }
.bmd-sehtafel .z2 { font-size: max(12px, 3.3cqi); }
.bmd-sehtafel .z3 { font-size: max(10px, 2.8cqi); }
.bmd-sehtafel .z4 { font-size: max(8px, 2.1cqi); }
.bmd-sehtafel .z5 { font-size: max(6px, 1.4cqi); letter-spacing: .3em; }
.bmd-sehtafel .z6 { font-size: 4px; letter-spacing: .3em; margin-bottom: 0; }
.bmd-sehtafel figcaption { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #eee6d6; font-size: .9rem; color: #555; }

/* v1.0.2: Kopf – Logo mittig und größer, darunter das Menü über die ganze Inhaltsbreite verteilt (ab 992 px) */
@media (min-width: 992px) {
  body.site .container-header > .grid-child:has(> .navbar-brand) { justify-content: center; }
  body.site .container-header .navbar-brand { margin-inline: auto; padding-block: 1.25rem .5rem; }
  body.site .container-header .brand-logo img { height: auto; max-height: 112px; }
  body.site .container-header .container-nav { padding-bottom: .35rem; }
  body.site .container-header .container-nav > .mod-menu {
    flex: 1 1 100%; display: flex; flex-direction: row !important; justify-content: space-between;
    margin: 0; padding: .5rem 0 0; border-top: 1px solid color-mix(in srgb, var(--bmd-navy) 20%, transparent);
  }
  body.site .container-header .container-nav > .mod-menu > li > a { font-size: 1.15rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
}

/* Regionen: 3 Kacheln pro Reihe (Tablet 2, Handy 1) */
@media (min-width: 600px) { .bmd-regionen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .bmd-regionen ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Fußbereich: drei Spalten nebeneinander (Cassiopeia macht den Fuß zur Flex-Zeile, das Modul muss die volle Breite nehmen) */
body.site .container-footer .grid-child > .mod-custom { flex: 1 1 100%; min-width: 0; }
@media (min-width: 768px) { .bmd-footer { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bmd-credits { padding-top: 1rem; border-top: 1px solid rgba(45, 42, 38, .15); text-align: center; line-height: 1.7; }

/* Foto-Band „Flotte“ (mymodul2): Bild steht, die Seite scrollt darüber – sichtbarer Ausschnitt 400 px (Handy 260 px) */
.imhof-parallax.bmd-flotte { min-height: 400px; padding: 0; }
/* Handy/Hochformat: Parallax würde das Querformat-Foto zu stark beschneiden → Bild steht fest im Band, ganze Szene sichtbar */
@media (max-width: 767.98px), (orientation: portrait) {
  .imhof-parallax.bmd-flotte { min-height: 0; aspect-ratio: 2400 / 1340; }
  .bmd-flotte .imhof-parallax__img { position: absolute; inset: 0; height: 100%; }
}

/* v1.0.4: Kopf verkleinern ohne Zittern. Das Template schaltet .is-scrolled schon ab 40 px, der Kopf schrumpft aber um ~70 px –
   Chrome gleicht die Höhe aus, landet wieder unter 40 px, der Kopf wächst … Deshalb bleibt .is-scrolled ohne Größenänderung,
   verkleinert wird über .bmd-small aus user.js (ab 160 px kleiner, erst unter 20 px wieder groß). */
body.site .container-header.is-scrolled .navbar-brand { padding-block: .9rem; }
body.site .container-header.is-scrolled .brand-logo img { max-height: 72px; }
body.site .container-header.bmd-small .navbar-brand { padding-block: .4rem; }
body.site .container-header.bmd-small .brand-logo img { max-height: 52px; }
@media (min-width: 992px) {
  body.site .container-header.is-scrolled .navbar-brand { padding-block: 1.25rem .5rem; }
  body.site .container-header.is-scrolled .brand-logo img { max-height: 112px; }
  body.site .container-header.bmd-small .navbar-brand { padding-block: .4rem .2rem; }
  body.site .container-header.bmd-small .brand-logo img { max-height: 58px; }
}