/* ==========================================================================
   Greil Hausgeräte Kundendienst

   Dunkle Oberfläche. Eine Blauleiter von fast schwarz bis eisblau trägt die
   Seite, das Signalgelb aus dem Logo gehört ausschließlich der Haupthandlung.
   Keine Zierlinien, keine Schatten, Listen statt Karten.
   ========================================================================== */

:root {
  /* Flächen, von tief nach hoch */
  --base:     #0a1724;
  --base-alt: #0d1f30;
  --raised:   #11273b;
  --sunken:   #071320;
  --panel:    #103252;

  /* Blauleiter */
  --blue-700: #17395a;
  --blue-600: #1d4b73;
  --blue-500: #2a6da5;
  --blue-400: #3d8bc9;
  --blue-300: #6aa9dd;
  --blue-200: #9cc6e9;

  --line:       #1c364d;
  --line-soft:  rgba(255,255,255,.08);
  --line-firm:  rgba(255,255,255,.15);

  --text:  #e7eff7;
  --muted: #93a9be;
  --dim:   #6d8299;

  /* Der eine Akzent */
  --accent:      #e4ec0b;
  --accent-dark: #ccd400;

  --sand:      #2e2a12;
  --sand-line: #4d451c;
  --sand-text: #ecdf94;

  --ok: #7fd6a4;  --ok-bg: #0f2b1e;  --ok-line: #1e4d36;
  --bad: #ff9f97; --bad-bg: #331714; --bad-line: #5e2a25;

  --radius:    8px;
  --radius-lg: 14px;

  --font: "Saira", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Michroma", var(--font);
  --wrap: 1260px;
  --narrow: 760px;
  --gap-section: clamp(64px, 8vw, 104px);
}

/* Schriften, selbst ausgeliefert – keine Anfrage an Dritte.
   Michroma für Überschriften: breit laufende, quadratische Displayschrift.
   Saira für den Fließtext: gerade Schnitte, gut lesbar.

   Michroma hat nur einen Schnitt, deshalb überall font-weight 400 – sonst
   rechnet der Browser eine unsaubere Fettung dazu. Sie läuft außerdem sehr
   breit: die Schriftgrade sind gegenüber einer normalen Grotesk deutlich
   zurückgenommen und die Zeilenhöhe erhöht, sonst brechen deutsche
   Überschriften über zu viele Zeilen. */
@font-face {
  font-family: "Saira";
  src: url("../fonts/saira-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Saira";
  src: url("../fonts/saira-latin-ext.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Michroma";
  src: url("../fonts/michroma-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Michroma";
  src: url("../fonts/michroma-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 106px;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--base);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.66;
  color: var(--text);
  background: var(--base);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--blue-300); text-underline-offset: .18em; }
a:hover { color: var(--blue-200); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.32; margin: 0 0 .6em;
  letter-spacing: -.02em; font-weight: 400; color: #fff;
}
h1 { font-size: clamp(1.62rem, 3.7vw, 2.65rem); }
h2 { font-size: clamp(1.32rem, 2.6vw, 1.85rem); }
h3 { font-size: clamp(1rem, 1.4vw, 1.14rem); }
p  { margin: 0 0 1.1em; }

.wrap   { width: 100%; max-width: var(--wrap);   margin-inline: auto; padding-inline: 22px; }
.narrow { width: 100%; max-width: var(--narrow); }

/* Das Anfrageformular steht mittig und schmaler als der Rest der Seite:
   ausgefüllt wird konzentriert, die volle Breite hilft dabei nicht. */
.form-wrap { width: 100%; max-width: 920px; margin-inline: auto; }

.section { padding: var(--gap-section) 0; }
.section--alt { background: var(--base-alt); }
/* Eigener Blauton, damit sich der Anfrageteil klar vom Abschnitt darüber absetzt. */
.section--blue {
  background: var(--panel);
  border-block: 1px solid var(--blue-600);
}
.section--blue .form-card { background: var(--base-alt); border-color: var(--line-firm); }

.eyebrow {
  display: block;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-400);
  margin-bottom: .95rem;
}

.section-head { max-width: 720px; margin-bottom: clamp(32px, 4.5vw, 52px); }
.section-head.is-center { margin-inline: auto; text-align: center; }
.section-head p:last-child { margin-bottom: 0; }
.lead { font-size: 1.16rem; color: var(--muted); }

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

/* --------------------------------------------------------- Schaltflächen -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .8em 1.55em;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font: inherit; font-weight: 600; font-size: 1.02rem;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; }

/* Der einzige gelbe Baustein der Seite. */
.btn--accent { background: var(--accent); color: #0a1724; }
.btn--accent:hover { background: var(--accent-dark); color: #0a1724; }
.btn--accent:focus-visible { outline-color: #fff; }

/* Gefülltes Blau für zweitrangige Handlungen – Grundfarbe, kein Akzent. */
.btn--primary { background: var(--blue-600); color: #fff; }
.btn--primary:hover { background: var(--blue-500); color: #fff; }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-firm); }
.btn--ghost:hover { border-color: var(--blue-400); background: rgba(61,139,201,.1); color: #fff; }

.btn--sm { padding: .54em 1.05em; font-size: .97rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ------------------------------------------------------------- Kopfteil -- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--base);
  border-bottom: 1px solid var(--line-soft);
}
/* Bewusst nicht im Inhaltsraster: der Kopfbereich nutzt die ganze Breite.
   Drei Spalten, damit die Seitenpunkte wirklich mittig stehen und nicht
   nur zwischen Logo und Schaltfläche ausbalanciert wirken. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
  min-height: 90px;
  padding-inline: clamp(22px, 3.4vw, 56px);
}
.header-cta { justify-self: end; }
.brand { display: inline-flex; align-items: center; justify-self: start; }
.brand img { height: 60px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.18; }
.brand__name { font-family: var(--font-display); font-weight: 400; font-size: .95rem; color: #fff; letter-spacing: -.02em; }
.brand__sub { font-size: .76rem; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }

.nav { display: flex; align-items: center; justify-content: center; gap: 4px; }
.nav a {
  padding: .5em .8em; border-radius: 6px;
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: 1.01rem;
  transition: background-color .15s ease, color .15s ease;
}
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.is-active { color: #fff; background: rgba(255,255,255,.08); }
/* .nav a ist spezifischer als .btn--accent und würde die Schriftfarbe
   der Schaltfläche überschreiben – deshalb hier ausdrücklich setzen. */
.nav a.btn--accent { color: #0a1724; }
.nav a.btn--accent:hover { color: #0a1724; background: var(--accent-dark); }

/* Weg zurück auf Unterseiten – ersetzt dort das Menü. */
.nav a.nav__home { display: inline-flex; align-items: center; gap: .5em; }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line-firm); border-radius: var(--radius);
  cursor: pointer; color: var(--text);
}
.nav-toggle svg { margin: auto; }

@media (max-width: 960px) {
  .site-header__inner { display: flex; justify-content: space-between; gap: 12px; }
  .nav-toggle { display: flex; position: relative; z-index: 70; }
  .header-cta { margin-left: auto; }

  /* Bewusst absolut statt fixiert: der Kopfbereich ist ein eigener
     Bezugsrahmen, ein fixiertes Menü würde daneben hängen bleiben. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex: 0 1 auto; flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 0;
    padding: 8px clamp(22px, 3.6vw, 60px) 22px;
    background: var(--base);
    border-bottom: 1px solid var(--line-firm);
    max-height: calc(100dvh - 90px); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a { padding: .9em .4em; font-size: 1.05rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav a:last-child { border-bottom: 0; }
}

/* Ganz schmal übernimmt die Leiste am unteren Rand die Handlung. */
@media (max-width: 720px) {
  .header-cta { display: none; }
}

/* ------------------------------------------- Arbeitszeiten unter dem Kopf */

.hours-bar {
  background: var(--base-alt);
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  font-size: .99rem;
}
.hours-bar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 5px 20px; padding: 11px 22px; text-align: center;
}
.hours-bar__label {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 600; font-size: .77rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--blue-400);
}
.hours-bar__time { font-weight: 600; }
.hours-bar__sep { width: 1px; height: 13px; background: var(--line-firm); }
.hours-bar__note { color: var(--dim); font-size: .93rem; }
@media (max-width: 620px) {
  .hours-bar__sep { display: none; }
  .hours-bar__inner { gap: 2px 14px; padding: 10px 18px; }
}

/* Urlaub und freie Hinweise */
.notice {
  padding: 14px 22px; text-align: center;
  background: var(--sand); border-bottom: 1px solid var(--sand-line);
  color: var(--sand-text);
}
.notice b { display: block; font-size: 1.08rem; font-weight: 700; color: #f6ecb4; }
.notice span { display: block; font-size: .97rem; opacity: .8; margin-top: .15em; }
.notice--info { background: var(--blue-700); border-bottom-color: var(--blue-600); color: var(--blue-200); }
.notice--info span { opacity: .95; }

/* ------------------------------------------------------------ Aufmacher -- */

.hero { position: relative; overflow: hidden; background: var(--sunken); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(7,19,32,.94) 0%, rgba(8,22,37,.84) 42%, rgba(12,38,62,.42) 100%),
    linear-gradient(to top, rgba(7,19,32,.7), transparent 45%);
}
.hero__inner {
  position: relative;
  padding: clamp(72px, 11vw, 132px) 0 clamp(68px, 10vw, 120px);
  max-width: 720px;
}
.hero h1 { margin-bottom: .45em; }
.hero h1 span { display: block; color: var(--blue-200); }
.hero__text { font-size: clamp(1.12rem, 1.9vw, 1.28rem); color: rgba(255,255,255,.82); max-width: 30em; margin-bottom: 2rem; }
.hero__quote { margin: 2.8rem 0 0; font-size: 1.08rem; font-style: italic; color: rgba(255,255,255,.66); }
.hero__quote cite { display: block; font-style: normal; font-size: .89rem; color: rgba(255,255,255,.42); margin-top: .5em; letter-spacing: .04em; }

/* --------------------------------------------------------------- Geräte -- */

.devices { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.devices li {
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: .46em .95em;
  font-weight: 500; font-size: 1.01rem; color: var(--text);
}
.section--alt .devices li { background: var(--base); }

/* ------------------------------------------------------ Aufzählungsliste -- */

.rows { list-style: none; margin: 0; padding: 0; }
.rows > li {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 24px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
}
.rows > li:last-child { border-bottom: 1px solid var(--line-soft); }
.rows__title { font-weight: 600; font-size: 1.13rem; color: #fff; }
.rows__text { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 1.02rem; max-width: 62ch; }
.rows__tag { white-space: nowrap; font-weight: 600; color: var(--blue-300); font-size: 1.02rem; }
.rows__tag small { display: block; font-weight: 400; color: var(--dim); font-size: .87rem; }
@media (max-width: 560px) {
  .rows > li { grid-template-columns: 1fr; }
  .rows__tag { white-space: normal; }
}

/* ----------------------------------------------------------- Preisgrafik --
   Zeigt auf einen Blick, woraus sich eine Rechnung zusammensetzt:
   Posten, verbunden durch Pluszeichen. */

.formula {
  display: flex; flex-wrap: nowrap; align-items: stretch;
  gap: 8px; margin-bottom: 18px;
}
.formula__part {
  flex: 1 1 0; min-width: 0;
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
}
.formula__label {
  display: block;
  font-family: var(--font-display);
  font-size: .92rem; font-weight: 400; color: #fff;
  letter-spacing: -.01em; line-height: 1.35;
}
.formula__value { display: block; margin-top: .35em; font-size: .99rem; color: var(--blue-300); }
.formula__op {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 18px;
  font-size: 1.35rem; font-weight: 700; color: var(--blue-500);
}

/* Schmale Displays: untereinander, Pluszeichen dazwischen zentriert. */
@media (max-width: 820px) {
  .formula { flex-direction: column; gap: 6px; }
  .formula__op { width: auto; height: 20px; font-size: 1.15rem; }
}

.formula-hint {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  padding: 16px 20px;
  border: 1px dashed var(--line-firm);
  border-radius: var(--radius-lg);
  color: var(--muted); font-size: 1.02rem;
}
.formula-hint b { color: #fff; font-weight: 650; }

.note-box {
  margin-top: 30px; padding: 22px 24px;
  background: var(--raised); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  color: var(--muted); font-size: 1.02rem;
}
.note-box p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ Leistungspakete --
   Karten statt Liste: jedes Paket bekommt ein Gerätesymbol, damit auf einen
   Blick erkennbar ist, worum es geht. */

.packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}
.package {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: border-color .15s ease;
}
.package:hover { border-color: var(--blue-500); }
.package__icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--blue-700); color: var(--blue-200);
  display: grid; place-items: center;
  margin-bottom: 4px;
}
.package h2 { margin: 0; font-size: clamp(1.08rem, 1.5vw, 1.2rem); }
.package__text { margin: 0; color: var(--muted); font-size: .99rem; flex: 1; }
.package__price {
  margin-top: 8px; padding-top: 15px;
  border-top: 1px solid var(--line-soft);
  font-weight: 600; font-size: 1.24rem; color: #fff;
}
.package__price small { display: block; font-weight: 400; font-size: .87rem; color: var(--dim); margin-top: .2em; }

/* --------------------------------------------------------------- Split --- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 60px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split__media { border-radius: var(--radius-lg); overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 4; }

/* ------------------------------------------------------------- Formular -- */

.form-card {
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.5vw, 40px);
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .97rem; color: var(--text); }
.field .req { color: var(--bad); font-weight: 400; }
.field .hint { display: block; font-size: .89rem; color: var(--dim); font-weight: 400; margin-top: .15em; }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="date"], input[type="time"], input[type="number"], input[type="search"],
select, textarea {
  width: 100%; padding: .72em .85em;
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--base); border: 1.5px solid var(--line-firm); border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #5d7386; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(61,139,201,.22);
}
textarea { resize: vertical; min-height: 120px; }
select {
  appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%2393a9be' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field--error input, .field--error select, .field--error textarea { border-color: var(--bad); background: var(--bad-bg); }
.field__error { font-size: .9rem; color: var(--bad); font-weight: 600; }

/* Für Menschen unsichtbar – automatische Skripte füllen es aus. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { border-radius: var(--radius); padding: 16px 20px; margin-bottom: 22px; border: 1px solid; }
.alert--ok  { background: var(--ok-bg);  border-color: var(--ok-line);  color: var(--ok); }
.alert--bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.alert--warn{ background: var(--sand);   border-color: var(--sand-line); color: var(--sand-text); }
.alert b { display: block; margin-bottom: .2em; }
.alert a { color: inherit; }

/* -------------------------------------------------------------- Kontakt -- */

.contacts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden;
}
.contact {
  display: block; padding: 24px 22px;
  background: var(--raised);
  text-decoration: none; color: inherit;
  transition: background-color .15s ease;
}
a.contact:hover { background: var(--blue-700); }
.contact__icon { color: var(--blue-400); margin-bottom: 13px; }
.contact__label { display: block; font-size: .77rem; text-transform: uppercase; letter-spacing: .15em; color: var(--dim); font-weight: 600; }
.contact__value { display: block; font-size: 1.2rem; font-weight: 700; color: #fff; margin-top: .25em; word-break: break-word; }
.contact__extra { display: block; font-size: .92rem; color: var(--dim); margin-top: .2em; }

.hours-restate {
  margin-top: 22px; padding: 20px 22px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  text-align: center; background: var(--raised);
}
.hours-restate p { color: #fff; font-weight: 600; margin: .4em 0 0; }
.hours-restate small { display: block; color: var(--dim); font-weight: 400; margin-top: .3em; }

/* --------------------------------------------------------------- Fußzeile */

.site-footer { background: var(--sunken); color: var(--muted); padding: 54px 0 26px; font-size: .99rem; border-top: 1px solid var(--line-soft); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } }
.site-footer h4 { color: #fff; font-size: .77rem; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 1.2em; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand img { height: 50px; width: auto; }
.footer-brand span { font-weight: 800; color: #fff; font-size: 1.02rem; }
/* Zweizeilig neben dem Logo, damit die Zeile nicht so breit wird. */
.footer-brand__text { display: flex; flex-direction: column; line-height: 1.18; }
.footer-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between;
  font-size: .9rem; color: var(--dim);
}
.footer-bottom a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--blue-700); }
.footer-sep { padding-inline: .45em; opacity: .5; }
.footer-bottom a:hover { color: #fff; text-decoration-color: var(--blue-400); }

/* ------------------------------------------------------------ Unterseiten */

.page-head { background: var(--base-alt); border-bottom: 1px solid var(--line-soft); padding: clamp(44px, 6vw, 72px) 0; }
.page-head p { color: var(--muted); max-width: 62ch; font-size: 1.14rem; margin-bottom: 0; }
.breadcrumb { font-size: .87rem; color: var(--dim); margin-bottom: 1.1rem; }
.breadcrumb a { color: var(--blue-300); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue-200); }

.prose { max-width: 68ch; }
.prose h2 { font-size: 1.34rem; margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }

/* ---------------------------------------------------- Gebrauchtwarenseite -- */

.used-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.used-card {
  display: flex; flex-direction: column;
  background: var(--raised); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color .15s ease;
}
.used-card:hover { border-color: var(--blue-500); }
.used-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--base); }
.used-card__media img { width: 100%; height: 100%; object-fit: cover; }
.used-card__media .placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--blue-600); }
.used-card__badge {
  position: absolute; top: 13px; left: 13px;
  background: var(--base); color: #fff; border: 1px solid var(--line-firm);
  font-weight: 600; font-size: .84rem; padding: .3em .75em; border-radius: 5px;
}
.used-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; gap: 10px; }
.used-card__cat { font-size: .77rem; text-transform: uppercase; letter-spacing: .14em; color: var(--blue-400); font-weight: 700; }
.used-card h3 { margin: 0; font-size: 1.14rem; }
.used-card__desc { color: var(--muted); font-size: 1.01rem; margin: 0; flex: 1; }
.used-card__meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: .89rem; color: var(--blue-200); }
.used-card__meta span { background: var(--blue-700); border-radius: 5px; padding: .24em .62em; }
.used-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.used-card__price { font-size: 1.42rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }

.empty-state { text-align: center; padding: 64px 20px; color: var(--muted); }
.empty-state svg { color: var(--blue-600); margin-bottom: 18px; }
.empty-state h2 { margin-bottom: .5em; }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(4,10,18,.95); display: none; place-items: center; padding: 24px; }
.lightbox.is-open { display: grid; }
.lightbox img { max-width: min(1040px, 94vw); max-height: 88vh; object-fit: contain; border-radius: var(--radius); }
.lightbox__close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 0; color: #fff; font-size: 1.5rem; cursor: pointer;
}
.lightbox__close:hover { background: #fff; color: var(--base); }

/* ------------------------------------------------------------ Rechtstext -- */

.legal { max-width: 740px; }
.legal h2 { font-size: 1.3rem; margin-top: 2.3em; }
.legal h2:first-child { margin-top: 0; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: .45em; }
.legal address { font-style: normal; background: var(--raised); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px 22px; }

/* -------------------------------------------------- Handy-Schnellzugriff -- */

.mobile-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 55;
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--sunken); border-top: 1px solid var(--line-firm);
}
.mobile-cta .btn { flex: 1; padding: .82em .6em; font-size: 1rem; }
@media (max-width: 720px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 76px; }
}

@media print {
  .site-header, .mobile-cta, .hours-bar, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}