/*
THESIS: Der Mietpark als Werkhof-Katalog. Geräte auf hellen, abgerundeten
Karten mit sichtbarem Namen und Preisetikett; die Marke spricht über Farbe und
schräg gestellte, abgerundete Knöpfe; nur eine laute Stelle (der blaue Block). Verweigert die graue Theme-Galerie, deren
Namen erst beim Darüberfahren auftauchen.
OWN-WORLD: Nur die Logofarben: Signalblau #004ce5 als große Flächen,
Schwarz/Anthrazit #22211f für den Weg nach vorn (Knöpfe), Weiß. Kein Gelb –
das war die Akzentfarbe des alten WordPress-Themes, nicht der Marke. Titel in
Fira Sans 700 aufrecht (wie der Konfigurator), Fira Sans Extra Condensed 700
aufrecht in Versalien nur klein für Menü, Knöpfe, Filter, Kategorien; Lato für
Fließtext. Kursiv nur im Logo, im blauen Block und in den Ablauf-Ziffern. Weiße Karten mit 14px Radius auf Werkhof-Grau,
Knöpfe schräg (-12°) mit 8px Radius, große Bänder gerade.
STORY: Besucher sehen sofort Gerät und Tagespreis, grenzen mit Filter oder
Suche ein, öffnen das Gerät und rechnen den Mietpreis aus.
FIRST VIEWPORT: Weißer Kopf mit Logo und Kontakt, anthrazitfarbene Menüleiste
in schmalen Versalien, Startbild mit weißem Schrägknopf, darunter ein
gerades blaues Band mit Hinweis und Suchfeld.
FORM: vom Nutzer vorgegeben (Amazon-Kartenraster, GESIPA-Härte nur als Prise),
keine Auslosung; Hausfarben und Struktur der Seite bleiben. Fassung 2 nach
Rückmeldung: Titel waren zu fett und zu groß. Fassung 3: zu normal geworden,
schräge Knöpfe zurück, schräge Bandkanten wirkten komisch und sind gerade.
Fassung 4: Gelb passte nicht zur Seite, Akzent jetzt Schwarz aus dem Logo.
Danach Kategorien als Liste links. Am 21.10.2026 als Hauptstil übernommen.
FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
*/

/* Stil der Website „Werkhof“. Struktur wie die alte WordPress-Seite, eigene
   Schriften, Flächen, Formen und Knöpfe. Handy und Tablet: Stufen in
   rahmen.css. Der alte Nachbau „wie jetzt“ liegt im Git unter der Marke
   nachbau-wie-jetzt (git show nachbau-wie-jetzt:webseite/stil.css). */

/* Farben, Schriften, Radien, Schatten und Breite stehen in
   gemeinsam/grundwerte.css, Grundlagen, Kopf, Menü und Fuß in rahmen.css –
   beide werden vor dieser Datei geladen. */
main:has(> .mietpark:last-child){background:var(--grund)}
h1,h2,h3,h4,h5,h6{font-family:var(--ui); color:var(--titel); font-weight:700; line-height:1.2;
  margin:1.6em 0 .5em; text-wrap:balance}
h2,h3{letter-spacing:-.02em; line-height:1.15}
h2{font-size:34px} h3{font-size:27px} h4{font-size:19px} h5{font-size:16px} h6{font-size:14px}
p{margin:0 0 1em}
hr{border:0; border-top:1px solid var(--linie); margin:16px 0}
.unsichtbar{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ——— Schrägknopf: Fläche geneigt und abgerundet, Schrift gerade —— */
.knopf, .aufruf a{position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border:0; background:none; cursor:pointer; text-decoration:none;
  font-family:var(--anzeige); font-weight:700; font-size:18px; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; transition:transform .25s var(--kurve)}
.knopf::before, .aufruf a::before{content:''; position:absolute; inset:0; z-index:-1; border-radius:8px;
  background:var(--blau); transform:skewX(var(--schraeg));
  box-shadow:0 3px 6px rgba(20,22,28,.12), 0 12px 22px -12px rgba(20,22,28,.4);
  transition:background .2s, box-shadow .25s var(--kurve)}
.knopf:hover, .aufruf a:hover{transform:translateY(-2px); color:#fff}
.knopf:hover::before{background:var(--blau-tief)}
.knopf.gelb{color:#fff}
.knopf.gelb::before{background:var(--anthrazit)}
.knopf.gelb:hover{color:#fff}
.knopf.gelb:hover::before{background:var(--schwarz)}
/* Auf dem dunklen Startbild hebt sich nur Weiß ab */
.knopf.dunkel{color:var(--anthrazit)}
.knopf.dunkel::before{background:#fff}
.knopf.dunkel:hover{color:var(--blau)}
.knopf.dunkel:hover::before{background:#fff}
.knopf:active, .aufruf a:active{transform:translateY(0)}

/* ——— Titelleiste: blaues Band mit Schrägschnitt —————————— */
.titelleiste{position:relative; isolation:isolate; background:var(--blau)}
/* Mit Kopfbild: Das Blau liegt als Schicht über dem Foto und multipliziert es.
   Alle Seiten nutzen schneider-header.jpg (27.10.2026). Darunter steht seine
   Mittelfarbe: Malt der Browser die Seite, bevor das Foto da ist, ist
   die Leiste schon fast so dunkel wie mit Foto, statt hellblau aufzublitzen. */
.titelleiste.mit-bild{background:#172638}
.titelleiste.mit-bild::after{content:''; position:absolute; inset:0; z-index:-1;
  background:var(--blau); mix-blend-mode:multiply}
.titelleiste-bild{position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover}
/* 185px wie der Kopf des Rechners mit Titel und Schrittzeile (27.10.2026, vorher 200px) */
.titelleiste .breite{min-height:185px; display:flex; flex-direction:column; justify-content:center;
  padding-top:34px; padding-bottom:38px}
.titelleiste h1{margin:0; font-weight:700; font-size:40px; line-height:1.1;
  letter-spacing:-.02em; color:#fff; max-width:30ch}
.titelleiste h1::after{content:''; display:block; width:64px; height:6px; margin-top:16px;
  background:#fff; transform:skewX(var(--schraeg)); transform-origin:left bottom}
.titelleiste .untertitel{order:-1; font-family:var(--anzeige); font-weight:700; font-size:16px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--blau-text); margin-bottom:6px}
.titelleiste.mit-bild h1, .titelleiste.mit-bild .untertitel{color:#fff}
/* Geräte-, Kategorie- und Gebrauchtseiten: Der Pfad steht als Dachzeile über
   dem Titel. Die Stufen sind Links (dezent unterstrichen), die Unterkategorie
   nicht, weil sie keine eigene Seite hat. */
.dachzeile{font-family:var(--ui); font-weight:500; font-size:15px;
  color:var(--blau-text); margin-bottom:8px}
.dachzeile a{color:#fff; text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:4px; text-decoration-color:rgba(255,255,255,.4)}
.dachzeile a:hover{text-decoration-color:#fff}
/* 44px Trefffläche am Handy und Tablet, sichtbar bleibt die Zeile */
@media (max-width:999px){
  .dachzeile a{position:relative}
  .dachzeile a::after{content:''; position:absolute; inset:-13px -4px}
}
.titelleiste.mit-bild .dachzeile{color:#fff}
/* Leisten ohne Kopfbild sind niedriger – das Bild braucht die Höhe,
   die blaue Fläche nicht */
.titelleiste:not(.mit-bild) .breite{min-height:0; padding-top:26px; padding-bottom:30px}
/* Kategorieseiten: ein bis zwei Sätze unter dem Titel – wofür, welche Größen.
   Weiß wie der Titel, über die volle Breite (gewünscht, nicht begrenzen) */
.titelleiste .einleitung{margin:18px 0 0; font-family:var(--ui);
  font-size:17px; line-height:1.5; color:#fff}

/* ——— Startseite ———————————————————————————————— */
.startbild{position:relative; min-height:560px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:30px; padding-bottom:40px;
  background:#41484f; isolation:isolate}   /* Mittelfarbe von startbild.jpg, gegen das Aufblitzen */
.startbild::before{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.45))}
.startbild > *{position:relative}
/* Wie das Kopfbild als <img>: hinter Verlauf, Logo und Knopf */
.startbild > .startbild-bild{position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover}
.startbild-logo{width:360px; height:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.startbild .knopf{font-size:21px; padding:17px 36px}
/* „Zum Mietpark“ pulsiert: Der Knopf atmet leicht, und ein weißer Ring
   läuft aus der schrägen Fläche heraus. Beim Darüberfahren steht er still,
   damit er gut zu treffen ist. */
.startbild .knopf{animation:atmen 2.4s ease-in-out infinite}
.startbild .knopf::before{animation:puls 2.4s ease-out infinite}
.startbild .knopf:hover, .startbild .knopf:focus-visible,
.startbild .knopf:hover::before, .startbild .knopf:focus-visible::before{animation:none}
@keyframes atmen{
  0%, 100%{transform:scale(1)}
  50%     {transform:scale(1.04)}
}
@keyframes puls{
  0%  {box-shadow:0 3px 6px rgba(20,22,28,.12), 0 12px 22px -12px rgba(20,22,28,.4), 0 0 0 0 rgba(255,255,255,.85)}
  80% {box-shadow:0 3px 6px rgba(20,22,28,.12), 0 12px 22px -12px rgba(20,22,28,.4), 0 0 0 20px rgba(255,255,255,0)}
  100%{box-shadow:0 3px 6px rgba(20,22,28,.12), 0 12px 22px -12px rgba(20,22,28,.4), 0 0 0 20px rgba(255,255,255,0)}
}

.streifen{position:relative; z-index:2; background:var(--blau); color:#fff; padding:26px 0}
.streifen .breite{display:flex; align-items:center; gap:34px}
.streifen h2{flex:1; margin:0; font-weight:700; font-size:24px; line-height:1.25;
  letter-spacing:-.01em; color:#fff}
.suchfeld{flex:0 0 360px; height:54px; padding:0 18px 0 48px; border:0; border-radius:var(--r-klein);
  font:inherit; font-family:var(--ui); font-size:17px; color:var(--titel);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004ce5' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") 16px 50%/20px no-repeat;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.suchfeld::placeholder{color:#7b8392}
.suchfeld:focus{outline:3px solid #fff; outline-offset:3px}

.mietpark{background:var(--grund); padding:34px 0 60px}

/* Unter dem Mietpark: wer wir sind, Werkstatt und Hydraulik. Weiße Karten auf
   dem Grau des Mietparks wie die Gerätekacheln; die Dienste sind ganz
   anklickbar und heben sich wie eine Kachel. Der Text muss sichtbar bleiben:
   Nur für Suchmaschinen versteckter Text gilt bei Google als Täuschung. */
.ueber-uns{background:var(--grund); padding:0 0 70px}
/* Links der Text über zwei Zeilen, rechts die Dienste untereinander */
.ueber-uns .breite{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch}
.ueber-haupt{grid-row:span 2}
.ueber-karte{display:flex; flex-direction:column; align-items:flex-start; padding:30px 32px;
  background:var(--karte); border-radius:var(--r); box-shadow:var(--schatten); color:var(--text);
  text-decoration:none}
.ueber-karte p{line-height:1.65; text-wrap:pretty}
.ueber-dach{margin:0 0 6px; font-family:var(--anzeige); font-size:14px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--blau)}
.ueber-uns h2{margin:0 0 .6em; font-size:28px}
.ueber-uns h3{margin:0 0 .5em; font-size:20px}
.ueber-haupt .knopf{margin-top:auto}
.ueber-haupt .knopf svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linejoin:round}
/* Dienst: Symbol links, Titel, Text und Link rechts daneben */
.ueber-dienst{display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:20px; align-content:start}
.ueber-dienst > :not(.ueber-symbol){grid-column:2}
.ueber-symbol{grid-row:span 3; display:grid; place-items:center; width:52px; height:52px;
  border-radius:50%; background:var(--blau-hell)}
.ueber-dienst h3{margin-top:12px}
.ueber-symbol svg{width:26px; height:26px; fill:none; stroke:var(--blau); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.ueber-mehr{margin-top:auto; font-family:var(--anzeige); font-size:16px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--blau)}
.ueber-dienst{transition:transform .3s var(--kurve), box-shadow .3s var(--kurve)}
@media (hover:hover){
  .ueber-dienst:hover{transform:translateY(-4px); box-shadow:var(--schatten-hoch); color:var(--text)}
  .ueber-dienst:hover h3{color:var(--blau)}
}
@media (max-width:999px){
  .ueber-uns{padding-bottom:48px}
  .ueber-uns .breite{grid-template-columns:minmax(0,1fr); gap:16px}
  .ueber-karte{padding:24px 22px}
  .ueber-uns h2{font-size:24px}
}

/* Variante B: Kategorien als Liste links wie in Onlineshops, beim Scrollen
   mitlaufend; das Raster rechts hat drei Spalten. Die Leiste über dem Raster
   liegt unter der Git-Marke entwurf-filterleiste-oben. Nur auf der
   Startseite (#mietpark), die Kategorieseiten behalten das volle Raster. */
#mietpark .breite{display:grid; grid-template-columns:250px 1fr; gap:30px; align-items:start}
#mietpark .mietpark-kopf{grid-row:1 / span 2; position:sticky; top:84px; background:var(--karte);
  border-radius:var(--r); padding:18px 10px 12px; box-shadow:var(--schatten);
  max-height:calc(100vh - 104px); overflow-y:auto}
#mietpark .mietpark-kopf::before{content:'Kategorien'; display:block; padding:0 12px 10px;
  font-family:var(--anzeige); font-size:15px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-leise)}
/* Das Raster klebt wie die Liste: Ist es kürzer (z. B. 2 Geräte), läuft es
   mit, bis die Liste zu Ende ist; ist es länger, scrollt es ganz normal */
#mietpark .raster{grid-template-columns:repeat(3,minmax(0,1fr)); position:sticky; top:84px}
.filter{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.filter button{display:flex; justify-content:space-between; align-items:baseline; gap:12px; width:100%;
  background:none; border:0; border-radius:var(--r-klein); padding:8px 12px; cursor:pointer; text-align:left;
  font-family:var(--ui); font-size:15.5px; font-weight:500; color:var(--titel);
  transition:background .15s, color .15s}
.filter .anzahl{font-size:13px; font-weight:400; color:var(--text-leise); font-variant-numeric:tabular-nums}
.filter button:hover{background:var(--blau-hell); color:var(--blau)}
.filter button[aria-pressed="true"]{background:var(--blau); color:#fff}
.filter button[aria-pressed="true"] .anzahl{color:var(--blau-text)}
.kat-knopf{display:none}
.raster-leer{padding:40px 0; font-family:var(--ui); font-size:18px; color:var(--text-leise)}

/* ——— Kartenraster ——————————————————————————————— */
.raster{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.raster.weit{gap:20px}
.raster.drei{grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
/* Kategoriewechsel im Mietpark: Das Raster blendet kurz aus, dann erscheinen
   die neuen Kacheln nacheinander (--i setzt seite.js, höchstens 11) */
#mietpark .raster{transition:opacity .12s ease-out}
#mietpark .raster.wechselt{opacity:0}
.kachel.erscheint{animation:erscheinen .5s var(--kurve) both; animation-delay:calc(var(--i, 0) * 40ms)}
@keyframes erscheinen{from{opacity:0; transform:translateY(16px)}}
.kachel a{position:relative; display:flex; flex-direction:column; height:100%; padding:10px;
  background:var(--karte); border-radius:var(--r); text-decoration:none; box-shadow:var(--schatten);
  transition:transform .3s var(--kurve), box-shadow .3s var(--kurve)}
.kachel a:hover{transform:translateY(-4px); box-shadow:var(--schatten-hoch)}
.kachel img{display:block; width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:10px;
  background:#f1f2f4}
.raster.weit .kachel img{aspect-ratio:5/4}
.raster.drei .kachel img{aspect-ratio:4/3}
.kachel-text{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:14px 8px 8px; flex:1}
.kachel-kat{order:-1; font-family:var(--anzeige); font-size:14px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--blau)}
.kachel-titel{font-family:var(--ui); font-size:17px; font-weight:500; color:var(--titel); line-height:1.3}
.kachel a:hover .kachel-titel{color:var(--blau)}
.marke{position:absolute; top:20px; left:20px; z-index:1; background:var(--anthrazit); color:#fff;
  font-family:var(--anzeige); font-size:15px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:4px 12px; border-radius:6px}

/* ——— Geräteseite ————————————————————————————————— */
.seite-geraet main, .seite-gebraucht main{background:var(--grund)}
/* Ein Abstand für alles: 28px zwischen Leiste, Karten und Blätterleiste.
   Beide Karten kleben; die kürzere läuft beim Scrollen mit, bis die längere
   zu Ende ist, und endet dann bündig mit ihr. */
.geraet{display:grid; grid-template-columns:1.55fr 1fr; gap:28px; padding:28px 0; align-items:start}
.geraet > div{position:sticky; top:88px}
.geraet-bild, .geraet > div:first-child{background:var(--karte); border-radius:var(--r); padding:24px;
  box-shadow:var(--schatten)}
.geraet-bild img{display:block; width:100%; border-radius:10px}
.geraet-info{background:var(--karte); border-radius:var(--r); padding:28px 30px 30px; box-shadow:var(--schatten)}
.geraet-info h2{margin-top:0; font-size:24px}
/* Preistabelle: brutto fett (PAngV verlangt ihn hervorgehoben), netto gleich
   groß in normaler Stärke; Beträge rechtsbündig, damit die Cent untereinanderstehen */
.preise{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; margin:0 0 4px}
/* Abschnittstitel blau links; der erste steht in der Kopfzeile auf einer
   Grundlinie mit den Spaltenköpfen */
.preise th[scope="col"]{font-family:var(--anzeige); font-weight:700; font-size:14px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-leise); text-align:right; padding:0 0 6px 16px; white-space:nowrap;
  vertical-align:baseline}
.preise th[scope="colgroup"]{font-family:var(--anzeige); font-weight:700; font-size:16px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--blau); text-align:left; padding:20px 0 6px; vertical-align:baseline}
.preise thead th[scope="colgroup"]{padding-top:0}
.preise th[scope="row"]{font-family:var(--ui); font-weight:500; color:var(--titel); text-align:left;
  padding:7px 0; line-height:1.35}
.preise th small{display:block; font-family:var(--lauf); font-weight:400; font-size:14px; color:var(--text-leise)}
.preise td{text-align:right; padding:7px 0 7px 16px; white-space:nowrap; vertical-align:top}
.preise tr:not(.abschnitt) + tr:not(.zusatz) > *{border-top:1px solid var(--linie)}
.preise .brutto{font-weight:700; color:var(--titel)}
.preise .netto{color:var(--text)}
.preise td.ohne{color:var(--text)}
.preise .zusatz th[scope="row"]{font-weight:400; color:var(--text)}
/* Miete und Versicherung als Paar: eng untereinander, ohne Linie dazwischen;
   Linie und Abstand erst nach dem Paar */
.preise tr:has(+ tr.zusatz) > *{padding-bottom:0}
.preise tr.zusatz > *{padding-top:1px}
.geraet-info h2:not(:first-child), .geraet-info .technik + .preisteil{margin-top:40px}
/* Ein Satz aus dem Katalog als leise Schlussnotiz der Karte (für Suchmaschinen
   und KI, SICHTBARKEIT.md): sichtbar, aber ohne sich vorzudrängen */
.geraet-info .geraet-satz{margin:30px 0 0; padding-top:18px; border-top:1px solid var(--linie);
  font-size:14px; line-height:1.5; color:var(--text-leise)}
.geraet-info hr{width:64px; height:7px; border:0; background:var(--blau); margin:14px 0 24px;
  transform:skewX(var(--schraeg)); transform-origin:left}
.geraet-info h3{font-size:18px; line-height:1.3; margin:26px 0 10px; padding-top:22px;
  border-top:1px solid var(--linie)}
.geraet-info h4{font-family:var(--anzeige); font-weight:700; font-size:16px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--blau); margin:20px 0 6px}
.geraet-info p{font-variant-numeric:tabular-nums}
.geraet-info strong{font-family:var(--ui); color:var(--titel); font-weight:500}
.geraet-info .knopf{display:flex; width:fit-content; margin:22px auto 0; font-size:21px; padding:17px 34px}
.geraet-info .anmerkung{background:var(--blau-hell); border-radius:var(--r-klein);
  padding:10px 14px; color:var(--blau-tief)}
.blaettern{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 0 64px}
.blaettern > div{flex:1; display:flex}
.blaettern > div:last-child{justify-content:flex-end}
.blaettern > div:nth-child(2){flex:0 0 auto}
.blaettern a{display:flex; align-items:center; gap:16px; padding:10px 18px 10px 10px; background:var(--karte);
  border-radius:var(--r); text-decoration:none; color:var(--titel); box-shadow:var(--schatten);
  transition:transform .3s var(--kurve), box-shadow .3s var(--kurve)}
.blaettern a.weiter{padding:10px 10px 10px 18px; text-align:right}
.blaettern a:hover{transform:translateY(-3px); box-shadow:var(--schatten-hoch)}
.blaettern img{width:96px; height:72px; object-fit:cover; border-radius:8px}
.blatt-name{display:block; font-family:var(--ui); font-size:15px; font-weight:500}
.blatt-richtung{display:block; margin:3px 0 0; font-family:var(--anzeige); font-size:14px; font-weight:700;
  color:var(--blau); text-transform:uppercase; letter-spacing:.04em}
.blaettern .rasterknopf{gap:10px; padding:16px 22px; justify-content:center; font-family:var(--anzeige);
  font-size:17px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.blaettern .rasterknopf svg{width:22px; height:22px; fill:var(--blau)}
.blaettern .rasterknopf:hover{color:var(--blau)}

/* ——— Gebrauchtgerät ———————————————————————————————— */
.galerie-gross img{display:block; width:100%; border-radius:10px}
.galerie-klein{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.galerie-klein button{padding:0; border:3px solid transparent; border-radius:10px; background:none; cursor:pointer;
  overflow:hidden}
.galerie-klein button[aria-current="true"]{border-color:var(--blau)}
.galerie-klein img{display:block; width:96px; height:72px; object-fit:cover}
.eckdaten{list-style:none; padding:0; margin:0 0 10px; font-variant-numeric:tabular-nums}
.eckdaten li{padding:4px 0}
.preis{font-family:var(--ui); font-weight:700; font-size:28px; line-height:1.2; letter-spacing:-.01em;
  color:var(--blau); margin:18px 0 4px; font-variant-numeric:tabular-nums}
.preis small{font-size:15px; font-weight:500; color:var(--text-leise); letter-spacing:0}
.preis-netto{font-variant-numeric:tabular-nums; margin:0 0 16px}
.geraet-info .marke{border-radius:6px}

/* ——— Textseiten ———————————————————————————————— */
/* Rand oben und unten als Werte: Ablauf-Band, Aufruf und Karte reichen
   mit negativem Rand genau bis an den Fuß bzw. an die Titelleiste */
.text{--rand-oben:80px; --rand-unten:70px; padding:var(--rand-oben) 30px var(--rand-unten)}
.text > :first-child, .spalten > div > :first-child{margin-top:0}
.spalten{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-bottom:40px}
/* Mietbedingungen: nummerierte Ziffern mit Trennlinie nur zwischen den Punkten,
   jede Ziffer per #ziffer-N anspringbar */
.ziffern{list-style-position:inside; padding:0; margin:0}
.ziffern li{padding:16px 0}
.ziffern li:first-child{padding-top:0}
.ziffern li + li{border-top:1px solid var(--linie)}
.ziffern li::marker{font-weight:700}
.ziffern li:target{background:var(--blau-hell); box-shadow:-12px 0 0 var(--blau-hell), 12px 0 0 var(--blau-hell)}
.haken{list-style:none; padding:0; margin:0 0 28px}
.haken li{position:relative; padding:7px 0 7px 40px; color:var(--text); font-size:17px}
.haken li::before{content:''; position:absolute; left:0; top:8px; width:26px; height:26px;
  border-radius:6px; background:var(--blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat}
/* Kontaktseite: dieselben Symbole wie im Fuß, hell und mit Beschriftung */
.kontakt-liste{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:26px}
.kontakt-liste li{display:flex; gap:18px; align-items:flex-start}
.kontakt-liste svg{flex:none; width:44px; height:44px; padding:11px; border-radius:50%;
  background:var(--blau-hell); fill:none; stroke:var(--blau); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
/* WhatsApp-Zeichen gefüllt in WhatsApp-Grün statt als blaue Linie */
.kontakt-liste .whatsapp svg{background:#e7f9ee; fill:#1da851; stroke:none}
.kontakt-liste span{display:flex; flex-direction:column; color:var(--titel); line-height:1.55}
.kontakt-liste small{font-family:var(--anzeige); font-weight:700; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-leise); margin-bottom:2px}
.kontakt-liste a{color:var(--titel); text-decoration:none}
.kontakt-liste a:hover{color:var(--blau)}
.kontakt-liste em{display:block; margin-top:8px; color:var(--text-leise); font-size:15px}
.kontakt-telefon{font-family:var(--ui); font-weight:700; font-size:26px; line-height:1.2}
@media (max-width:999px){ .kontakt-telefon{display:inline-flex; align-items:center; min-height:44px} }
.text figure{margin:0}
.text figure img{display:block; width:100%; height:auto; border-radius:var(--r); box-shadow:var(--schatten)}
/* FAQ wie der Rest der Website: weiße Karten auf Werkhof-Grau (06.11.2026).
   Das Ablauf-Band wird dort weiß, auf Grau wäre es nicht mehr zu erkennen. */
main:has(details){background:var(--grund)}
main:has(details) .ablauf-block{background:var(--karte)}
details{background:var(--karte); border-radius:12px; margin:0 0 10px; box-shadow:var(--schatten);
  transition:background .2s}
details[open]{background:var(--blau-hell)}
summary{cursor:pointer; padding:16px 20px; font-family:var(--ui); font-weight:500; font-size:16px;
  color:var(--titel); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:''; flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--blau-hell)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004ce5' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform .3s var(--kurve)}
details[open] summary::after{background-color:#fff; transform:rotate(180deg)}
summary:hover{color:var(--blau)}
details > :not(summary){padding:0 20px}
details > p:last-child{padding-bottom:10px}
.text h2{font-size:28px; margin:40px 0 14px}
.text h3{font-size:19px; letter-spacing:-.01em; margin:30px 0 10px}
.text h4{font-size:17px; margin:24px 0 8px}
/* Ablauf „Baumaschinen mieten ist so einfach…“: graues Band am Seitenende,
   je Schritt eine blaue Kachel mit Symbol, Pfeil zum nächsten Schritt.
   Symbole aus Lucide (lucide.dev, ISC-Lizenz), als Maske weiß eingefärbt. */
.ablauf-block{background:var(--grund); margin:64px calc(50% - 50vw) calc(-1 * var(--rand-unten));
  padding:60px calc(50vw - 50%) 64px}
.ablauf-block h2{margin-top:0}
.ablauf{list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:36px;
  counter-reset:schritt; margin:32px 0 0}
.ablauf li{counter-increment:schritt; position:relative; padding-top:86px;
  font-size:16px; line-height:1.6; color:var(--text)}
.ablauf li:not(:last-child){background:
  linear-gradient(var(--blau-akzent), var(--blau-akzent)) no-repeat 92px 30px / calc(100% - 108px) 2px,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 2l6 6-6 6' fill='none' stroke='%237fa6ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px top 23px / 10px 16px}
.ablauf li::before{content:''; position:absolute; left:6px; top:0; width:66px; height:60px;
  border-radius:8px; background:var(--blau); transform:skewX(var(--schraeg))}
.ablauf li::after{content:''; position:absolute; left:23px; top:14px; width:32px; height:32px;
  background:#fff; -webkit-mask:var(--symbol) center / contain no-repeat; mask:var(--symbol) center / contain no-repeat}
.ablauf b{display:block; margin-bottom:8px; font-family:var(--anzeige); font-style:italic; font-weight:800;
  font-size:23px; line-height:1.15; letter-spacing:.01em; text-transform:uppercase; color:var(--titel)}
.ablauf b::before{content:counter(schritt) '. '; color:var(--blau)}
.ablauf [data-symbol="suche"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")}
.ablauf [data-symbol="lkw"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E")}
.ablauf [data-symbol="helm"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5'/%3E%3Cpath d='M14 6a6 6 0 0 1 6 6v3'/%3E%3Cpath d='M4 15v-3a6 6 0 0 1 6-6'/%3E%3Crect x='2' y='15' width='20' height='4' rx='1'/%3E%3C/svg%3E")}
.ablauf [data-symbol="zurueck"]{--symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E")}
.text .ablauf-weiter{display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin:44px 0 0}
.aufruf, .text .karte{margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw)}
.aufruf{background:var(--blau); color:#fff; display:flex; align-items:center;
  justify-content:space-between; gap:30px; padding:56px calc(50vw - 50%); margin-top:40px; margin-bottom:calc(-1 * var(--rand-unten))}
.aufruf p{margin:0; font-family:var(--anzeige); font-style:italic; font-weight:800; font-size:46px;
  line-height:1; text-transform:uppercase; letter-spacing:.005em; color:#fff}
.aufruf a{color:#fff}
.aufruf a::before{background:var(--anthrazit)}
.aufruf a::after{content:''; width:18px; height:18px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.aufruf a:hover{color:#fff}
.aufruf a:hover::before{background:var(--schwarz)}
/* Lageplan als Bild (siehe kontakt.html): am Desktop ein Band über die ganze
   Breite direkt unter dem Kopf, SCHNEIDER bleibt beim Beschneiden mittig */
.text .karte{margin:calc(-1 * var(--rand-oben)) 0 56px}
.text .karte > a{display:block; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw)}
.karte img{display:block; width:100%; height:440px; object-fit:cover}
.text .karte-quelle{margin:8px 0 0; font-size:12.5px; color:var(--text-leise)}
.text .karte p:last-child{margin:18px 0 0; text-align:center}
/* Wegweiser wie in Google Maps: Raute mit Abbiegepfeil */
.karte .knopf svg{flex:none; width:22px; height:22px; fill:currentColor}
.galerie{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.galerie img{display:block; width:100%; height:auto; border-radius:12px}
.galerie img:first-child{grid-column:1 / -1}

/* ——— Touch: nichts hebt sich ——————————————————————————
   Ohne Maus gilt :hover nach dem Antippen weiter, bis woanders getippt wird.
   Eine Kachel bliebe dann angehoben stehen, auch nach „Zurück“. */
@media (hover:none){
  .knopf:hover, .aufruf a:hover, .kachel a:hover, .blaettern a:hover{transform:none}
  .kachel a:hover, .blaettern a:hover{box-shadow:var(--schatten)}
  .kachel a:hover .kachel-titel{color:var(--titel)}
  /* Farben ebenso: Eine zugeklappte FAQ-Frage blieb blau (iPhone, 30.10.2026) */
  summary:hover, .kontakt-liste a:hover, .blaettern .rasterknopf:hover{color:var(--titel)}
  .knopf:hover::before{background:var(--blau)}
  .knopf.gelb:hover::before{background:var(--anthrazit)}
  .knopf.dunkel:hover{color:var(--anthrazit)}
  .filter button:hover:not([aria-pressed="true"]){background:none; color:var(--titel)}
}

/* ——— Schmale Fenster (Stufen in rahmen.css) ——————————————— */
@media (max-width:999px){
  /* minmax(0,…): Sonst dehnt der längste Gerätename die Spalte übers Fenster */
  .raster, .raster.drei, #mietpark .raster{grid-template-columns:repeat(3,minmax(0,1fr))}
  #mietpark .breite{display:block}
  #mietpark .mietpark-kopf{position:static; max-height:none; margin-bottom:20px}
  #mietpark .raster{position:static}
  /* Kategorien unter einem Knopf, der die gewählte nennt (seite.js setzt
     .klappt, ohne Skript bleibt die Liste offen). Der Knopf klebt unter der
     Menüleiste, damit man auch tief im Raster die Kategorie wechseln kann. */
  #mietpark .mietpark-kopf.klappt{position:sticky; top:74px; z-index:5; padding:0;
    max-height:calc(100dvh - 84px); overflow-y:auto;
    box-shadow:0 -10px 0 var(--grund), var(--schatten)}   /* Grau deckt den Spalt zur Menüleiste */
  #mietpark .mietpark-kopf.klappt::before{display:none}
  .klappt .kat-knopf{display:flex; align-items:center; gap:8px; width:100%; min-height:54px;
    padding:0 18px; border:0; background:none; cursor:pointer; text-align:left;
    font-family:var(--ui); font-size:16px; font-weight:400; color:var(--text)}
  .kat-knopf b{font-weight:700; color:var(--titel)}
  .kat-knopf .anzahl{font-size:13px; color:var(--text-leise); font-variant-numeric:tabular-nums}
  .kat-knopf::after{content:''; flex:none; margin-left:auto; width:28px; height:28px; border-radius:50%;
    background:var(--blau-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004ce5' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;
    transition:transform .3s var(--kurve)}
  .offen .kat-knopf::after{transform:rotate(180deg)}
  .klappt:not(.offen) .filter{display:none}
  .klappt .filter{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px 8px;
    padding:6px 8px 10px; border-top:1px solid var(--linie)}
  .filter button{min-height:44px; align-items:center}
  .geraet, .spalten, .ablauf{grid-template-columns:minmax(0,1fr)}
  .geraet > div{position:static}
  /* Einspaltig kommen Preise und „Mietpreis berechnen“ vor die technischen
     Daten: Danach sucht, wer die Seite öffnet (abgestimmt 30.10.2026) */
  .geraet-info:has(> .preisteil){display:flex; flex-direction:column}
  .geraet-info .preisteil{order:-1}
  .geraet-info .technik + .preisteil{margin-top:0}
  .geraet-info .technik{margin-top:44px; padding-top:30px; border-top:1px solid var(--linie)}
  .geraet-info .technik > :last-child{margin-bottom:0}
  .streifen .breite{flex-direction:column; align-items:stretch; gap:16px}
  .suchfeld{flex:auto; width:100%}
  .titelleiste h1{font-size:32px}
  .streifen h2{font-size:20px}
  .aufruf{flex-direction:column; align-items:flex-start}
  .aufruf p{font-size:28px}
}
@media (max-width:759px){
  .raster, .raster.drei, #mietpark .raster{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .kachel a{padding:6px}
  .kachel-text{padding:10px 6px 6px}
  .kachel-kat{font-size:12.5px}
  .kachel-titel{font-size:15px; overflow-wrap:anywhere}
  #mietpark .mietpark-kopf.klappt{top:66px; max-height:calc(100dvh - 76px)}
  .klappt .filter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter button{padding:8px 10px; font-size:15px}
  .startbild{min-height:440px; gap:24px}
  .startbild-logo{width:270px}
  .startbild .knopf{font-size:19px; padding:15px 30px}
  .streifen{padding:20px 0 22px}
  .streifen h2{font-size:18px}
  .titelleiste h1{font-size:28px}
  .titelleiste .einleitung{font-size:16px; margin-top:14px}
  .text{--rand-oben:40px; --rand-unten:50px; padding-left:18px; padding-right:18px}
  /* Ablauf senkrecht: Symbol links, Text rechts, eine Linie führt zum
     nächsten Schritt (die Pfeile nach rechts zeigten untereinander ins Leere) */
  .ablauf-block{padding-top:44px; padding-bottom:50px}
  .ablauf{gap:0; margin-top:26px}
  .ablauf li{padding:4px 0 30px 92px; min-height:60px}
  .ablauf li:last-child{padding-bottom:0}
  .ablauf li:not(:last-child){background:linear-gradient(var(--blau-akzent), var(--blau-akzent))
    no-repeat 38px 72px / 2px calc(100% - 82px)}
  .ablauf b{font-size:21px; margin-bottom:4px}
  .text .ablauf-weiter{flex-direction:column; align-items:center; gap:16px; margin-top:34px}
  /* Am Handy der engere Ausschnitt als Karte im Text statt als Band */
  .text .karte{margin:0 0 40px}
  .text .karte > a{margin:0}
  .karte img{height:auto; border-radius:var(--r); box-shadow:var(--schatten)}
  /* Blätterleiste: vor und zurück nebeneinander, ohne Bild; „Zurück zum
     Mietpark“ darunter über die ganze Breite */
  .blaettern{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:12px; padding-bottom:40px}
  .blaettern > div:nth-child(2){grid-column:1 / -1; order:1}
  .blaettern a, .blaettern a.weiter{width:100%; min-width:0; height:100%; padding:12px 14px}
  .blatt-name{overflow-wrap:anywhere}
  .blaettern img{display:none}
  .blaettern .rasterknopf{justify-content:center}
  /* Preistabelle: Mit Desktop-Rändern und einzeiliger Kopfzeile („inkl. 19 %
     MwSt.“ allein 120px) war sie bei 360px bis zu 30px zu breit */
  .geraet{gap:16px; padding:18px 0}
  .geraet-bild, .geraet > div:first-child{padding:12px}
  .geraet-info{padding:22px 18px 24px}
  .preise th[scope="col"]{white-space:normal; padding-left:10px}
  .preise td{padding-left:10px}
  .preise th[scope="row"]{overflow-wrap:anywhere}
  .geraet-info .knopf{font-size:18px; padding:15px 26px; white-space:nowrap}
}