/* Baumaschinen Vermietung Oliver Kühn — eine Datei, kein Framework, kein JavaScript.

   Farbklima: warme Neutraltöne (Sand, Stein) mit gedecktem Schiefergrau.
   Das Rot des Logos erscheint nur in kleinen Mengen — aktiver Menüpunkt,
   Preisleiste, Anruf-Schaltfläche. Keine großen roten oder schwarzen Flächen,
   damit die Seite einladend statt alarmierend wirkt.

   Kopfzeile: Logo links, Menü rechts, bleibt beim Scrollen oben stehen.
   Auf schmalen Bildschirmen zusätzlich eine feste Anruf-Leiste am unteren Rand. */

:root {
  --tinte: #2c2a26;
  --leise: #655f56;
  --sand: #faf8f4;
  --stein: #f0ece5;
  --linie: #ded8cf;
  --schiefer: #414b57;
  --schiefer-tief: #2f3843;
  --rot: #bf1622;
  --rot-tief: #93101a;
  --weiss: #fff;
  /* Das Grau des Logorahmens. Kehrt als Kopf- und Fußlinie wieder, damit der
     Rahmen als Teil der Gestaltung gelesen wird und nicht wie aufgeklebt. */
  --grau-logo: #b3b3b3;
  /* Seitenhintergrund außerhalb des Kastens, etwas dunkler als --stein,
     damit der weiße Kasten sichtbar davor liegt statt nahtlos zu verschwimmen. */
  --seite-hintergrund: #e8e2d5;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --breite: 67.5rem;
  --rand: clamp(1rem, 4vw, 2rem);
  --kopf-hoehe: 5rem;
}

@media (min-width: 48rem) {
  :root { --kopf-hoehe: 7rem; }
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--seite-hintergrund) url("img/hintergrund.webp") center / cover
    no-repeat fixed;
}

/* Auf schmalen Bildschirmen ist "fixed" ruckelig und der Ausschnitt beliebig;
   dort reicht die einfarbige Fläche als Hintergrund. */
@media (max-width: 47.99rem) {
  body { background-image: none; }
}

/* Kasten: fester Inhaltsbereich auf dem Seitenhintergrund, wie im alten
   Theme. Kopf, Inhalt und Fuß liegen darin; die feste Anruf-Leiste am unteren
   Bildschirmrand bleibt bewusst außerhalb, damit sie die volle Gerätebreite
   nutzen kann. */
.kasten {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  background: var(--weiss);
  box-shadow: 0 0 0 1px rgba(44, 42, 38, 0.15), 0 20px 45px -18px rgba(20, 18, 14, 0.55);
}

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

a { color: var(--rot-tief); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--rot); }

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  color: var(--schiefer-tief);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.65rem, 1.15rem + 1.8vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); }
h3 { font-size: 1.05rem; color: var(--tinte); }

p { margin: 0 0 0.8em; max-width: 66ch; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skiplink {
  position: absolute; left: -999px; top: 0; z-index: 60;
  background: var(--schiefer-tief); color: var(--weiss);
  padding: 0.7rem 1.1rem;
}
.skiplink:focus { left: 0; }

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Text, der erst ab mittleren Breiten erscheint (kürzere Menülabels am Handy) */
.ab-breit { display: none; }
@media (min-width: 48rem) { .ab-breit { display: inline; } }

/* ---------- Kopfzeile: Logo links, Menü rechts, bleibt oben stehen ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--weiss);
  border-bottom: 3px solid var(--grau-logo);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 0.75rem clamp(0.75rem, 3vw, 2.5rem);
  min-height: var(--kopf-hoehe);
}

/* Logo füllt die Kopfzeile fast randlos aus, statt als kleines Bildchen mit
   viel weißem Leerraum darüber und darunter zu schweben. Sein eigener grauer
   Rahmen trifft so fast direkt auf die graue Unterkante der Kopfzeile.
   Feste calc()-Höhe statt Prozentwert: eine Prozenthöhe auf einem Kind eines
   flex-gestreckten Elements löst sich nicht in jedem Browser verlässlich auf,
   weil die Kopfzeile nur eine min-height statt einer festen Höhe hat. */
.kopf__logo { flex: 0 0 auto; }
.kopf__logo img { height: calc(var(--kopf-hoehe) - 0.8rem); width: auto; }

.nav { margin-left: auto; }

.nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.15rem clamp(0.6rem, 2vw, 1.75rem);
  margin: 0;
  padding: 0;
}

.nav a {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--schiefer);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--tinte); border-bottom-color: var(--linie); }
.nav [aria-current="page"] { color: var(--tinte); border-bottom-color: var(--rot); }

.kopf__tel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--schiefer-tief);
  text-decoration: none;
  white-space: nowrap;
}
.kopf__tel:hover { color: var(--rot); }
.kopf__tel .glyph { color: var(--rot); font-weight: 400; font-size: 1.15em; }

@media (min-width: 48rem) {
  .nav a { font-size: 0.85rem; }
  .kopf__tel { font-size: 1.05rem; }
}

/* ---------- Hero: hell, mit Bild statt dunklem Block ---------- */

.hero { background: var(--sand); border-bottom: 1px solid var(--linie); }

.hero__gitter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
  padding-block: clamp(1.5rem, 4vw, 2.75rem);
}
@media (min-width: 52rem) {
  .hero__gitter { grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; }
}

.hero__bild {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linie);
  aspect-ratio: 16 / 9;
}

/* Reines CSS, kein JavaScript: zwei Bilder überblenden sich per Keyframe-
   Animation. Der zweite Slide startet dank negativer animation-delay schon
   in der Mitte des Zyklus, dadurch wechseln sich beide gleichmäßig ab. Ein
   dunkler Verlauf liegt als zweiter Hintergrund über dem Foto, damit der
   Werbespruch darauf lesbar bleibt — der Text ist echtes HTML, kein Teil der
   Bilddatei, also durchsuchbar, übersetzbar und ohne Neugenerieren änderbar. */
.hero__folie {
  position: absolute;
  inset: 0;
  margin: 0;
  background-size: cover;
  background-position: center 62%;
  opacity: 0;
  animation: hero-ueberblenden 14s infinite;
}
.hero__folie--muenzen {
  background-image: linear-gradient(0deg, rgba(20,18,14,.6), rgba(20,18,14,0) 55%), url("img/band-muenzen.webp");
  background-position: center 60%;
}
.hero__folie--pflaster {
  background-image: linear-gradient(0deg, rgba(20,18,14,.6), rgba(20,18,14,0) 55%), url("img/band-pflaster.webp");
  animation-delay: -7s;
}
.hero__folie figcaption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.8rem;
  color: var(--weiss);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

@keyframes hero-ueberblenden {
  0%, 40%  { opacity: 1; }
  50%, 90% { opacity: 0; }
  100%     { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__folie { animation: none; opacity: 0; }
  .hero__folie--muenzen { opacity: 1; }
}

/* Schmales Aufmacherbild am Seitenanfang, innerhalb des Kastens */
.banner {
  position: relative;
  overflow: hidden;
  height: clamp(3.5rem, 7vw, 4.5rem);
  background-image: url("img/band-garage.webp");
  background-size: cover;
  background-position: center 55%;
  border-bottom: 1px solid var(--linie);
}
/* Blendet die Fotokanten links/rechts ins Weiß der Kopfzeile ein, damit das
   Banner nicht hart gegen den Seitenhintergrund (ein anderes Foto) stößt. */
.banner::before,
.banner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(2rem, 8vw, 5rem);
  pointer-events: none;
}
.banner::before { left: 0; background: linear-gradient(90deg, var(--weiss), transparent); }
.banner::after { right: 0; background: linear-gradient(270deg, var(--weiss), transparent); }

.kicker {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--rot-tief);
}

.hero h1 { max-width: 22ch; margin-bottom: 0.45em; }
.hero p { color: var(--leise); max-width: 44ch; }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.7rem;
  margin: 1.1rem 0 0;
  max-width: none;
}

.knopf {
  display: inline-block;
  min-width: 13rem;
  padding: 0.7rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  border: 2px solid var(--rot);
  background: var(--rot);
  color: var(--weiss);
}
.knopf:hover { background: var(--rot-tief); border-color: var(--rot-tief); color: var(--weiss); }

.knopf--leer {
  background: transparent;
  border-color: var(--linie);
  color: var(--schiefer-tief);
}
.knopf--leer:hover {
  background: var(--stein);
  border-color: var(--schiefer);
  color: var(--schiefer-tief);
}

/* ---------- Abschnitte ---------- */

.abschnitt { padding-block: clamp(1.6rem, 3.4vw, 2.6rem); }
.abschnitt--sand { background: var(--sand); border-block: 1px solid var(--linie); }
.abschnitt--schmal { padding-block: 1.25rem; }

.marke {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 0 0 0.4rem;
}

.lead {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.35;
  color: var(--schiefer-tief);
  max-width: 32ch;
}

.textblock { max-width: 66ch; }
.textblock p:last-child { margin-bottom: 0; }

/* Native Aufklapp-Box statt JavaScript: hält die Startseite kurz, ohne den
   vollständigen, wörtlich zu übernehmenden Werbetext zu kürzen. */
.mehr summary {
  cursor: pointer;
  width: fit-content;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--rot-tief);
  list-style: none;
}
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary::after { content: " ▸"; }
.mehr[open] summary::after { content: " ▾"; }
.mehr summary:hover { color: var(--rot); }
.mehr[open] summary { margin-bottom: 0.6rem; }
.mehr p:last-child { margin-bottom: 0; }

.zweispalt {
  display: grid;
  gap: 1.25rem clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .zweispalt { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---------- Vorteile ---------- */

.vorteile {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) { .vorteile { grid-template-columns: repeat(3, 1fr); } }

.vorteil { padding-top: 0.7rem; border-top: 1px solid var(--linie); }
.vorteil__symbol { width: 2rem; height: 2rem; color: var(--rot-tief); margin-bottom: 0.5rem; }
.vorteil h3 { margin-bottom: 0.2rem; }
.vorteil p { margin: 0; font-size: 0.93rem; color: var(--leise); }

/* ---------- Kategorienmenü der Geräteseite ---------- */

.kategorien {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.kategorien a {
  display: block;
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--schiefer-tief);
  background: var(--stein);
  border: 1px solid var(--linie);
}
.kategorien a:hover { background: var(--schiefer); border-color: var(--schiefer); color: var(--weiss); }
.kategorien .zuruecksetzen { background: var(--weiss); }

/* Kategorien als Filter statt reiner Sprungmarken, ohne JavaScript: sobald
   eine Gruppe per Anker angesprungen ist (:target), blenden wir alle anderen
   Gruppen aus. "Alle" setzt den Anker auf eine nicht existierende ID zurück,
   dann matcht kein :target mehr und alles ist wieder sichtbar. Browser ohne
   :has()-Unterstützung ignorieren die Regel und zeigen weiterhin alle
   Gruppen (reine Sprungmarken-Funktion bleibt erhalten). */
@supports selector(:has(a)) {
  .huelle:has(.gruppe:target) .gruppe { display: none; }
  .huelle:has(.gruppe:target) .gruppe:target { display: block; }
}

.gruppe { margin-top: 1.9rem; }
.gruppe:first-of-type { margin-top: 0; }
.gruppe > h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--linie);
}
.gruppe > h2 .anzahl {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leise);
}
/* Sprungziel nicht unter der stehenden Kopfzeile verstecken */
.gruppe { scroll-margin-top: calc(var(--kopf-hoehe) + 0.75rem); }

/* ---------- Gerätekatalog ---------- */

.preishinweis {
  background: var(--sand);
  border: 1px solid var(--linie);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.4rem;
  font-size: 0.92rem;
}
.preishinweis p { margin: 0 0 0.4em; max-width: none; }
@media (min-width: 40rem) {
  .preishinweis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
  }
  .preishinweis > .marke { grid-column: 1 / -1; }
}
.preishinweis p:last-child { margin: 0; }
.preishinweis > .marke { margin-bottom: 0.3rem; }

.geraete {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  /* Karten einer Zeile werden auf gleiche Höhe gestreckt (Grid-Standard),
     die Preiszeile bleibt trotzdem unten (siehe .geraet__preis margin-top). */
}
@media (min-width: 30rem) { .geraete { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .geraete { grid-template-columns: repeat(3, 1fr); } }

.geraet {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie);
  background: var(--weiss);
}

.geraet__bild {
  margin: 0;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background: var(--stein);
  border-bottom: 1px solid var(--linie);
  overflow: hidden;
}
/* Platzhalter-Symbol, bis eigene Fotos vorliegen */
.geraet__bild svg { width: 32%; height: auto; color: #b4ada3; }
/* Wenn ein Foto eingesetzt wird, füllt es denselben Rahmen */
.geraet__bild img { width: 100%; height: 100%; object-fit: cover; }

.geraet__text { padding: 0.8rem 0.9rem 0.9rem; flex: 1 1 auto; }
.geraet__text h3 { margin-bottom: 0.35rem; }

.geraet__daten {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--leise);
}
.geraet__daten li { padding: 0.15rem 0; border-bottom: 1px solid var(--linie); }
.geraet__daten li:last-child { border-bottom: 0; }

.geraet__beschreibung {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--leise);
  max-width: none;
  margin-bottom: 0.5em;
}
.geraet__beschreibung:last-child { margin-bottom: 0; }

.geraet__preis {
  margin: auto 0 0;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--linie);
  background: var(--sand);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--schiefer-tief);
  font-variant-numeric: tabular-nums;
  max-width: none;
}
.geraet__preis .einheit { font-size: 0.78rem; font-weight: 500; color: var(--leise); }
.geraet__preis .zusatz {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--leise);
}

/* Kompakte Preisübersicht auf der Startseite */
.uebersicht { list-style: none; margin: 0; padding: 0; font-size: 0.93rem; }
.uebersicht li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--linie);
}
.uebersicht li:last-child { border-bottom: 0; }
.uebersicht .betrag { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Kontaktdaten ---------- */

.kontaktliste { list-style: none; margin: 0 0 1rem; padding: 0; }
.kontaktliste li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.7rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--linie);
}
.kontaktliste .bezeichnung {
  flex: 0 0 6.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--leise);
}

.portrait { margin: 0 0 0 auto; }
.portrait img { width: 100%; max-width: 320px; border: 1px solid var(--linie); }
.portrait figcaption {
  font-size: 0.85rem;
  color: var(--leise);
  padding-top: 0.5rem;
  text-align: right;
}

/* ---------- Rechtstexte ---------- */

.rechtstext { max-width: 68ch; }
.rechtstext h2 { margin-top: 1.7rem; font-size: 1.25rem; }
.rechtstext h3 { margin-top: 1.2rem; }
.rechtstext ul { padding-left: 1.1rem; margin-top: 0; }
.rechtstext li { margin-bottom: 0.25rem; }
.rechtstext address { font-style: normal; margin-bottom: 0.9rem; }
.rechtstext dl { margin: 0 0 0.9rem; }
.rechtstext dt { font-weight: 700; margin-top: 0.5rem; }
.rechtstext dd { margin: 0; }

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

.fuss {
  background: var(--schiefer-tief);
  color: #c3bdb4;
  padding-block: 1.75rem;
  font-size: 0.9rem;
  border-top: 3px solid var(--grau-logo);
}
.fuss a { color: var(--weiss); }
.fuss a:hover { color: #c3bdb4; }
.fuss h2 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #9d968c;
  margin-bottom: 0.5rem;
}
.fuss__gitter { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 36rem) { .fuss__gitter { grid-template-columns: 1.4fr 1fr; } }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss address { font-style: normal; line-height: 1.9; }
/* Mindestgröße für Klick- und Tippziele, WCAG 2.5.8 */
.fuss a, .kontaktliste a { display: inline-block; padding-block: 0.28rem; }

.fuss__schluss {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #46505c;
  font-size: 0.82rem;
  color: #9d968c;
  max-width: none;
}

/* ---------- Feste Anruf-Leiste, nur auf schmalen Bildschirmen ---------- */

.rufbalken { display: none; }

@media (max-width: 47.99rem) {
  body { padding-bottom: 3.5rem; }
  .rufbalken {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 45;
    border-top: 1px solid var(--rot-tief);
  }
  .rufbalken a {
    padding: 0.85rem 0.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--weiss);
    background: var(--rot);
  }
  .rufbalken a + a { background: var(--schiefer-tief); border-left: 1px solid var(--linie); }
  .rufbalken a:hover { color: var(--weiss); }

  /* Anrufen/E-Mail stehen hier schon in der festen Leiste ganz unten,
     die Knöpfe im Text wären eine doppelte Aufforderung. */
  .knopfreihe--ersetzt-mobil { display: none; }
}

/* ---------- Fehlerseite ---------- */

.fehler { padding-block: clamp(2rem, 6vw, 3.5rem); }
.fehler .knopfreihe { margin-top: 1.25rem; }

/* ---------- Druck ---------- */

@media print {
  .kopf, .nav, .knopfreihe, .kategorien, .rufbalken, .hero__bild { display: none; }
  body { color: #000; font-size: 10pt; padding-bottom: 0; }
  .geraet { break-inside: avoid; border-color: #999; }
  .fuss { background: none; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}