/* =====================================================================
   RENT by Stahluminium – Designsystem
   Farbwelt: Anthrazit, Stahlgrau, Silber. Signalfarben nur für Status.
   ===================================================================== */

:root{
  color-scheme: light;

  /* Flächen */
  --c-bg:        #f2f4f6;
  --c-bg-tief:   #e8ebee;
  --c-surface:   #ffffff;
  --c-surface-2: #f8f9fb;

  /* Anthrazit / Stahl */
  --c-nacht:     #0e1013;
  --c-stahl-900: #14171c;
  --c-stahl-800: #1c2027;
  --c-stahl-700: #2a3038;
  --c-stahl-600: #3b434e;

  /* Silber */
  --c-silber-500:#7c8794;
  --c-silber-400:#9aa5b2;
  --c-silber-300:#bcc4cd;
  --c-silber-200:#d8dde3;
  --c-silber-100:#eceff2;

  /* Schrift */
  --c-ink:       #101317;
  --c-ink-2:     #4b535e;
  --c-ink-3:     #7b8593;
  --c-ink-invers:#f6f7f9;

  /* Linien */
  --c-line:      #e2e6ea;
  --c-line-2:    #cdd3da;

  /* Status (fest, nie umfärben) */
  --st-frei:     #0ca30c;
  --st-option:   #fab219;
  --st-wartung:  #ec835a;
  --st-belegt:   #d03b3b;
  --st-info:     #2a78d6;

  /* Effekte */
  --chrome: linear-gradient(145deg,#f4f6f8 0%,#dfe4e9 42%,#f7f9fb 60%,#cdd4dc 100%);
  --shadow-sm: 0 1px 2px rgba(16,19,23,.05);
  --shadow:    0 2px 6px rgba(16,19,23,.06), 0 12px 28px -18px rgba(16,19,23,.22);
  --shadow-lg: 0 4px 12px rgba(16,19,23,.08), 0 28px 60px -30px rgba(16,19,23,.35);
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--c-bg);color:var(--c-ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{letter-spacing:-.015em;line-height:1.2;margin:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}
.muted{color:var(--c-ink-3)}
.sec{color:var(--c-ink-2)}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.nowrap{white-space:nowrap}

/* ---------------------------------------------------------------
   Kopfzeile
   --------------------------------------------------------------- */
.topbar{background:var(--c-stahl-900);color:var(--c-silber-300);font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.topbar a{text-decoration:none;color:#fff}

header.site{position:sticky;top:0;z-index:70;background:rgba(20,23,28,.97);backdrop-filter:blur(8px);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
header.site .wrap{display:flex;align-items:center;gap:26px;height:70px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand .mark{width:38px;height:38px;border-radius:10px;background:var(--chrome);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(0,0,0,.4)}
.brand .mark svg{width:22px;height:22px}
.brand .txt{line-height:1.05}
.brand .txt b{display:block;font-size:17px;letter-spacing:.16em;font-weight:800}
.brand .txt span{display:block;font-size:9.5px;letter-spacing:.24em;color:var(--c-silber-400);font-weight:600;margin-top:2px;white-space:nowrap}

nav.hauptnav{display:flex;gap:2px;flex:1}
nav.hauptnav a{padding:9px 13px;border-radius:9px;text-decoration:none;font-size:14.5px;color:var(--c-silber-300)}
nav.hauptnav a:hover{background:rgba(255,255,255,.08);color:#fff}
nav.hauptnav a.aktiv{background:rgba(255,255,255,.12);color:#fff}
/* Nur im aufgeklappten Handymenue sichtbar – am Schreibtisch stehen
   dieselben Wege rechts oben in der Kopfzeile. */
nav.hauptnav a.nur-mobil{display:none}

.kopf-aktionen{display:flex;align-items:center;gap:10px}
.korb-btn{display:flex;align-items:center;gap:9px;background:var(--chrome);color:var(--c-nacht);border:0;border-radius:10px;padding:10px 16px;font-weight:700;font-size:14.5px;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.korb-btn:hover{filter:brightness(1.04)}
.korb-zahl{background:var(--c-nacht);color:#fff;border-radius:99px;min-width:21px;height:21px;display:grid;place-items:center;font-size:12px;padding:0 6px}
.burger{display:none;background:rgba(255,255,255,.1);border:0;color:#fff;width:40px;height:40px;border-radius:10px;
  font-size:18px;cursor:pointer;user-select:none}
.menu-schalter{display:none}
/* Nur sichtbar, solange kein JavaScript läuft – dann führt der Weg über
   einen normalen Absendeknopf statt über das automatische Nachrechnen. */
.nur-ohne-js{display:block}
.mit-js .nur-ohne-js{display:none}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero{background:var(--c-stahl-900);color:#fff;position:relative;overflow:hidden;padding:56px 0 104px}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1100px 380px at 78% -8%, rgba(154,165,178,.24), transparent 62%),
    repeating-linear-gradient(93deg, rgba(255,255,255,.035) 0 2px, rgba(255,255,255,0) 2px 6px);}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--chrome);opacity:.5}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(30px,4.4vw,50px);max-width:17ch;margin-bottom:16px}
.hero p.lead{max-width:60ch;color:var(--c-silber-300);font-size:17px;margin:0}
.hero-kpis{display:flex;gap:38px;margin-top:32px;flex-wrap:wrap}
.hero-kpis b{display:block;font-size:24px;line-height:1.15}
.hero-kpis span{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--c-silber-500)}

/* ---------------------------------------------------------------
   Suchleiste
   --------------------------------------------------------------- */
.suchleiste{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:18px;margin-top:-62px;position:relative;z-index:5}
.suchleiste form{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;align-items:end}
/* ---------------------------------------------------------------
   Grundform aller Eingabefelder
   ---------------------------------------------------------------
   Die Felder waren nur dort gestaltet, wo sie in einem .feld-Rahmen
   stecken. Überall sonst – Prüfungen, Etiketten, Kaution, Gebiet,
   Nachrichten, die Zeitfelder im Vorgang – galt die Voreinstellung des
   Browsers, und die ist spitz. Auf einer Seite mit runden Karten,
   runden Knöpfen und runden Kacheln fällt ein eckiges Eingabefeld
   sofort auf.

   Deshalb hier eine Grundregel für ALLE Texteingaben. Sie steht
   absichtlich als Element-Auswahl und damit schwach: Jede
   Sonderregelung (.feld input, .prot-form input.gross, .vs-teil input …)
   gewinnt weiterhin. Neue Felder sind ab jetzt von sich aus richtig,
   auch wenn niemand daran denkt.

   Kästchen und Schalter bleiben ausgenommen: Ein rundes Häkchenfeld
   sieht aus wie ein Auswahlknopf und wird verwechselt. Ebenso der
   Schieberegler und die Farbwahl, die der Browser selbst zeichnet.
   --------------------------------------------------------------- */
/* :where() um die Ausnahmen, damit die Regel so SCHWACH bleibt wie eine
   reine Element-Auswahl. Ohne das wog die Kette aus fünf :not() mehr als
   .kopf-suche input – und das Suchfeld in der dunklen Leiste wurde weiß.
   Genau der Fehler, den diese Regel nicht machen darf: Sie soll Lücken
   füllen, nicht Gestaltung überstimmen. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file])),
select,
textarea{
  border-radius:var(--r-sm);
  border:1px solid var(--c-line-2);
  background:var(--c-surface);
  color:var(--c-ink);
  font:inherit;
  font-size:15px;
  padding:10px 12px;
  box-sizing:border-box;
  max-width:100%;
}
/* Auswahllisten zeichnet der Browser mit grauem Grund und eigener
   Umrandung. Beides abschalten und den Pfeil selbst setzen – sonst
   sitzt ein graues Kastenfeld zwischen weißen Eingabefeldern. */
select{
  -webkit-appearance:none;appearance:none;
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7480' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px 8px;
}
select[multiple]{background-image:none;padding-right:12px}
textarea{resize:vertical}
input:where(:focus-visible),select:where(:focus-visible),textarea:where(:focus-visible){
  outline:2px solid var(--c-stahl-700);outline-offset:1px}
/* Der Dateiknopf bekommt ihn innen, sonst sitzt eine runde Schaltfläche
   in einer spitzen Umrandung. */
input[type=file]{border-radius:var(--r-sm)}
input[type=file]::file-selector-button{border-radius:8px;border:1px solid var(--c-line-2);
  background:var(--c-surface-2);padding:7px 12px;font:inherit;font-size:14px;cursor:pointer;margin-right:10px}

.feld label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--c-ink-3);font-weight:700;margin-bottom:6px}
.feld input,.feld select,.feld textarea{
  width:100%;padding:11px 13px;border:1px solid var(--c-line-2);border-radius:var(--r-sm);
  background:var(--c-surface);color:var(--c-ink);font:inherit;font-size:15px;
}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:2px solid var(--c-stahl-700);outline-offset:1px;border-color:transparent}
.feld textarea{min-height:96px;resize:vertical}
.such-info{grid-column:1/-1;font-size:13.5px;color:var(--c-ink-2);padding-top:4px;border-top:1px solid var(--c-line);margin-top:2px}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r-sm);
  padding:12px 20px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .1s,filter .1s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--c-stahl-900);color:#fff}
.btn-primary:hover{background:var(--c-stahl-700)}
.btn-chrome{background:var(--chrome);color:var(--c-nacht);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.btn-chrome:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;color:var(--c-ink);border:1px solid var(--c-line-2)}
.btn-ghost:hover{background:var(--c-surface-2)}
.btn-klein{padding:8px 14px;font-size:13.5px}
.btn[disabled],.btn.gesperrt{opacity:.45;pointer-events:none}

/* ---------------------------------------------------------------
   Abschnitte
   --------------------------------------------------------------- */
section{padding:58px 0;scroll-margin-top:84px}
.abschnitt-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.abschnitt-kopf h2{font-size:27px}
.eyebrow{display:flex;align-items:center;gap:9px;font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--c-ink-3);margin-bottom:6px}
.eyebrow:before{content:"";width:18px;height:3px;border-radius:2px;background:var(--chrome);border:1px solid var(--c-line-2)}

/* ---------------------------------------------------------------
   Filter
   --------------------------------------------------------------- */
.filterzeile{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--c-line-2);background:var(--c-surface);
  color:var(--c-ink-2);border-radius:99px;padding:8px 15px;font-size:14px;font-weight:650;text-decoration:none}
.chip:hover{border-color:var(--c-silber-400)}
.chip.aktiv{background:var(--c-stahl-900);border-color:var(--c-stahl-900);color:#fff}
.chip .n{font-size:11.5px;opacity:.62;font-variant-numeric:tabular-nums}
.filterzeile .dehner{flex:1}

/* ---------------------------------------------------------------
   Gerätekarten
   --------------------------------------------------------------- */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
.karte{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease}
.karte:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--c-line-2)}
.karte-bild{position:relative;aspect-ratio:16/10;background:linear-gradient(160deg,var(--c-surface-2),var(--c-bg-tief));
  border-bottom:1px solid var(--c-line);display:grid;place-items:center;padding:18px;color:var(--c-stahl-600)}
.karte-bild svg{width:78%;height:78%}
.karte-inhalt{padding:17px 18px 18px;display:flex;flex-direction:column;gap:11px;flex:1}
.karte-inhalt h3{font-size:17.5px}
.karte-inhalt .typ{font-size:13.5px;color:var(--c-ink-3);margin-top:-7px}
.merkmale{display:flex;gap:6px;flex-wrap:wrap}
.merkmal{font-size:12px;background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:7px;padding:3px 9px;color:var(--c-ink-2)}
.karte-fuss{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--c-line)}
.karte-fuss .btn{white-space:nowrap;flex:none}
.preis{min-width:0}
.preis b{font-size:21px;display:block;line-height:1.15}
.preis small{color:var(--c-ink-3);font-size:12.5px;display:block;line-height:1.35}
.preis .spar{color:#0a7d0a;font-weight:700}

.kat-label{position:absolute;top:12px;right:13px;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:800;color:var(--c-ink-3)}

/* Statusabzeichen – Farbe immer zusammen mit Text */
.status{position:absolute;top:12px;left:13px;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  padding:5px 11px;border-radius:99px;background:var(--c-surface);border:1px solid var(--c-line-2);color:var(--c-ink-2);box-shadow:var(--shadow-sm)}
.status .punkt{width:8px;height:8px;border-radius:99px;flex:none}
.status.frei{border-color:var(--st-frei);color:#0a7d0a}
.status.frei .punkt{background:var(--st-frei)}
.status.belegt{border-color:var(--st-belegt);color:var(--st-belegt)}
.status.belegt .punkt{background:var(--st-belegt)}
.status.neutral .punkt{background:var(--c-silber-400)}

/* ---------------------------------------------------------------
   Hinweisboxen
   --------------------------------------------------------------- */
.hinweis{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--c-line-2);background:var(--c-surface);
  border-radius:var(--r);padding:14px 16px;font-size:14.5px}
.hinweis svg{flex:none;width:20px;height:20px;margin-top:2px}
.hinweis-gut{border-color:var(--st-frei);background:color-mix(in srgb,var(--st-frei) 7%,#fff)}
.hinweis-warnung{border-color:var(--st-option);background:color-mix(in srgb,var(--st-option) 10%,#fff)}
.hinweis-kritisch{border-color:var(--st-belegt);background:color-mix(in srgb,var(--st-belegt) 7%,#fff)}
.hinweis-info{border-color:var(--c-line-2);background:var(--c-surface-2)}
/* Ein aufklappbarer Hinweis darf keine Flex-Reihe sein. Der Kasten ist sonst
   für Symbol und Text nebeneinander gebaut – bei einem <details> geraten
   dadurch die Zusammenfassung und der aufgeklappte Inhalt nebeneinander statt
   untereinander, und der Kasten wird breiter als das Fenster. Aufgefallen auf
   der Etikettenseite bei 360 px: aufgeklappt maß die Seite 471 px. */
details.hinweis{display:block}
details.hinweis>summary{font-size:inherit}

/* ---------------------------------------------------------------
   Detailseite
   --------------------------------------------------------------- */
.detail{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:start}
.buehne{background:linear-gradient(160deg,var(--c-surface-2),var(--c-bg-tief));border:1px solid var(--c-line);
  border-radius:var(--r-lg);aspect-ratio:16/9;display:grid;place-items:center;color:var(--c-stahl-600);padding:30px;margin-bottom:22px}
.buehne svg{width:66%;height:66%}
.block{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:20px 22px;margin-bottom:20px}
.block h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--c-ink-3);margin-bottom:14px}
.datentabelle{width:100%;border-collapse:collapse;font-size:14.5px}
.datentabelle td{padding:8px 0;border-bottom:1px solid var(--c-line)}
.datentabelle td:first-child{color:var(--c-ink-3)}
.datentabelle td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.datentabelle tr:last-child td{border-bottom:0}

.option{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--c-line);font-size:14.5px;cursor:pointer}
.option:last-child{border-bottom:0}
.option input{width:18px;height:18px;accent-color:var(--c-stahl-700);flex:none}
.option .dehner{flex:1;min-width:0}
/* nowrap gilt nur für den Preis selbst. Die Erläuterung darunter ist ein
   ganzer Satz – die zwang die Zeile sonst auf 240 px und schob damit die
   ganze Seite über den Bildschirmrand. */
.option .pr{color:var(--c-ink-2);font-size:13.5px;font-variant-numeric:tabular-nums;
  white-space:nowrap;text-align:right;max-width:100%}
.option .pr .muted{display:block;white-space:normal;max-width:18ch;margin-left:auto}
.option .inklusive-marke{white-space:normal}
@media(max-width:420px){
  .option{flex-wrap:wrap}
  .option .pr{flex-basis:100%;text-align:left;padding-left:30px}
  .option .pr .muted{margin-left:0;max-width:none}
}

.rechner{position:sticky;top:88px}
/* Während im Hintergrund gerechnet wird: Der Preis wird kurz blass, damit
   niemand eine Zahl abliest, die gerade veraltet. Kein Drehrädchen und
   kein Sperren – es dauert ohnehin nur einen Wimpernschlag. */
.mit-js .rechner{transition:opacity .12s}
.mit-js .rechner.rechnet{opacity:.55}
.rechnung{list-style:none;margin:0;padding:0;font-size:15px}
.rechnung li{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px dashed var(--c-line)}
/* Der Betrag rechts bricht nie um; der Text links muss dafür schrumpfen
   dürfen. Ohne min-width:0 tut er das NICHT – ein Flex-Kind hat von Haus
   aus min-width:auto und wird nie schmaler als sein Inhalt. Genau daran
   ist die Zeile „Mindestauftragswert" aus der weißen Karte gelaufen:
   697 px Text in einer 270 px breiten Zeile. Dieselbe Falle wie bei den
   Grid-Kindern – sie gilt für Flex genauso. */
.rechnung li>span:first-child{min-width:0;overflow-wrap:break-word}
/* ">" ist hier entscheidend. Ohne den Kindschafts-Operator trifft
   span:last-child AUCH ein verschachteltes <span class="muted"> im
   linken Textblock – das ist ja das letzte Kind SEINES Elternteils.
   Dieses Span bekam dadurch white-space:nowrap und konnte nicht
   umbrechen; der Text lief aus der weißen Karte. Der Fehler lag lange
   im Code und fiel erst auf, als links ein längerer Erklärtext stand. */
.rechnung li>span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.rechnung li.zwischen{font-weight:700}
.rechnung li.gesamt{border-bottom:0;border-top:2px solid var(--c-ink);margin-top:8px;padding-top:13px;font-weight:800;font-size:18px}
.rechnung li.klein{font-size:13px;color:var(--c-ink-3);border-bottom:0;padding-top:2px}
.spar-tag{display:inline-block;background:color-mix(in srgb,var(--st-frei) 12%,#fff);color:#0a7d0a;
  border:1px solid color-mix(in srgb,var(--st-frei) 40%,#fff);border-radius:6px;padding:1px 7px;font-size:12px;font-weight:700}

/* ---------------------------------------------------------------
   Warenkorb / Anfrage
   --------------------------------------------------------------- */
.korbzeile{display:flex;gap:16px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);padding:15px;margin-bottom:14px}
.korbzeile .mini{width:92px;height:68px;background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:var(--r-sm);
  display:grid;place-items:center;flex:none;color:var(--c-stahl-600)}
.korbzeile .mini svg{width:80%;height:80%}
.korbzeile .info{flex:1;min-width:0}
.korbzeile .info b{display:block;font-size:15.5px}
.korbzeile .info .z{font-size:13px;color:var(--c-ink-3)}
.korbzeile .betrag{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.formraster{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.formraster .voll{grid-column:1/-1}
.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--c-ink-2);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--c-stahl-700);flex:none;margin-top:1px}

/* ---------------------------------------------------------------
   Schritte / FAQ
   --------------------------------------------------------------- */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.schritt{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:22px}
.schritt .n{width:34px;height:34px;border-radius:10px;background:var(--chrome);border:1px solid var(--c-line-2);
  display:grid;place-items:center;font-weight:800;margin-bottom:12px;color:var(--c-nacht)}
.schritt h4{font-size:16px;margin-bottom:7px}
.schritt p{margin:0;font-size:14px;color:var(--c-ink-2)}
details.faq{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);padding:16px 18px;margin-bottom:11px}
details.faq summary{cursor:pointer;font-weight:680;list-style:none;display:flex;gap:12px;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:before{content:"+";color:var(--c-ink-3);font-weight:800;width:14px}
details.faq[open] summary:before{content:"–"}
details.faq p{margin:12px 0 0 26px;font-size:14.5px;color:var(--c-ink-2)}

/* ---------------------------------------------------------------
   Fußzeile
   --------------------------------------------------------------- */
footer.site{background:var(--c-stahl-900);color:var(--c-silber-300);padding:48px 0 26px;margin-top:56px}
footer.site .spalten{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
footer.site h5{color:#fff;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li,footer.site p{font-size:14px;margin:0 0 7px}
footer.site a{text-decoration:none}
footer.site a:hover{color:#fff}
/* Mitgliedschaften: abgesetzt und leiser als die Kontaktdaten. Sie sind
   ein Vertrauenszeichen, keine Auskunft, die jemand gerade sucht. */
footer.site .fuss-verband{margin-top:13px;padding-top:11px;border-top:1px solid rgba(255,255,255,.12);
  font-size:13px;color:var(--c-silber-500)}
footer.site .fuss{border-top:1px solid rgba(255,255,255,.12);margin-top:32px;padding-top:18px;font-size:12.5px;
  color:var(--c-silber-500);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------------------------------------------------------------
   Erfolgsseite
   --------------------------------------------------------------- */
.erfolg{max-width:620px;margin:60px auto;background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-lg);padding:44px 36px;text-align:center;box-shadow:var(--shadow)}
.erfolg .ring{width:70px;height:70px;border-radius:99px;background:color-mix(in srgb,var(--st-frei) 13%,#fff);
  color:var(--st-frei);display:grid;place-items:center;margin:0 auto 20px}
.referenz{display:inline-block;background:var(--c-surface-2);border:1px dashed var(--c-line-2);border-radius:var(--r-sm);
  padding:10px 18px;margin-top:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px}

/* ---------------------------------------------------------------
   Responsiv
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   Schmale Bildschirme: nichts darf breiter werden als das Fenster
   ---------------------------------------------------------------
   Raster- und Flexkinder haben von sich aus min-width:auto. Sie können
   damit nicht unter ihre kleinste Inhaltsbreite schrumpfen – ein
   einziges langes Wort in einer Tabellenzelle macht dann die ganze
   Spalte breiter als der Bildschirm, und der Browser zoomt die Seite
   heraus. Genau das passierte auf der Geräteseite: bei 393 px ging es
   gerade noch, bei 360 px nicht mehr.
   --------------------------------------------------------------- */
.detail > *,.rechner > *,.formraster > *,.spalten > *{min-width:0}
.block,.buehne,.datentabelle,.tabelle{max-width:100%}
.datentabelle td,.datentabelle th,.block p,.block li{overflow-wrap:anywhere}
table{max-width:100%}
/* Kein overflow-x:hidden auf html oder body als „Sicherheitsnetz":
   Das killt position:sticky – die Kopfzeile scrollt dann einfach weg.
   Beim Ausprobieren genau so passiert. Die Ursache ist oben behoben,
   ein Netz darüber richtet mehr Schaden an als es verhindert. */

@media(max-width:1000px){
  .detail{grid-template-columns:1fr}
  .rechner{position:static}
  footer.site .spalten{grid-template-columns:1fr 1fr}
}
/* ---------------------------------------------------------------
   Wann die Hauptnavigation ins Menü wandert
   ---------------------------------------------------------------
   Bis 17q stand hier 820 px. Gemessen hat das nie jemand: Die
   waagerechte Leiste aus Logo, sieben Menüpunkten, Anmeldung und
   Anfragekorb braucht 1.019 px. Zwischen 821 und 1.019 px stand sie
   also da, passte aber nicht – die ganze Seite war 1.019 px breit und
   ließ sich seitlich schieben, auf JEDER Seite. Das Tablet quer
   (1.024 px) lag knapp darüber und war deshalb in Ordnung; genau
   deshalb ist es nie aufgefallen.

   Der Umschaltpunkt liegt jetzt bei 1.020 px und damit dort, wo die
   Leiste tatsächlich aufhört zu passen. Die übrigen Regeln dieses
   Blocks (Suchleiste, Formularraster, Kopfbild) bleiben bei 820 px –
   sie haben mit der Navigation nichts zu tun. */
@media(max-width:1020px){
  nav.hauptnav{display:none}
  .burger{display:grid;place-items:center}
  #menuschalter:checked ~ nav.hauptnav,
  nav.hauptnav.offen{display:flex;position:absolute;top:70px;left:0;right:0;background:var(--c-stahl-800);
    flex-direction:column;padding:10px;gap:2px;border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 18px 30px rgba(0,0,0,.28);z-index:70}
  nav.hauptnav a.nur-mobil{display:block;border-top:1px solid rgba(255,255,255,.12);margin-top:6px;padding-top:13px}
  nav.hauptnav a.nur-mobil + a.nur-mobil{border-top:0;margin-top:0;padding-top:9px}
}
@media(max-width:820px){
  .suchleiste form{grid-template-columns:1fr 1fr}
  .suchleiste form .feld{min-width:0}
  .suchleiste form .feld input{width:100%;min-width:0;box-sizing:border-box}
  .suchleiste form .feld:nth-child(3),.suchleiste form .btn{grid-column:1/-1}
  .formraster{grid-template-columns:1fr}
  .hero{padding:40px 0 90px}
}
@media(max-width:560px){
  header.site .wrap{gap:12px}
  .brand .mark{width:34px;height:34px}
  .brand .txt b{font-size:15px;letter-spacing:.1em}
  .brand .txt span{font-size:8.5px;letter-spacing:.14em}
  .korb-btn{padding:9px 12px;font-size:13.5px}
  .topbar .wrap{font-size:12px}
  footer.site .spalten{grid-template-columns:1fr}
  .korbzeile{flex-wrap:wrap}
  .korbzeile .betrag{width:100%;text-align:left}
}

/* ---------------------------------------------------------------
   Fotos
   --------------------------------------------------------------- */
/* Produktfotos werden vollständig gezeigt, nie beschnitten.
   Der weiße Hintergrund liegt auf dem Bild selbst – so bleiben die
   Ränder sauber, ohne dass der Container etwas davon wissen muss. */
/* Produktfotos werden vollständig gezeigt, nie beschnitten.
   Absolut positioniert, damit die eigene Bildhöhe das Seitenverhältnis
   des Rahmens nicht aufdrückt – sonst werden die Karten unterschiedlich hoch. */
.karte-bild,.buehne{position:relative}
.karte-bild .foto,
.buehne .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  box-sizing:border-box;background:#fff;display:block}
.karte-bild .foto{padding:14px}
.buehne .foto{padding:26px}
.karte-bild{padding:0;overflow:hidden}
.buehne.hat-foto{padding:0;overflow:hidden;background:#fff}

.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px;margin:-12px 0 22px}
.galerie-bild{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--c-surface-2);
  cursor:pointer;aspect-ratio:4/3;transition:border-color .12s}
.galerie-bild img{width:100%;height:100%;object-fit:contain;background:#fff;padding:4px;box-sizing:border-box;display:block}
.galerie-bild:hover{border-color:var(--c-silber-400)}
.galerie-bild.aktiv{border-color:var(--c-stahl-900)}



.korbzeile .mini img{width:100%;height:100%;object-fit:contain;background:#fff;padding:3px;box-sizing:border-box;border-radius:inherit}

/* ---------------------------------------------------------------
   Zubehör-Vorschau mit Lupe
   --------------------------------------------------------------- */
.zub-bild{position:relative;width:54px;height:42px;flex:none;border-radius:9px;overflow:hidden;
  border:1px solid var(--c-line);background:var(--c-surface-2)}
.zub-bild img{width:100%;height:100%;object-fit:contain;background:#fff;padding:3px;box-sizing:border-box;display:block}
.zub-bild .lupe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;
  background:rgba(16,19,23,.42);color:#fff;opacity:0;transition:opacity .13s;display:grid;place-items:center;cursor:zoom-in}
.zub-bild:hover .lupe,.zub-bild .lupe:focus-visible{opacity:1}
.zub-bild .lupe svg{width:19px;height:19px}

/* Lupe über dem großen Gerätefoto */
.buehne{position:relative}
.lupe-gross{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border:0;border-radius:10px;
  background:rgba(16,19,23,.62);color:#fff;display:grid;place-items:center;cursor:zoom-in;
  backdrop-filter:blur(3px);transition:background .13s}
.lupe-gross:hover{background:rgba(16,19,23,.85)}
.lupe-gross svg{width:20px;height:20px}

/* Großansicht */
.grossansicht{position:fixed;inset:0;z-index:200;background:rgba(10,12,15,.9);
  display:none;align-items:center;justify-content:center;padding:36px 20px;cursor:zoom-out}
.grossansicht.offen{display:flex}
.grossansicht figure{margin:0;max-width:1100px;max-height:100%;text-align:center}
.grossansicht img{max-width:100%;max-height:78vh;border-radius:12px;background:#fff;
  box-shadow:0 24px 70px -20px rgba(0,0,0,.7);margin:0 auto}
.grossansicht figcaption{color:var(--c-silber-200);font-size:15px;margin-top:16px}
.grossansicht-zu{position:absolute;top:18px;right:20px;width:44px;height:44px;border:0;border-radius:11px;
  background:rgba(255,255,255,.13);color:#fff;font-size:19px;cursor:pointer}
.grossansicht-zu:hover{background:rgba(255,255,255,.24)}

@media(max-width:560px){
  .zub-bild .lupe{opacity:1;background:rgba(16,19,23,.28)}
  .zub-bild{width:48px;height:38px}
}

.rabatt-tag{display:inline-block;background:color-mix(in srgb,var(--st-frei) 12%,#fff);color:#0a7d0a;
  border:1px solid color-mix(in srgb,var(--st-frei) 40%,#fff);border-radius:6px;padding:1px 7px;
  font-size:11.5px;font-weight:700;margin-left:7px;vertical-align:1px}

/* Preistabelle mit Tagessatz und Mehrstunde */
.preistabelle{width:100%;border-collapse:collapse;font-size:14.5px}
.preistabelle th{text-align:right;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--c-ink-3);font-weight:700;padding:0 0 8px;border-bottom:1px solid var(--c-line-2)}
.preistabelle th:first-child{text-align:left}
.preistabelle td{padding:9px 0;border-bottom:1px solid var(--c-line);text-align:right;
  font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.preistabelle td:first-child{text-align:left;color:var(--c-ink-2);font-weight:400;white-space:normal}
.preistabelle tr:last-child td{border-bottom:0}
.preistabelle th+th,.preistabelle td+td{padding-left:14px}

/* ---------------------------------------------------------------
   Gewerbekunden
   --------------------------------------------------------------- */
.anmelden{display:inline-flex;align-items:center;gap:7px;color:var(--c-silber-300);text-decoration:none;
  font-size:14.5px;padding:9px 12px;border-radius:9px;white-space:nowrap}
.anmelden:hover{background:rgba(255,255,255,.08);color:#fff}
.anmelden svg{width:19px;height:19px;flex:none}
.kunde-chip{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;font-size:14px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:7px 14px;max-width:230px}
.kunde-chip:hover{background:rgba(255,255,255,.18)}
.kunde-chip .punkt{width:8px;height:8px;border-radius:99px;background:var(--st-frei);flex:none}
.kunde-chip svg{width:19px;height:19px;flex:none}
.kunde-chip .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.preistabelle td.durch,.preistabelle th.durch{color:var(--c-ink-3);font-weight:400;text-decoration:line-through;
  text-decoration-color:var(--c-silber-400)}
.preistabelle th.durch{text-decoration:none}
.preistabelle td.ihr-preis{color:#0a7d0a;font-weight:800}
.preis small s{color:var(--c-ink-3)}

.vorteile{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.vorteil{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);padding:18px 19px}
.vorteil h4{font-size:15.5px;margin:0 0 7px}
.vorteil h4:before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;
  background:var(--chrome);border:1px solid var(--c-line-2);margin-right:9px;vertical-align:1px}
.vorteil p{margin:0;font-size:13.8px;color:var(--c-ink-2);line-height:1.6}

/* Auf dem Handy bleibt die Anmeldung sichtbar – nur schmaler.
   Unter 430 Pixel weicht die Beschriftung, das Symbol bleibt. */
@media(max-width:820px){
  .anmelden{padding:8px 10px;font-size:13.5px;background:rgba(255,255,255,.1);gap:6px}
  .anmelden svg{width:17px;height:17px}
  header.site .wrap{gap:10px}
  /* Nur ein grüner Punkt sagt niemandem, dass er angemeldet ist –
     das Personensymbol schon. */
  .kunde-chip{max-width:none;padding:8px 10px}
  .kunde-chip svg{width:17px;height:17px}
  .kunde-chip .txt{display:none}
  /* Der Schriftzug weicht, das Zeichen bleibt: Nur so passen Menü,
     Anmeldung und Anfragekorb nebeneinander auf ein Telefon. */
  .brand .txt{display:none}
}
/* ---------------------------------------------------------------
   Der Namenschip des angemeldeten Kunden
   ---------------------------------------------------------------
   Zwischen 820 und 1150 px steht die Hauptnavigation noch waagerecht.
   Ist ein Kunde ANGEMELDET, kommt sein Name dazu – und genau dann
   passte es nicht mehr: bei 1024 px wollte die Kopfzeile 1079 px, der
   Anfragekorb hing 55 px außerhalb des Bildes. Aufgefallen ist es nur,
   weil die Durchsicht diesmal angemeldet gemessen hat; als Gast war
   dieselbe Seite an derselben Stelle in Ordnung.

   Der Name weicht also schon ab 1150 px, nicht erst ab 820. Symbol und
   grüner Punkt bleiben – daran ist die Anmeldung weiter zu erkennen,
   und der Name steht eine Ebene weiter unter „Mein Konto". */
@media(max-width:1150px){
  .kunde-chip{max-width:none;padding:8px 11px}
  .kunde-chip .txt{display:none}
}

/* Erst auf sehr schmalen Geräten weicht das Wort. Ein Personensymbol allein
   versteht auf einer Baustelle niemand auf Anhieb. */
@media(max-width:380px){
  .anmelden span{display:none}
  .anmelden{padding:9px}
  .korb-wort{display:none}
}

/* ---------- App-Installationshinweis ---------- */
.install-leiste[hidden]{display:none !important}
.install-leiste{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;
  display:flex;align-items:center;gap:14px;
  background:var(--c-surface);border:1px solid var(--c-line-2);border-radius:16px;
  padding:14px 16px;box-shadow:0 12px 34px rgba(20,23,28,.20);
  animation:installRein .3s ease-out}
@keyframes installRein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.install-leiste .ii{flex:0 0 auto;width:38px;height:38px;border-radius:11px;
  background:var(--c-stahl-900);color:var(--c-silber-100);display:grid;place-items:center}
.install-leiste .ii svg{width:20px;height:20px}
.install-leiste .it{flex:1;font-size:13.5px;line-height:1.45;color:var(--c-ink-2)}
.install-leiste .it b{color:var(--c-ink);font-size:14.5px}
.install-leiste .zu{background:none;border:0;color:var(--c-ink-3);font-size:18px;cursor:pointer;
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;line-height:1}
.install-leiste .zu:hover{color:var(--c-ink);background:var(--c-surface-2)}
.install-leiste .zu:hover{color:var(--c-ink)}
@media (max-width:560px){
  .install-leiste{flex-wrap:wrap;gap:10px 12px}
  .install-leiste .ii{order:1}
  .install-leiste .zu{order:1;margin-left:auto;align-self:flex-start}
  .install-leiste .it{flex:1 1 100%;order:2}
  .install-leiste .btn{order:3;flex:1 1 100%;text-align:center}
}
/* Platz schaffen, damit die Leiste nichts verdeckt */
body:has(.install-leiste:not([hidden])){padding-bottom:118px}
/* In der installierten App den Hinweis nie zeigen */
@media (display-mode:standalone){ .install-leiste{display:none !important} }

/* ---------- Anleitungslisten (App-Seite) ---------- */
.schrittliste{counter-reset:schritt;list-style:none;padding:0;margin:0}
.schrittliste li{counter-increment:schritt;position:relative;padding:0 0 14px 42px;
  font-size:15.5px;line-height:1.6;color:var(--c-ink-2)}
.schrittliste li:last-child{padding-bottom:0}
.schrittliste li:before{content:counter(schritt);position:absolute;left:0;top:1px;
  width:27px;height:27px;border-radius:99px;background:var(--c-stahl-900);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800}
.schrittliste b{color:var(--c-ink)}
.punkte{list-style:none;padding:0;margin:0}
.punkte li{position:relative;padding:0 0 10px 20px;font-size:15px;line-height:1.6;color:var(--c-ink-2)}
.punkte li:last-child{padding-bottom:0}
.punkte li:before{content:"";position:absolute;left:2px;top:10px;width:7px;height:7px;
  border-radius:99px;background:var(--c-silber-500, #9aa5b2)}
.punkte b{color:var(--c-ink)}

/* Belegte Zeitfenster bei Stundenmiete */
.belegtliste{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:11px}
.belegtliste .kopf{font-size:12.5px;color:var(--c-ink-3);width:100%}
.belegtliste .fenster{font-size:12.5px;font-weight:700;color:#a4343a;background:#fdeded;
  border:1px solid #f0b8b8;border-radius:99px;padding:3px 10px;font-variant-numeric:tabular-nums}

/* Gewähltes Datum sichtbar markieren */
.feld input.gewaehlt{border-color:var(--c-stahl-700,#2a3038);background:var(--c-surface-2,#f4f6f8);
  box-shadow:0 0 0 1px var(--c-stahl-700,#2a3038) inset}

/* =====================================================================
   Mietkalender
   Der gewählte Zeitraum wird blau hinterlegt, belegte Tage sind gesperrt.
   Blau bewusst als eigene Farbe: es ist eine Auswahl, kein Status.
   ===================================================================== */
:root{
  --kal-blau:      #1d4ed8;
  --kal-blau-hell: #dbe6fb;
  --kal-blau-rand: #b7ccf6;
}

.kalender{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-sm);
  padding:12px 12px 10px;user-select:none;-webkit-user-select:none}
.kal-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.kal-titel{font-weight:650;font-size:15px}
.kal-pfeil{width:32px;height:32px;border:1px solid var(--c-line-2);background:var(--c-surface);
  border-radius:9px;font-size:19px;line-height:1;color:var(--c-ink-2);cursor:pointer;flex:none}
.kal-pfeil:hover:not(:disabled){border-color:var(--c-stahl-700);color:var(--c-ink)}
.kal-pfeil:disabled{opacity:.3;cursor:default}
.kal-wochentage,.kal-gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.kal-wochentage span{text-align:center;font-size:11.5px;color:var(--c-ink-3);padding-bottom:4px;
  text-transform:uppercase;letter-spacing:.04em}
.kal-tag{aspect-ratio:1/1;min-height:38px;border:1px solid transparent;background:var(--c-surface-2);
  border-radius:9px;font:inherit;font-size:14px;color:var(--c-ink);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
/* Hover darf die Auswahl nicht übermalen – sonst wird der gewählte Tag weiß. */
.kal-tag:hover:not(:disabled):not(.von):not(.bis):not(.drin):not(.vorschau){
  border-color:var(--kal-blau);background:#fff}
.kal-tag.von:hover,.kal-tag.bis:hover{background:#1a45c0}
/* Ersetzte Felder verschwinden auch dann, wenn sie ein eigenes display tragen. */
[data-ersetzt-durch-kalender][hidden]{display:none !important}
.kal-tag:disabled{color:var(--c-ink-3);background:transparent;cursor:not-allowed}
.kal-tag.belegt{background:repeating-linear-gradient(135deg,#f0f2f5 0 5px,#e4e8ed 5px 10px);
  color:var(--c-silber-400);text-decoration:line-through;text-decoration-thickness:1px}
.kal-tag.heute{font-weight:700;box-shadow:inset 0 0 0 1px var(--c-line-2)}
.kal-leer{min-height:38px}

/* Auswahl: Ränder kräftig, Zeitraum dazwischen hell hinterlegt */
.kal-tag.drin,.kal-tag.vorschau{background:var(--kal-blau-hell);border-color:var(--kal-blau-rand);
  color:var(--c-ink);border-radius:4px}
.kal-tag.von,.kal-tag.bis{background:var(--kal-blau);border-color:var(--kal-blau);color:#fff;font-weight:650}
.kal-tag.von{border-radius:9px 4px 4px 9px}
.kal-tag.bis{border-radius:4px 9px 9px 4px}
.kal-tag.von.bis,.kal-tag.von:not(.bis):last-child{border-radius:9px}

.kal-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--c-line)}
.kal-auswahl{font-size:13.5px;font-weight:600;color:var(--c-ink)}
.kal-meldung{margin:8px 0 0;font-size:12.5px;color:var(--st-belegt)}
.kal-legende{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--c-ink-3)}
.kal-legende span{display:inline-flex;align-items:center;gap:5px}
.kal-legende i{width:10px;height:10px;border-radius:3px;display:inline-block}
.kal-legende .pkt-frei{background:var(--c-surface-2);border:1px solid var(--c-line-2)}
.kal-legende .pkt-belegt{background:repeating-linear-gradient(135deg,#f0f2f5 0 3px,#dfe3e9 3px 6px);
  border:1px solid var(--c-line-2)}
.kal-legende .pkt-wahl{background:var(--kal-blau)}

/* Leerer Kalender = JavaScript hat (noch) nicht gearbeitet. Dann darf hier
   kein weißer Kasten stehen bleiben; stattdessen greifen die nativen
   Datumsfelder, und man kann ganz normal weiterbuchen. */
.kalender:empty{display:none}

/* In der Suchleiste der Startseite klappt der Kalender auf */
.kal-aufklapp{position:relative}
/* Der Knopf erscheint erst, wenn der Kalender ihn übernommen hat. */
.kal-aufklapp .kal-knopf{display:none}
.kal-aufklapp.kal-bereit .kal-knopf{display:block}
.kal-aufklapp:not(.kal-bereit) > label{display:none}
.kal-aufklapp .kalender{position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:308px;
  box-shadow:var(--shadow-lg)}
.kal-knopf{width:100%;text-align:left;background:var(--c-surface);border:1px solid var(--c-line-2);
  border-radius:10px;padding:10px 12px;font:inherit;font-size:14.5px;color:var(--c-ink);cursor:pointer}
.kal-knopf:hover{border-color:var(--c-stahl-700)}
.kal-knopf.leer{color:var(--c-ink-3)}
@media (max-width:520px){
  .kal-aufklapp .kalender{width:min(92vw,320px)}
  .kal-tag{min-height:40px}
}

/* Anwendungsvorschläge über dem Kategoriefilter */
.vorhaben{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 14px}
.vorhaben > span{font-size:13.5px;color:var(--c-ink-3);margin-right:2px}
.vorhaben .chip{font-size:13.5px}
.je-einheit{font-size:14px;font-weight:500;color:var(--c-ink-3);margin-left:2px}
/* Treffer-Zeile bei aktiver Suche */
.suchtreffer{font-size:13.5px;color:var(--c-ink-2);margin:0 0 14px}
.suchtreffer a{margin-left:8px}

/* Facettenfilter: Material und Tätigkeit */
.facetten{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.facette{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.facette-titel{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  color:var(--c-ink-3);min-width:74px;flex:none}
.facette-werte{display:flex;gap:8px;flex-wrap:wrap;flex:1}
@media (max-width:640px){
  .facette{flex-direction:column;gap:5px}
  .facette-werte{width:100%}
}
/* Admin: Filterwerte bearbeiten */
.filterzeile-admin{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--c-line)}
.filterzeile-admin .sym{width:34px;height:24px;flex:none;color:var(--c-ink-3)}
.filterzeile-admin .sym svg{width:100%;height:100%}
.filterzeile-admin input[type=text],.filterzeile-admin input:not([type]){flex:1;min-width:90px}
.filterzeile-admin select{max-width:112px}
.filterzeile-admin .anz{font-size:12px;color:var(--c-ink-3);min-width:22px;text-align:right;font-variant-numeric:tabular-nums}
.filterzeile-admin .entf{background:none;border:0;color:var(--c-ink-3);cursor:pointer;font-size:15px;padding:2px 5px}
.filterzeile-admin .entf:hover{color:var(--st-belegt)}
.geraet-merkmale{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 0}
.geraet-merkmale .chip{font-size:13px;padding:5px 11px}

/* Hinweis unter dem Katalog: Gerät nicht dabei? */
.fehlt-hinweis{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--c-line);
  font-size:14.5px;color:var(--c-ink-2);text-align:center}
.fehlt-hinweis a{font-weight:650;color:var(--c-ink)}

/* Stückzahl bei Geräten mit mehreren Exemplaren */
.stueckwahl{margin-top:14px}
.stueckwahl label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--c-ink-3);font-weight:700;margin-bottom:6px}
.stueck-feld{display:flex;align-items:center;gap:10px}
.stueck-feld input{width:88px;padding:11px 13px;border:1px solid var(--c-line-2);border-radius:var(--r-sm);
  font:inherit;font-size:15px;text-align:center;font-variant-numeric:tabular-nums}
.stueck-feld .muted{font-size:13px}
.stueck-marke{display:inline-block;font-size:11.5px;font-weight:700;background:var(--c-stahl-900);
  color:#fff;border-radius:5px;padding:1px 7px;margin-left:7px;vertical-align:1px}
.rechnung li.nachlass{color:var(--st-frei)}
.rechnung li.nachlass .muted{font-weight:400;font-size:12px}

/* Grundausstattung: eine Variante ist im Mietpreis enthalten */
.inkl-hinweis{background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:9px;
  padding:10px 13px;margin:0 0 14px;font-size:13.5px;color:var(--c-ink-2);line-height:1.5}
.inkl-hinweis b{color:var(--c-ink)}
.inklusive-marke{display:inline-block;font-size:11.5px;font-weight:700;background:#e8f5e9;
  color:var(--st-frei);border-radius:5px;padding:2px 8px;white-space:nowrap}

/* ---------- Prüfstatus am Geräteetikett ---------- */
.pruef-marke{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  padding:5px 12px;border-radius:99px;border:1px solid;white-space:nowrap}
.pruef-marke:before{content:"";width:8px;height:8px;border-radius:99px;background:currentColor}
.pruef-marke.pr-ok  {color:#1a7f37;border-color:#7ec894;background:#eefaf1}
.pruef-marke.pr-bald{color:#8a6200;border-color:var(--st-option);background:#fdf3dd}
.pruef-marke.pr-warn{color:#a44f22;border-color:var(--st-wartung);background:#fdefe8}
.pruef-marke.pr-rot {color:var(--st-belegt);border-color:var(--st-belegt);background:#fdeded}
.pruef-marke.pr-grau{color:var(--c-ink-3);border-color:var(--c-line-2);background:var(--c-surface-2)}

/* ---------- Anfrage: privat oder gewerblich ----------
   Der Schalter blendet Firma, Kostenstelle und Bestellnummer aus. Rein
   über CSS, damit er auch ohne JavaScript funktioniert. Die Radiofelder
   bleiben bedienbar (nur durchsichtig, nicht display:none) – sonst wäre
   die Auswahl mit der Tastatur nicht erreichbar. */
.artschalter{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.artwahl{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 18px}
/* Eigene Zeile: sonst rutscht auf dem Telefon der zweite Knopf unter den
   ersten und die beiden Möglichkeiten stehen nicht mehr nebeneinander. */
.artfrage{flex-basis:100%;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--c-ink-3);font-weight:700}
.artchip{border:1px solid var(--c-line-2);background:#fff;border-radius:99px;padding:8px 16px;
  font-size:14px;line-height:1.2;cursor:pointer;user-select:none}
.artchip:hover{border-color:var(--c-stahl-900)}
.arthinweis{flex-basis:100%;font-size:12.5px;color:var(--c-ink-3)}
#art-privat:checked  ~ .artwahl label[for=art-privat],
#art-gewerbe:checked ~ .artwahl label[for=art-gewerbe]{
  background:var(--c-stahl-900);color:#fff;border-color:var(--c-stahl-900)}
#art-privat:focus-visible  ~ .artwahl label[for=art-privat],
#art-gewerbe:focus-visible ~ .artwahl label[for=art-gewerbe]{outline:2px solid var(--c-stahl-900);outline-offset:2px}
#art-privat:checked ~ .formraster .nur-gewerbe{display:none}
/* Widerrufsbelehrung und der Verweis auf die richtigen Mietbedingungen
   hängen an derselben Wahl: Gewerbliche Mieter haben kein Widerrufsrecht,
   und für sie gelten die anderen Bedingungen. */
#art-gewerbe:checked ~ .widerruf-kasten{display:none}
#art-privat:checked  ~ label.check .agb-gewerbe{display:none}
#art-gewerbe:checked ~ label.check .agb-privat{display:none}
/* Ist „Privatperson" gewählt, erübrigt sich der Hinweis zur Gewerbeauswahl nicht –
   er erklärt ja gerade, was der andere Knopf tut. Bei „Firma" ist er überflüssig. */
#art-gewerbe:checked ~ .artwahl .arthinweis{display:none}

/* ---------- Anfrage: Widerrufsbelehrung ---------- */
.widerruf-kasten{border:1px solid var(--c-line-2);background:var(--c-surface-2);border-radius:12px;
  padding:16px 18px;margin-top:14px}
.widerruf-kasten p:last-child{margin-bottom:0}


/* ---------- Sehr schmale Geräte (unter 360 px) ----------
   Die Preistabelle hat bis zu vier Spalten mit Beträgen, die sich nicht
   umbrechen lassen. Statt die ganze Seite herauszuzoomen, darf hier
   ausnahmsweise die Tabelle allein seitlich scrollen – Überlauf am
   Element, nicht an html oder body, sonst klebt die Kopfzeile nicht mehr. */
/* Der Rollrahmen galt nur unter 359 px – bei genau 360, also auf Alvars
   Telefon, lief die Tabelle deshalb ungebremst über den Rand und schob die
   ganze Seite mit. Er rollt jetzt immer, wenn nötig; auf breiten Bildschirmen
   entsteht dadurch kein Balken, weil nichts übersteht. */
.tabellenrolle{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px;padding:0 2px}
@media(max-width:359px){
  .tabellenrolle .preistabelle{min-width:300px}
}

/* Von-bis-Felder: Ein Datumsfeld lässt sich nicht beliebig schmal machen –
   der Browser braucht Platz für „TT.MM.JJJJ" samt Kalendersymbol. Zwei
   nebeneinander sprengten bei 360 px die Seite (395 px). Unter 400 px
   stehen sie deshalb untereinander. */
.datum-paar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.datum-paar>.feld{min-width:0}
.datum-paar input{width:100%;min-width:0;box-sizing:border-box}
@media(max-width:400px){
  .datum-paar{grid-template-columns:1fr}
}

/* Unterlagen im Kundenkonto – Verträge, Rechnungen, Protokolle, Fotos.
   Als Liste großer Ziele gebaut: Auf dem Telefon wird hier mit dem
   Daumen getippt, nicht mit der Maus gezielt. */
.unterlagen-liste{display:grid;gap:8px;margin-top:14px}
.unterlage{display:flex;gap:12px;align-items:center;padding:12px 14px;text-decoration:none;
  border:1px solid var(--c-line);border-radius:11px;background:var(--c-surface);min-width:0}
.unterlage:hover{border-color:var(--c-ink-3);background:var(--c-surface-2)}
.ul-zeichen{flex:none;width:26px;text-align:center;font-size:17px}
.ul-text{display:flex;flex-direction:column;min-width:0}
.ul-text b{color:var(--c-ink);font-size:14.5px;overflow-wrap:anywhere}
.ul-text .muted{font-size:12.5px}

/* Suchleiste auf schmalen Telefonen: „Mietbeginn" und „Mietende"
   nebeneinander sprengten bei 360 px die Startseite (393 px). Ein
   Datumsfeld lässt sich nicht beliebig stauchen – also untereinander. */
@media(max-width:400px){
  .suchleiste form{grid-template-columns:1fr}
  .suchleiste form .feld:nth-child(3),.suchleiste form .btn{grid-column:auto}
}


/* Schaltfläche „Vertrag widerrufen" in der Fußzeile (§ 356a BGB).
   Das Gesetz verlangt „hervorgehoben und leicht zugänglich" – ein
   grauer Verweis zwischen sieben anderen wäre das nicht. Deshalb
   umrandet und mit dem Kontrast eines Knopfes. */
.fuss-widerruf{display:inline-block;margin-top:4px;padding:6px 12px;border:1px solid currentColor;
  border-radius:8px;font-weight:600;text-decoration:none}
.fuss-widerruf:hover{background:rgba(255,255,255,.12)}

/* Stornieren im Kundenkonto: sichtbar, aber nicht der große Knopf.
   Wer absagen will, findet es; wer nur liest, stolpert nicht darüber. */
.storno-konto{margin-top:14px;border-top:1px solid var(--c-line);padding-top:12px}
.storno-konto summary{cursor:pointer;font-size:13.5px;color:var(--c-ink-2);font-weight:600}
.storno-konto summary:hover{color:var(--c-ink)}

/* =====================================================================
   Etikettenseite (q.php)

   Eine Seite für die Baustelle: Handschuhe an, ein Balken Empfang, die
   Maschine steht davor. Große Flächen zum Antippen, keine Navigation,
   kein Warenkorb – nur Foto, Anleitung und eine Telefonnummer.

   Die Knöpfe sind bewusst mindestens 52 px hoch: Das ist die Größe, die
   man mit Arbeitshandschuhen noch trifft.
   ===================================================================== */
body.q-seite{background:var(--c-bg);margin:0}

.q-kopf{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:12px;background:var(--c-stahl-900);color:#fff;padding:10px 16px}
.q-marke{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;
  font-weight:800;letter-spacing:.12em;font-size:14px}
.q-marke span{font-weight:600;letter-spacing:.04em;font-size:11px;color:var(--c-silber-400)}
.q-marke .q-punkt{width:8px;height:8px;border-radius:99px;background:var(--c-silber-300);flex:none}
.q-anruf{display:flex;align-items:center;gap:7px;flex:none;text-decoration:none;
  background:#fff;color:var(--c-stahl-900);font-weight:700;font-size:14px;
  padding:9px 14px;border-radius:99px}
.q-anruf svg{width:17px;height:17px}

.q-inhalt{max-width:640px;margin:0 auto;padding:16px 16px 34px}

/* Foto: fester Ausschnitt, damit hochkant und quer gleich aussehen. */
.q-bild{position:relative;background:#fff;border:1px solid var(--c-line);border-radius:16px;
  overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center}
.q-bild img{width:100%;height:100%;object-fit:contain;display:block;padding:8px;box-sizing:border-box}
.q-bild-leer{background:var(--c-surface-2)}
.q-bild-leer svg{width:44%;height:44%;color:var(--c-silber-400)}
.q-code{position:absolute;left:10px;bottom:10px;background:var(--c-stahl-900);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.05em;padding:5px 11px;border-radius:99px}

.q-titel{font-size:26px;line-height:1.2;margin:16px 0 2px}
.q-typ{color:var(--c-ink-2);margin:0 0 14px;font-size:16px}
.q-abschnitt{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--c-ink-3);
  margin:26px 0 10px}

.q-status{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:14px;color:var(--c-ink-2)}
.q-punkt-gruen{width:9px;height:9px;border-radius:99px;background:var(--st-frei);flex:none}
.q-sperre{background:#fdecec;border:1px solid #f3bcbc;border-left:5px solid var(--st-belegt);
  border-radius:12px;padding:13px 15px;margin:0 0 16px;display:grid;gap:4px}
.q-sperre b{color:var(--st-belegt);font-size:15px}
.q-sperre span{font-size:14px;color:var(--c-ink-2)}

.q-aktionen{display:grid;gap:10px}
.q-knopf{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  padding:14px 18px;border-radius:13px;text-decoration:none;font-weight:700;font-size:16px;
  text-align:center;box-sizing:border-box}
.q-knopf svg{width:20px;height:20px;flex:none}
.q-knopf-haupt{background:var(--c-stahl-900);color:#fff}
.q-knopf-rand{background:#fff;color:var(--c-ink);border:1.5px solid var(--c-line-2)}
.q-knopf-still{background:transparent;color:var(--c-ink-2);border:1.5px solid var(--c-line);font-weight:600}

.q-hinweis{background:#fff;border:1px solid var(--c-line);border-radius:13px;padding:14px 16px;
  font-size:14.5px;color:var(--c-ink-2);line-height:1.6}
.q-hinweis b{display:block;color:var(--c-ink);margin-bottom:4px}
.q-hinweis .q-knopf{margin-top:12px}

.q-chips{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0}
.q-chips span{background:#fff;border:1px solid var(--c-line);border-radius:99px;
  padding:6px 12px;font-size:13px;color:var(--c-ink-2)}
.q-text{margin:14px 0 0;color:var(--c-ink-2);line-height:1.65;font-size:15px}

.q-galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.q-galerie img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;
  border:1px solid var(--c-line);background:#fff;display:block}

/* Klappen: zu, bis jemand sie braucht. Reines <details>, kein Skript. */
.q-klappe{background:#fff;border:1px solid var(--c-line);border-radius:13px;margin-top:12px;
  overflow:hidden}
.q-klappe>summary{padding:15px 16px;font-weight:700;font-size:15.5px;cursor:pointer;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  -webkit-user-select:none;user-select:none}
.q-klappe>summary::-webkit-details-marker{display:none}
.q-klappe>summary::after{content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--c-ink-3);border-bottom:2px solid var(--c-ink-3);
  transform:rotate(45deg);margin-top:-4px}
.q-klappe[open]>summary::after{transform:rotate(225deg);margin-top:3px}
.q-klappe[open]>summary{border-bottom:1px solid var(--c-line)}
.q-tabelle{width:100%;border-collapse:collapse;font-size:14.5px}
.q-tabelle td{padding:10px 16px;border-bottom:1px solid var(--c-line);vertical-align:top}
.q-tabelle td:first-child{color:var(--c-ink-3);width:44%}
.q-tabelle tr:last-child td{border-bottom:0}
.q-klappe>p{padding:0 16px 14px;margin:10px 0 0}

.q-sec{color:var(--c-ink-3)}
.q-klein{font-size:13px;line-height:1.6}
.q-warn{color:var(--st-belegt);font-size:15px;line-height:1.6}
.q-block{background:#fff;border:1px solid var(--c-line);border-radius:16px;padding:20px}
.q-suchform{display:grid;gap:10px;margin:16px 0 12px}
.q-label{font-size:13px;font-weight:600;color:var(--c-ink-2)}
.q-suchform input{width:100%;box-sizing:border-box;padding:14px 15px;font:inherit;font-size:17px;
  border:1.5px solid var(--c-line-2);border-radius:12px;text-transform:uppercase}

.q-fuss{max-width:640px;margin:0 auto;padding:22px 16px 40px;color:var(--c-ink-3);
  font-size:13px;line-height:1.65;text-align:center}
.q-fuss a{color:var(--c-ink-2)}

@media (min-width:560px){
  .q-inhalt{padding:24px 20px 44px}
  .q-titel{font-size:30px}
  /* Auf dem Tablet passen Anleitung und Datenblatt nebeneinander. */
  .q-aktionen{grid-template-columns:1fr 1fr}
  .q-aktionen>.q-knopf-haupt:only-child,
  .q-aktionen>.q-hinweis{grid-column:1 / -1}
}

/* --- Alternativen statt Absage -------------------------------------
   Ist das Gerät belegt, ist die Anfrage trotzdem da. Die Vorschläge
   stehen direkt unter der Absage, damit niemand zurückblättern muss. */
.ersatz{margin-top:14px;border:1px solid var(--c-line-2,#d5d9df);border-radius:12px;padding:14px;background:var(--c-surface,#fff)}
.ersatz-kopf{font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--c-ink-3,#8a8f98);margin-bottom:10px}
.ersatz-zeile{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:11px 12px;border:1px solid var(--c-line,#e7eaee);border-radius:10px;margin-bottom:8px;
  text-decoration:none;color:inherit;min-height:52px;box-sizing:border-box}
.ersatz-zeile:last-of-type{margin-bottom:0}
.ersatz-zeile:hover{border-color:var(--c-ink,#14171c)}
.ersatz-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.ersatz-name .muted{font-size:12.5px}
.ersatz-preis{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.ersatz-preis .muted{font-size:12px}
@media (max-width:420px){
  .ersatz-zeile{flex-direction:column;align-items:stretch}
  .ersatz-preis{align-items:flex-start}
}

/* --- Geräteliste: Standort, Schutzart und Selbstbehalt in der Zeile ---
   Beides sind Sammelfelder: ein Auswahlfeld je Zeile, ein Knopf für
   alles. In der Tabelle dürfen sie nicht so breit werden wie ein Feld im
   Formular, sonst schiebt sich die Liste auseinander; als Karte unter
   700 px dürfen sie dagegen die volle Breite nehmen. */
.k-ort .ortwahl,.k-schutz .ortwahl{font-size:13px;padding:7px 30px 7px 9px;
  background-position:right 9px center;max-width:196px}
.k-schutz{white-space:nowrap}
.k-schutz .sbfeld{font-size:13px;padding:7px 8px;width:64px;margin-left:6px;
  text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:700px){
  .k-schutz{white-space:normal}
  .k-ort .ortwahl,.k-schutz .ortwahl{max-width:100%;width:100%}
  .k-schutz .sbfeld{width:100%;margin:6px 0 0;text-align:left}
}