/* ==========================================================================
   Lösch Hydraulik GmbH – loesch-hydraulik.de        site_v5 (2026-10-15)
   Statische Website (kein CMS, keine externen Ressourcen, keine Cookies)
   Eine gemeinsame Stylesheet-Datei für alle Seiten. Mobile-first.

   CI-MASTER = Lösch-Briefbogen (230625_lösch_briefbogen_06_print_pfade.pdf).
   NICHT das CoEx-Corporate-Design.
   --lh-blue        #007DC5  Briefbogen-Blau: Logo-Band, Rahmen, Akzentlinien
                             (dekorativ / große Flächen; Weiß darauf ca. 4,4:1)
   --lh-orange      #F36F21  Briefbogen-Orange: Akzent (aktiver Menüpunkt, Hover)
                             nur dekorativ, nie als Textfarbe / Textuntergrund
   --lh-anthracite  #231F20  Briefbogen-Anthrazit: Text, Überschriften, Footer
   Abgeleitet (nur für Flächen MIT Text, damit WCAG AA gilt):
   --lh-blue-ui     #0067B1  Weiß darauf ca. 5,9:1; Links auch auf #EEE >= 4,5:1
   --lh-blue-ui-dark #004F88 Hover
   --lh-red         #C4161C  Notdienst (aus v3, Weiß ca. 6:1) – kein Briefbogen-Ton
   ========================================================================== */

:root {
  --lh-blue: #007dc5;
  --lh-blue-ui: #0067b1;
  --lh-blue-ui-dark: #004f88;
  --lh-orange: #f36f21;
  --lh-anthracite: #231f20;
  --lh-grey: #eeeeee;
  --lh-grey-2: #f6f7f8;
  --lh-border: #c9d1d9;
  --lh-text: #231f20;
  --lh-muted: #4a5560;
  --lh-red: #c4161c;
  --lh-red-dark: #9e1116;
  --lh-white: #ffffff;
  --focus: #ffbf47;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --radius: 4px;
  --container: 72rem;
  --space: clamp(1rem, 2.5vw, 2rem);
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--lh-text);
  background: var(--lh-white);
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { line-height: 1.25; color: var(--lh-anthracite); margin: 0 0 .6em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); margin-top: 1.6em; }
h3 { font-size: 1.15rem; margin-top: 1.2em; }
p, ul, ol, dl, address { margin: 0 0 1em; }
address { font-style: normal; }

a { color: var(--lh-blue-ui); text-underline-offset: .15em; }
a:hover { color: var(--lh-blue-ui-dark); }

/* E-Mail-Adressen und Telefonnummern dürfen nie umbrechen */
.nowrap { white-space: nowrap; }
.mail { font-size: clamp(.875rem, 4.4vw, 1rem); }

/* Sichtbarer Fokus für Tastaturnutzer */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--lh-anthracite);
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Skip-Link ---------- */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--lh-anthracite); color: var(--lh-white); padding: .6rem 1rem;
  border-radius: var(--radius); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--lh-white); }

/* ==========================================================================
   Header (v4): Briefkopf-Logo + zwei Telefon-Panels nebeneinander, darunter
   die (höhere) Navigationszeile.
   < 64rem : Logo oben, Panels darunter (je 50 %), Menü als Aufklapp-Button
   >= 64rem: Logo links, Panels rechts, Menü einzeilig über die volle Breite
   ========================================================================== */
.site-header { background: var(--lh-white); border-top: 6px solid var(--lh-blue); }

.header-inner {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem;
  align-items: center; padding-top: .75rem; padding-bottom: .75rem;
}
.brand { display: block; width: 100%; max-width: 32rem; min-width: 0; }
.brand img { width: 100%; height: auto; }

/* Telefon-Panels: Service (blau) und Notdienst (rot), weiße Schrift */
.phone-panels { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; width: 100%; }
.phone-panels li { flex: 1 1 0; min-width: 0; display: flex; }
.phone-panel {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: .15rem; width: 100%; padding: .55rem .5rem; border-radius: var(--radius);
  color: var(--lh-white); text-decoration: none; text-align: center; line-height: 1.2;
}
.phone-panel:hover, .phone-panel:focus-visible { color: var(--lh-white); }
.phone-panel--service { background: var(--lh-blue-ui); }
.phone-panel--service:hover { background: var(--lh-blue-ui-dark); }
.phone-panel--notdienst { background: var(--lh-red); }
.phone-panel--notdienst:hover { background: var(--lh-red-dark); }
.phone-label { font-size: clamp(.72rem, 2.9vw, .875rem); font-weight: 600; }
.phone-number { font-size: clamp(.85rem, 4vw, 1.35rem); font-weight: 800; white-space: nowrap; letter-spacing: .01em; }

@media (min-width: 64rem) {
  .header-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; }
  .brand { max-width: 34rem; }
  .phone-panels { width: auto; }
  .phone-panels li { flex: 0 0 auto; }
  .phone-panel { min-width: 12.5rem; padding: .7rem 1.1rem; }
}

/* ---------- Hauptnavigation ---------- */
.main-nav { background: var(--lh-white); border-top: 1px solid var(--lh-border); border-bottom: 4px solid var(--lh-blue); }
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.menu a {
  display: block; padding: .95rem .8rem; color: var(--lh-anthracite); font-weight: 700;
  text-decoration: none; box-shadow: inset 0 -4px 0 transparent;
}
.menu a:hover { color: var(--lh-blue-ui); box-shadow: inset 0 -4px 0 var(--lh-orange); }
.menu a[aria-current="page"] { color: var(--lh-blue-ui); box-shadow: inset 0 -4px 0 var(--lh-orange); }
.menu-extern a::after { content: "\2197"; margin-left: .3em; font-size: .9em; }

.nav-toggle {
  display: none; width: 100%; min-height: 2.75rem; margin: .5rem 0; padding: .7rem 1rem;
  font: inherit; font-weight: 700; text-align: left; color: var(--lh-white);
  background: var(--lh-anthracite); border: 0; border-radius: var(--radius); cursor: pointer;
}
.nav-toggle::before { content: "\2630\00a0"; }
.nav-toggle[aria-expanded="true"]::before { content: "\2715\00a0"; }

/* Mobil/Tablet: Menü nur einklappen, wenn JS aktiv ist (sonst bleibt alles sichtbar) */
@media (max-width: 63.99rem) {
  .js .nav-toggle { display: block; }
  .js .menu { display: none; flex-direction: column; padding-bottom: .5rem; }
  .js .menu.is-open { display: flex; }
  .menu a { padding: .8rem .5rem; border-top: 1px solid var(--lh-border); box-shadow: none; }
  .menu a:hover,
  .menu a[aria-current="page"] { box-shadow: inset 5px 0 0 var(--lh-orange); padding-left: 1rem; }
}
@media (min-width: 64rem) {
  .menu { justify-content: space-between; }
  .menu a { padding: 1rem .6rem; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { background: var(--lh-grey-2); border-bottom: 1px solid var(--lh-border); font-size: .9rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: .55rem 0; display: flex; flex-wrap: wrap; }
.breadcrumb li + li::before { content: "\203A"; margin: 0 .5rem; color: var(--lh-muted); }
.breadcrumb [aria-current="page"] { color: var(--lh-muted); }

/* ---------- Inhalt ---------- */
main { display: block; }
.section { padding: calc(var(--space) * 1.5) 0; }
.section--grey { background: var(--lh-grey); }
.page-head { padding: calc(var(--space) * 1.5) 0 .5rem; }
.h1-sub { display: block; font-size: .6em; font-weight: 600; color: var(--lh-blue-ui); margin-top: .35em; }
.lead { font-size: 1.15rem; color: var(--lh-muted); max-width: 48rem; }
.prose { max-width: 48rem; }

/* Hero (Startseite) */
.hero { background: var(--lh-grey); border-bottom: 4px solid var(--lh-blue); }
.hero-inner { display: grid; gap: var(--space); padding: calc(var(--space) * 1.5) var(--space); align-items: center; }
.hero-inner > * { min-width: 0; }
@media (min-width: 56rem) { .hero-inner { grid-template-columns: 1.1fr .9fr; } }
.hero-media { min-width: 0; }
.hero .banner { display: block; width: fit-content; max-width: 26rem; margin-top: 1.5rem; }

/* Buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0; }
.btn {
  display: inline-block; padding: .75rem 1.3rem; border-radius: var(--radius);
  font-weight: 700; text-decoration: none; border: 2px solid var(--lh-blue-ui);
  background: var(--lh-blue-ui); color: var(--lh-white); font: inherit; font-weight: 700; cursor: pointer;
  max-width: 100%;
}
.btn:hover { background: var(--lh-blue-ui-dark); border-color: var(--lh-blue-ui-dark); color: var(--lh-white); }
.btn--ghost { background: transparent; color: var(--lh-blue-ui); }
.btn--ghost:hover { background: var(--lh-blue-ui); color: var(--lh-white); }
.btn--red { background: var(--lh-red); border-color: var(--lh-red); }
.btn--red:hover { background: var(--lh-red-dark); border-color: var(--lh-red-dark); }

/* Karten – Leistungs-Blöcke: Karten gleich hoch (Grid-Stretch), Text oben,
   Link/CTA per Flex am unteren Kartenrand (margin-top:auto), nichts wird gestreckt. */
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 1.25rem; align-items: stretch; }
.card {
  display: flex; flex-direction: column;
  background: var(--lh-white); border: 1px solid var(--lh-border); border-top: 4px solid var(--lh-blue);
  border-radius: var(--radius); padding: 1.25rem; min-width: 0;
}
.card h3 { margin-top: 0; }
.card p { margin-bottom: 1em; }
.card .card-cta { margin: auto 0 0; padding-top: .25rem; }
.card > p:last-child { margin-bottom: 0; }

/* Zwei Spalten */
.split { display: grid; gap: var(--space); align-items: start; grid-template-columns: minmax(0, 1fr); }
.split > * { min-width: 0; }
@media (min-width: 56rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Schlauchexpress: Headline über volle Breite; Notdienst und Fotos nebeneinander */
.pipe-express { padding-bottom: var(--space); }
.pipe-express-title { max-width: none; font-size: clamp(1.35rem, 3vw, 2rem); }
.pipe-express-lead { margin-bottom: 1rem; }
.pipe-express-grid { align-items: center; }
.pipe-express-media { min-width: 0; }
.pipe-express-details { margin-top: 1.5rem; }
.pipe-express .note--notdienst { margin: 0; }
@media (max-width: 55.99rem) {
  .pipe-express-grid { gap: 1.25rem; }
  .pipe-express-media .deco-row { gap: .75rem; margin-top: .75rem; }
  .pipe-express-media .deco-row img { max-width: min(45%, 10rem); }
}
/* Kontakt: deutlich mehr Weißraum zwischen den Spalten */
.split--roomy { row-gap: 3rem; }
@media (min-width: 56rem) { .split--roomy { column-gap: clamp(3rem, 7vw, 6rem); } }

/* Foto-Platzhalter (bis echte Fotos vorliegen) */
.photo-placeholder {
  margin: 0; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1rem; color: var(--lh-muted); font-weight: 600;
  background: repeating-linear-gradient(135deg, var(--lh-grey) 0 14px, var(--lh-grey-2) 14px 28px);
  border: 2px dashed var(--lh-border); border-radius: var(--radius);
}
.photo-placeholder + .photo-placeholder { margin-top: 1rem; }
.page-head > img { margin-top: .5rem; }
.photo-placeholder span { background: var(--lh-white); padding: .35rem .7rem; border-radius: var(--radius); }

/* Echte Fotos – Originale der Altseite aus /assets/img/legacy/ */
.photo { margin: 0; }
.photo img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--lh-border); }
.photo + .photo, .photo + .photo-placeholder, .photo-placeholder + .photo { margin-top: 1rem; }
.page-photo { margin-top: 1.25rem; max-width: 44rem; }
/* Dekorative Grafiken der Altseite (Schlauchexpress: LKW, Schlauchleitung) */
.deco-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin: 1.5rem 0 0; }
.deco-row img { width: auto; max-width: 45%; }

/* 24/7-Notdienst-Box (Home, Schlauchexpress, Kontakt) */
.note--notdienst { border-left-color: var(--lh-red); background: #fff5f5; }
.note--notdienst h2, .note--notdienst h3 { margin-top: 0; color: var(--lh-red); }
.note--notdienst p:last-child { margin-bottom: 0; }
.note--brand { border-left-color: var(--lh-orange); }
.note--brand h2 { margin-top: 0; }
.note--brand p:last-child { margin-bottom: 0; }

/* Produkte A–Z */
.az-index { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.az-index a {
  display: inline-block; min-width: 2.4rem; text-align: center; padding: .4rem .5rem;
  border: 1px solid var(--lh-border); border-radius: var(--radius); font-weight: 700; text-decoration: none;
}
.az-index a:hover { background: var(--lh-blue-ui); color: var(--lh-white); }
.az-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }
.az-group { border: 1px solid var(--lh-border); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--lh-white); min-width: 0; }
.az-group h2 {
  margin: 0 0 .5rem; font-size: 1.5rem; color: var(--lh-white); background: var(--lh-blue-ui);
  display: inline-block; min-width: 2.4rem; text-align: center; border-radius: var(--radius); padding: 0 .5rem;
  scroll-margin-top: 1rem;
}
.az-group ul { margin: 0; padding-left: 1.1rem; }

/* Hersteller */
.maker-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
.maker-grid h2 { font-size: 1.15rem; margin-top: 0; }

/* Hinweis-/Info-Box */
.note {
  border-left: 5px solid var(--lh-blue); background: var(--lh-grey-2);
  padding: 1rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.25rem 0;
}
.note--warn { border-left-color: var(--lh-red); }
.facts { list-style: none; padding: 0; }
.facts li { padding: .4rem 0 .4rem 1.6rem; position: relative; }
.facts li::before { content: "\2714"; position: absolute; left: 0; color: var(--lh-blue-ui); font-weight: 700; }

/* v6: Link-Liste (Weitere Leistungen auf Inhaltsseiten und im Footer) */
.link-list { list-style: none; padding: 0; margin: 0 0 1em; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.link-list a { display: inline-block; padding: .55rem 0; }
.link-list a[aria-current="page"] { font-weight: 700; text-decoration: none; }

/* v6: Leistungsseiten – Foto + Notdienst-Box in der rechten Spalte */
.service-media .note { margin-top: 1.25rem; }

/* v6: Beispiel-Etikett mit QR-Code (Schlauch-ID). Weißer Grund für die Scanbarkeit. */
.qr-example { margin: 1.25rem 0 1.5rem; }
.qr-label {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  width: fit-content; max-width: 100%; padding: 1rem;
  background: var(--lh-white); color: var(--lh-anthracite);
  border: 2px solid var(--lh-anthracite); border-radius: var(--radius);
}
.qr-label img { width: clamp(7rem, 32vw, 8.25rem); height: auto; flex: none; }
.qr-label-text { margin: 0; }
.qr-label-id { display: block; font-size: clamp(1.15rem, 5vw, 1.5rem); font-weight: 800; }
.qr-label-url { display: block; font-size: .95rem; margin-top: .2rem; }
.qr-example figcaption { font-size: .9rem; color: var(--lh-muted); margin-top: .5rem; }

/* ---------- Video (Klick-zum-Laden, kein Drittanbieter-Request vorher) ---------- */
.video-consent { margin: 1rem 0 1.5rem; max-width: 44rem; }
.video-frame {
  position: relative; aspect-ratio: 16 / 9; background: var(--lh-anthracite); border-radius: var(--radius);
  overflow: hidden; border-bottom: 4px solid var(--lh-blue);
}
.video-frame.is-playing { min-height: 0; }
.video-frame.is-playing .video-poster { display: none; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-local-poster { width: 100%; height: 100%; object-fit: cover; }
.video-poster {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 1rem; color: var(--lh-white); text-align: center; pointer-events: none;
  background: linear-gradient(145deg, #30383f, #17191c 70%);
}
.video-poster-status {
  position: absolute; left: .5rem; right: .5rem; top: 50%; transform: translateY(-50%);
  color: rgb(255 255 255 / .7); font-size: clamp(.85rem, 2.8vw, 1.15rem); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; pointer-events: none;
}
.video-poster p {
  position: absolute; inset: auto 0 0; margin: 0; padding: .8rem 1rem;
  background: rgb(35 31 32 / .94); font-size: .9rem; line-height: 1.45;
  opacity: 0; transform: translateY(100%); transition: opacity .18s ease, transform .18s ease;
}
.video-poster a { color: var(--lh-white); pointer-events: auto; }
.video-poster a:hover { color: #cfe8ff; }
.video-load {
  pointer-events: auto; display: inline-flex; align-items: center; justify-content: center;
  width: clamp(3.5rem, 12vw, 5rem); height: clamp(3.5rem, 12vw, 5rem); padding: 0;
  border: 3px solid var(--lh-white); border-radius: 50%; background: rgb(0 79 136 / .94);
  color: var(--lh-white); box-shadow: 0 2px 14px rgb(0 0 0 / .45); font-size: 0;
}
.video-load::before {
  content: ""; width: 0; height: 0; margin-left: .35rem;
  border-top: .8rem solid transparent; border-bottom: .8rem solid transparent;
  border-left: 1.15rem solid currentColor;
}
.video-frame:hover .video-poster p,
.video-frame:focus-within .video-poster p { opacity: 1; transform: translateY(0); }
.video-load:focus-visible { box-shadow: 0 0 0 5px var(--lh-white); }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .video-poster p { opacity: 1; transform: none; }
}
html:not(.js) .video-poster p { opacity: 1; transform: none; }
html:not(.js) .video-load { display: none; }
@media (max-width: 24rem) {
  .video-poster { padding: .5rem; }
  .video-poster p { padding: .55rem; font-size: .77rem; }
}
@media (min-width: 40rem) {
  .video-poster p { padding: 1rem 1.25rem; font-size: .95rem; }
}

/* ---------- Formulare ---------- */
.form { max-width: 40rem; }
.form-row { margin-bottom: 1.1rem; }
.form-grid { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) { .form-grid { grid-template-columns: 1fr 1fr; } }
label, .label { display: block; font-weight: 600; margin-bottom: .3rem; }
.req { color: var(--lh-red); }
.hint { display: block; font-size: .9rem; color: var(--lh-muted); margin-top: .25rem; }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="file"],
select,
textarea {
  width: 100%; font: inherit; color: var(--lh-text); background: var(--lh-white);
  border: 1px solid #7b8794; border-radius: var(--radius); padding: .6rem .7rem;
}
textarea { min-height: 8rem; resize: vertical; }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--lh-red); border-width: 2px; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; flex: none; }
/* Honeypot – für Menschen unsichtbar, Bots füllen es aus */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 1rem; }
.form-status:empty { display: none; }

/* Schlauch-ID-Eingabe */
.id-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; max-width: 32rem; }
.id-form .form-row { flex: 1 1 14rem; margin: 0; }
.id-form input {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: 1.4rem; letter-spacing: .2em; text-transform: uppercase;
}
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; letter-spacing: .1em; }

/* ==========================================================================
   Footer (v4): 3 Spalten (Kontakt+Anfahrt | Öffnungszeiten | Notdienst).
   <40rem: 1 Spalte, 40–64rem: 2 Spalten (Notdienst über die volle Breite),
   >=64rem: 3 Spalten, die ersten beiden nach Inhalt – so bleibt die
   Überschrift "Öffnungszeiten Ladengeschäft" einzeilig.
   ========================================================================== */
.site-footer { background: var(--lh-anthracite); color: #ece9e9; margin-top: calc(var(--space) * 2); border-top: 6px solid var(--lh-blue); }
.site-footer a { color: #ffffff; }
.site-footer a:hover { color: #cfe8ff; }
.footer-grid {
  display: grid; gap: 1.75rem var(--space); grid-template-columns: minmax(0, 1fr);
  padding-top: calc(var(--space) * 1.5); padding-bottom: var(--space);
}
.footer-grid > * { min-width: 0; }
@media (min-width: 40rem) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-notdienst { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .footer-grid { grid-template-columns: max-content max-content minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4rem); }
  .footer-notdienst { grid-column: auto; }
}
.footer-notdienst a { font-weight: 700; white-space: nowrap; }
.footer-title { color: #ffffff; font-size: 1.05rem; margin: 0 0 .6rem; border-bottom: 2px solid var(--lh-blue); padding-bottom: .3rem; display: inline-block; }
.footer-title--oneline { white-space: nowrap; font-size: clamp(.9rem, 4.6vw, 1.05rem); }
.t-short { display: none; }
@media (max-width: 21rem) { .t-long { display: none; } .t-short { display: inline; } }
.hours { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; margin: 0; }
.hours dt { font-weight: 700; }
.hours dd { margin: 0; }
.oneline { white-space: nowrap; font-size: clamp(.95rem, 4.8vw, 1.15rem); }
.footer-brands { border-top: 1px solid rgba(255, 255, 255, .2); padding: 1rem 0; font-size: .95rem; }
.footer-brands p { margin: 0; }
.footer-services { border-top: 1px solid rgba(255, 255, 255, .2); padding: 1rem 0 .5rem; font-size: .95rem; }
.footer-services .link-list { margin: 0; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .2); padding: 1rem 0; font-size: .9rem; }
.footer-bottom p { margin: 0; }

/* 404 */
.error-code { font-size: clamp(3rem, 10vw, 6rem); font-weight: 800; color: var(--lh-blue-ui); margin: 0; line-height: 1; }

/* Druck */
@media print {
  .main-nav, .skip-link, .breadcrumb, .phone-panels, .video-consent, .footer-brands, .footer-services { display: none; }
  body { font-size: 11pt; }
  a { color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}