/* =========================================================================
Buchungs-Shop Prototyp — Campingvermietung (Arbeitstitel „Freizeitdepot")
Branding zentral über :root (Bau-Schema FR | IT & Technikservice).
Mobile first. Keine externen Fonts/CDNs (System-Font-Stack → DSGVO-sauber,
kein Cookie-Banner nötig).
========================================================================= */
:root{
/* Marke: Farben aus dem Kunden-Logo (FD-Kachel, 2026-07-02):
Navy #01274c + Türkis #02cee6 — Berge/Wasser, frisch & vertrauenswürdig */
--farbe-navy-tief: #01274c; /* Logo-Navy (Hero/Footer/dunkle Flächen) */
--farbe-primaer: #123a63; /* Marineblau, lesbar auf Weiß (Links/Buttons) */
--farbe-hover: #0b2947;
--farbe-akzent: #0a9db4; /* Logo-Türkis, abgedunkelt für CTA mit weißem Text */
--farbe-akzent-hv: #067e91;
--farbe-tuerkis: #02cee6; /* Logo-Türkis pur (Schimmer/Glanz) */
--farbe-bg: #f4f7f9; /* kühles Off-White passend zu Navy/Türkis */
--farbe-karte: #ffffff;
--farbe-text: #1c2b3a;
--farbe-text-soft: #55677a;
--farbe-linie: #dde5ec;
--farbe-ok: #1e7a46;
--farbe-ok-bg: #e6f4ec;
--farbe-warn: #9a5b00;
--farbe-warn-bg: #fdf1dd;
--farbe-demo: #453a86; /* Demo-Banner: bewusst markenfremd = unübersehbar */
/* Marken-Board des Kunden (ChatGPT-Entwurf, erhalten 2026-08-06) — Farben
direkt aus dem Farbstreifen des Boards ausgelesen. Werden für die neuen
Marken-Bausteine (Wortmarke, Dreiklang, Maskottchen, Siegel) genutzt;
die bestehende Navy/Türkis-Palette oben bleibt unangetastet. */
--fd-navy: #082245; /* „FREIZEIT" + dunkle Markenflächen */
--fd-blau: #2e60a0; /* „DEPOT" + ERLEBEN */
--fd-hellblau: #7ba4d0; /* Verlauf/Trenner */
--fd-gruen: #729153; /* ABHOLEN — Akzent der Marke */
--fd-gruen-dunkel: #5f7c44; /* abgedunkelt, damit weißer Text darauf AA erfüllt */
--fd-creme: #e6e2dc; /* Off-White der Marke */
--font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--radius: 14px;
--schatten: 0 1px 3px rgba(34,48,58,.08), 0 6px 18px rgba(34,48,58,.06);
--demo-banner-h: 34px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
font-family:var(--font-body);
color:var(--farbe-text);
/* Schlichtes Camping-Symbol-Muster (Print-Look, sehr dezent) über dem Off-White.
Deckkraft steuert das SVG selbst (stroke-opacity, Standard 0.07). */
background:
url("../img/hintergrund-muster.svg?v=e557b429") 0 0/360px auto repeat,
var(--farbe-bg);
line-height:1.55;
-webkit-font-smoothing:antialiased;
}
img,svg{ display:block; }
a{ color:var(--farbe-primaer); }
h1,h2,h3{ font-family:var(--font-head); line-height:1.2; margin:0 0 .5em; }
h1{ font-size:clamp(1.7rem,5.5vw,2.6rem); letter-spacing:-.02em; }
h2{ font-size:clamp(1.3rem,4vw,1.8rem); letter-spacing:-.01em; }
p{ margin:.4em 0; }
.hinweis-klein{ font-size:.8rem; color:var(--farbe-text-soft); }
.container{ max-width:1100px; margin:0 auto; padding:0 16px; }
/* ---------- Demo-Banner (unübersehbar, aber schlank) ----------
`sticky` statt `fixed` (12.08.2026): Als fixed-Element lag der Banner außerhalb
des Layoutflusses und brauchte einen Platzhalter (`body{padding-top}`). Der blieb
im Live-Modus stehen, wenn JS den Banner entfernt — auf den vier Unterseiten (die
nur seite.js laden) blieb dadurch dauerhaft ein toter 34-px-Streifen über dem
Header, auf der Startseite ruckelte das Layout beim ersten Paint um 34 px.
Sticky klebt genauso oben, belegt aber echten Platz: Fällt der Banner weg,
verschwindet der Platz automatisch mit — auf allen Seiten, auch ohne JS. */
.demo-banner{
position:sticky; top:0; z-index:60;
height:var(--demo-banner-h);
display:flex; align-items:center; justify-content:center; gap:8px;
background:var(--farbe-demo); color:#fff;
font-size:.78rem; font-weight:600; letter-spacing:.02em;
padding:0 10px; text-align:center;
}
.demo-banner strong{ text-transform:uppercase; letter-spacing:.08em; }
/* ---------- Header ---------- */
.seiten-header{
background:var(--farbe-karte);
border-bottom:1px solid var(--farbe-linie);
}
.header-zeile{
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
padding:12px 0;
}
.logo{
display:flex; align-items:center; gap:10px;
text-decoration:none; color:var(--farbe-text);
font-weight:800; font-size:1.15rem; letter-spacing:-.01em;
}
.logo-mark{
width:38px; height:38px; border-radius:10px;
flex-shrink:0; object-fit:cover; display:block;
}
.header-nav{ display:flex; gap:4px 14px; flex-wrap:wrap; font-size:.92rem; }
.header-nav a{ color:var(--farbe-text-soft); text-decoration:none; padding:4px 2px; }
.header-nav a:hover{ color:var(--farbe-primaer); }
.header-konto{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.konto-status{ font-size:.85rem; color:var(--farbe-ok); font-weight:600; max-width:180px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ---------- Buttons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
font:inherit; font-weight:700; font-size:.95rem;
border:none; border-radius:999px; cursor:pointer;
padding:11px 20px; text-decoration:none; transition:background .15s, transform .05s;
}
.btn:active{ transform:scale(.98); }
.btn-primaer{ background:var(--farbe-akzent); color:#fff; }
.btn-primaer:hover{ background:var(--farbe-akzent-hv); }
/* Seit dem Marken-Board (06.08.2026) ist Grün die Aktionsfarbe der Marke
(„JETZT BUCHEN" ist dort grün). Der abgedunkelte Ton hält den Kontrast zu
weißer Schrift über 4.5:1 — das reine Marken-Grün täte das nicht. */
.btn-gruen{ background:var(--fd-gruen-dunkel); color:#fff; }
.btn-gruen:hover{ background:#516a3a; }
.btn-ghost{
background:transparent; color:var(--farbe-primaer);
border:2px solid var(--farbe-primaer);
}
.btn-ghost:hover{ background:var(--farbe-primaer); color:#fff; }
.btn-klein{ padding:8px 14px; font-size:.85rem; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
/* ---------- Hero / Headliner ----------
Titelbild SICHTBAR statt versteckt (14.08.2026, Wunsch Fabi nach dem
Marken-Board des Kunden). Vorher lag ein fast deckender Navy-Verlauf über
der ganzen Fläche (.93 → .60) — vom See blieb nur ein Schimmer.
Ein Foto soll wirken, weißer Text muss trotzdem lesbar bleiben. Gelöst
NICHT mit einem Schleier über alles, sondern gezielt:
1. gerichteter Verlauf, der nur deckt, wo Text steht (Handy oben+unten,
Desktop von links) — die Bildmitte bleibt frei
2. weicher Textschatten als Rückversicherung auf hellen Stellen
Bild: hero-see-morgen statt -daemmerung; die Nachtszene war selbst ohne
Verlauf düster und traf die freundliche Board-Stimmung nicht. */
.hero{
background:
url("../img/stimmung/hero-see-morgen.jpg?v=f9b63034") center 58%/cover no-repeat,
linear-gradient(160deg, #0d3a5c 0%, #14567f 100%); /* Rückfall */
color:#fff; padding:40px 0 84px; position:relative; overflow:hidden;
isolation:isolate;
}
/* ⚠️ Gemessen, nicht geschätzt: Die Überschrift steht auf dem Handy schon bei
9 % der Hero-Höhe. Ein Verlauf, der nach unten stärker wird, deckt also
genau dort am wenigsten, wo der größte Text steht. Deshalb oben kräftig,
in der Mitte zurückgenommen, unten wieder dichter für Badges und Störer. */
.hero::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:linear-gradient(180deg,
rgba(1,25,48,.74) 0%, rgba(1,25,48,.66) 22%, rgba(1,25,48,.52) 46%,
rgba(1,25,48,.68) 74%, rgba(1,25,48,.86) 100%);
}
.hero h1{ text-shadow:0 2px 14px rgba(0,18,38,.55), 0 1px 3px rgba(0,18,38,.4); }
.hero .container{ position:relative; z-index:1; }
/* (Die früheren Hero-Bilder .hero-scooter und .hero-maskottchen sind seit
14.08.2026 durch das eine Plüsch-Motiv .hero-szene ersetzt — s. unten.) */
@keyframes produkt-glanz-puls{
from{ filter:
drop-shadow(0 0 6px rgba(190,244,250,.45))
drop-shadow(0 0 16px rgba(2,206,230,.28))
drop-shadow(0 12px 12px rgba(0,0,0,.35)); }
to{ filter:
drop-shadow(0 0 10px rgba(190,244,250,.75))
drop-shadow(0 0 30px rgba(2,206,230,.5))
drop-shadow(0 12px 12px rgba(0,0,0,.35)); }
}
/* Auf sehr schmalen Screens braucht der Scooter Platz: Hero unten mehr Luft */
.hero{ padding-bottom:230px; }
.hero-berge{ position:absolute; bottom:-2px; left:0; right:0; width:100%; height:70px; color:var(--farbe-bg); }
.hero h1{ max-width:620px; }
.hero-logik{
max-width:640px; font-size:1.02rem; opacity:1;
text-shadow:0 1px 10px rgba(0,18,38,.5);
}
.hero-logik strong{ color:#a8f0fa; }
.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 22px; }
/* Auf einem sichtbaren Foto braucht ein Badge eine eigene Fläche — der frühere
fast durchsichtige Glaslook verschwand im Bild. */
.badge{
display:inline-flex; align-items:center; gap:6px;
background:rgba(1,25,48,.55); border:1px solid rgba(255,255,255,.42);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
text-shadow:0 1px 4px rgba(0,18,38,.5);
color:#fff; border-radius:999px; padding:6px 14px;
font-size:.82rem; font-weight:600;
}
.badge-rabatt{ background:var(--farbe-akzent); border-color:var(--farbe-akzent); }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
/* ---------- Zeitraum-Suche (Kern-Feature) ---------- */
/* Bewusst NICHT sticky: würde auf Mobile dauerhaft Viewport fressen —
die Artikel-Karten haben eigene „Zeitraum wählen"-Buttons, die hierher scrollen. */
.suche-wrap{ margin-top:-56px; position:relative; z-index:5; }
.suche-panel{
background:var(--farbe-karte); border-radius:var(--radius);
box-shadow:var(--schatten); border:1px solid var(--farbe-linie);
padding:16px;
}
.suche-titel{ font-weight:800; margin:0 0 10px; font-size:1rem; display:flex; align-items:center; gap:8px; }
.suche-felder{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.suche-felder .feld-gruppe.voll{ grid-column:1 / -1; }
.feld-gruppe label{ display:block; font-size:.78rem; font-weight:700; color:var(--farbe-text-soft); margin-bottom:4px; }
input[type=date], input[type=text], input[type=email], input[type=tel], select{
width:100%; font:inherit; padding:10px 12px;
border:1.5px solid var(--farbe-linie); border-radius:10px;
background:#fff; color:var(--farbe-text);
}
input:focus, select:focus{ outline:2px solid var(--farbe-primaer); outline-offset:1px; border-color:var(--farbe-primaer); }
.suche-status{ margin:10px 2px 0; font-size:.88rem; }
.suche-status.ok{ color:var(--farbe-ok); font-weight:600; }
.suche-status.warn{ color:var(--farbe-warn); font-weight:600; }
/* ---------- Katalog ---------- */
.katalog{ padding:34px 0 10px; }
.katalog-kopf{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.kategorie-leiste{
display:flex; gap:8px; overflow-x:auto; padding:14px 0 6px;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.kategorie-leiste::-webkit-scrollbar{ display:none; }
.kat-chip{
flex-shrink:0; font:inherit; font-size:.85rem; font-weight:600;
border:1.5px solid var(--farbe-linie); background:var(--farbe-karte);
color:var(--farbe-text-soft); border-radius:999px; padding:7px 15px; cursor:pointer;
}
.kat-chip.aktiv{ background:var(--farbe-primaer); border-color:var(--farbe-primaer); color:#fff; }
.filter-info{
margin:8px 0 0; padding:10px 14px; border-radius:10px;
background:var(--farbe-ok-bg); color:var(--farbe-ok);
font-size:.9rem; font-weight:600;
}
.filter-info.leer{ background:var(--farbe-warn-bg); color:var(--farbe-warn); }
.karten-raster{
display:grid; grid-template-columns:1fr; gap:16px; padding:16px 0 30px;
}
.artikel-karte{
background:var(--farbe-karte); border-radius:var(--radius);
border:1px solid var(--farbe-linie); box-shadow:var(--schatten);
padding:16px; display:flex; flex-direction:column; gap:10px;
transition:box-shadow .2s;
}
.artikel-karte.highlight{ outline:3px solid var(--farbe-akzent); }
/* ---------- Produkt-Schimmer (Kundenwunsch 2026-07-02) ----------
EINHEITLICHES Erkennungszeichen für ALLE Mietartikel des Shops:
eine feine, schimmernd wandernde Umrandung + warmer Glanz.
Immer anwenden, wo ein Produkt gezeigt wird (Karten, Empfehlungen);
der freigestellte Hero-Scooter nutzt dieselbe Lichtfarbe als Kontur-Glow. */
.produkt-schimmer{
position:relative; border-color:transparent;
box-shadow:var(--schatten), 0 0 16px rgba(2,206,230,.20);
}
.produkt-schimmer::before{
content:""; position:absolute; inset:0; border-radius:inherit;
padding:1.6px; pointer-events:none;
background:linear-gradient(115deg,
rgba(18,58,99,.45) 0%, rgba(2,206,230,.9) 30%,
rgba(190,244,250,.95) 50%, rgba(2,206,230,.9) 70%, rgba(18,58,99,.45) 100%);
background-size:300% 300%;
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite:exclude;
animation:schimmer-lauf 5.5s linear infinite;
}
@keyframes schimmer-lauf{
0%{ background-position:0% 50%; }
100%{ background-position:300% 50%; }
}
/* ---------- Karten-Bilder (echte Produktfotos) ---------- */
/* Hintergrund weiß statt beige (12.08.2026): die Studio-/Herstellerfotos (Grill,
E-Bike, Klima, Zelt) haben weiße bis hellgraue Hintergründe — auf Beige standen
sie als sichtbarer Kasten im Kasten, besonders bei Hochformat-Bildern.
`cover` statt `contain` (12.08.): ALLE Produktbilder liegen seit heute selbst im
4:3-Format vor (Nicht-4:3-Motive wurden auf eine weiße 4:3-Leinwand zentriert,
Originale in img/produkte/_original-vor-4zu3/). Weil Bild- und Rahmenformat jetzt
identisch sind, schneidet `cover` nichts ab, füllt den Rahmen aber randlos —
die Kunden-Motive (Text oben, FD-Logo unten) bleiben vollständig sichtbar.
⚠️ Neue Produktbilder deshalb IMMER als 4:3 anliefern (s. REGELN.md §Galerien). */
.karte-bild{
margin:-16px -16px 2px; border-radius:var(--radius) var(--radius) 0 0;
overflow:hidden; background:#fff; aspect-ratio:4/3;
}
.karte-bild img{ width:100%; height:100%; object-fit:cover; }
.karte-thumbs{ display:flex; gap:8px; }
/* Thumbnails im selben 4:3 wie das Hauptbild — quadratische Kacheln hatten die
Motive seitlich angeschnitten (Logo/Text der Kunden-Grafiken fielen raus). */
.karte-thumb{
width:68px; height:51px; padding:0; border-radius:10px; overflow:hidden;
border:2px solid var(--farbe-linie); background:#fff; cursor:pointer; flex-shrink:0;
}
.karte-thumb.aktiv{ border-color:var(--farbe-akzent); }
.karte-thumb img{ width:100%; height:100%; object-fit:cover; }
.empfehlung-bild{
width:56px; height:56px; border-radius:10px; overflow:hidden;
background:#f2f0ea; flex-shrink:0;
}
.empfehlung-bild img{ width:100%; height:100%; object-fit:cover; }
.karte-kopf{ display:flex; gap:12px; align-items:flex-start; }
.karte-icon{
width:54px; height:54px; border-radius:12px; flex-shrink:0;
background:var(--farbe-ok-bg); color:var(--farbe-primaer);
display:flex; align-items:center; justify-content:center;
}
.karte-titel{ font-weight:800; font-size:1.02rem; margin:0; }
.karte-kat{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--farbe-text-soft); }
.karte-text{ font-size:.9rem; color:var(--farbe-text-soft); margin:0; }
.karte-preis-zeile{
display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
border-top:1px dashed var(--farbe-linie); padding-top:10px; margin-top:auto;
}
.karte-preis{ font-size:1.35rem; font-weight:800; color:var(--farbe-primaer); }
.karte-preis-einheit{ font-size:.85rem; color:var(--farbe-text-soft); font-weight:600; }
.karte-verfuegbar{
font-size:.86rem; font-weight:700; color:var(--farbe-ok);
background:var(--farbe-ok-bg); border-radius:8px; padding:8px 10px;
}
.karte-verfuegbar .gesamt{ display:block; font-size:1rem; }
.karte-fuss{ display:flex; gap:8px; flex-wrap:wrap; }
/* ---------- Vergebene Artikel: ausgegraut statt ausgeblendet (Fabi 2026-08-06) ----------
Karte bleibt im Raster (hinten angestellt), wirkt aber „still": Foto entsättigt,
Preis/Titel gedämpft, statt Warenkorb ein Kontakt-Anstoß. Kein Produkt-Schimmer. */
.karte-vergeben .karte-bild img{ filter:grayscale(1); opacity:.55; }
.karte-vergeben .karte-thumb img{ filter:grayscale(1); opacity:.7; }
.karte-vergeben .karte-icon{ filter:grayscale(1); opacity:.6; }
.karte-vergeben .karte-titel,
.karte-vergeben .karte-preis{ color:var(--farbe-text-soft); }
.karte-vergeben .karte-text{ opacity:.85; }
.karte-vergeben-hinweis{
font-size:.86rem; font-weight:700; color:var(--farbe-warn);
background:var(--farbe-warn-bg); border-radius:8px; padding:8px 10px;
}
.karte-vergeben-hinweis span{ display:block; font-weight:600; font-size:.83rem; margin-top:2px; }
/* ---------- Produkt-Details: einheitliches Listing-Schema (Vorlage: Kunden-Anzeigen) ---------- */
.karte-details-link{
background:none; border:none; padding:0; font:inherit; align-self:flex-start;
font-size:.85rem; font-weight:700; color:var(--farbe-akzent); cursor:pointer;
text-decoration:underline; text-underline-offset:3px;
}
.karte-details-link:hover{ color:var(--farbe-akzent-hv); }
.modal-breit{ max-width:720px; }
#pd-inhalt h4{
margin:18px 0 8px; font-size:.82rem; font-weight:800;
text-transform:uppercase; letter-spacing:.07em; color:var(--farbe-primaer);
}
.pd-intro{ color:var(--farbe-text-soft); margin:2px 0 0; }
.haken-liste{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.haken-liste li{ position:relative; padding-left:26px; font-size:.92rem; }
.haken-liste li::before{
content:""; position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%;
background:var(--farbe-ok-bg) url("data:image/svg+xml;utf8,") center/11px no-repeat;
}
.preis-kacheln{
display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
gap:10px; margin:6px 0 4px;
}
.preis-kachel{
border:1.5px solid var(--farbe-linie); border-radius:12px; padding:10px 12px;
display:flex; flex-direction:column; gap:2px; background:var(--farbe-karte);
}
.pk-titel{ font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--farbe-navy-tief); }
.pk-unter{ font-size:.75rem; color:var(--farbe-text-soft); }
.pk-preis{ font-size:1.35rem; font-weight:800; color:var(--farbe-primaer); margin-top:2px; }
/* ---------- Upsell: „nimm gleich 3 Tage" (Fabi 06.08.) ---------- */
.karte-upsell{
display:block; width:100%; text-align:left; margin-top:8px; cursor:pointer;
font:inherit; font-size:.86rem; color:var(--farbe-navy-tief);
background:linear-gradient(100deg, #fff6e2, #fdf1dd);
border:1.5px dashed #e0a94a; border-radius:10px; padding:9px 12px;
transition:background .15s, border-color .15s;
}
.karte-upsell:hover{ background:#fdeccb; border-color:#c78d2a; }
.karte-upsell span{ display:block; font-size:.8rem; color:var(--farbe-warn); font-weight:600; }
/* Empfohlene Preis-Kachel im Detail-Modal */
.preis-kachel.pk-empfohlen{
border-color:var(--farbe-akzent); border-width:2px;
box-shadow:0 0 0 3px rgba(2,206,230,.13); position:relative; padding-top:20px;
}
.pk-fahne{
position:absolute; top:-9px; left:10px;
background:var(--farbe-akzent); color:#fff; border-radius:999px;
font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
padding:3px 9px;
}
.pk-tipp{ font-size:.72rem; font-weight:700; color:var(--farbe-akzent-hv); margin-top:2px; }
.summe-zusatz{
display:block; font-style:normal; font-size:.78rem; font-weight:600;
color:var(--farbe-warn); margin-top:2px;
}
.pd-preis-offen{
background:var(--farbe-warn-bg); color:var(--farbe-warn);
border-radius:10px; padding:10px 14px; font-size:.9rem; font-weight:600;
}
.pd-fakten{
background:var(--farbe-bg); border-radius:10px; padding:10px 14px;
margin:12px 0; font-size:.9rem;
}
.pd-claim{
text-align:center; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
font-size:.8rem; color:var(--farbe-navy-tief); margin:16px 0 12px;
}
.pd-claim::before{ content:"— "; color:var(--farbe-akzent); }
.pd-claim::after{ content:" —"; color:var(--farbe-akzent); }
/* ---------- Sektionen ---------- */
.sektion{ padding:36px 0; }
.sektion-alt{ background:var(--farbe-karte); border-top:1px solid var(--farbe-linie); border-bottom:1px solid var(--farbe-linie); }
.schritte{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:18px; }
.schritt{
background:var(--farbe-bg); border:1px solid var(--farbe-linie);
border-radius:var(--radius); padding:18px; overflow:hidden;
}
/* Stimmungsfotos (Kundenbild-Auswahl 2026-07-02) — bewusst OHNE Produkt-Schimmer:
der Schimmer bleibt exklusiv den Mietartikeln vorbehalten */
.schritt-bild{ margin:-18px -18px 14px; aspect-ratio:16/9; }
.schritt-bild img{ width:100%; height:100%; object-fit:cover; }
.schritt-nr{
width:34px; height:34px; border-radius:50%;
background:var(--farbe-primaer); color:#fff; font-weight:800;
display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.schritt h3{ font-size:1.02rem; margin-bottom:4px; }
.schritt p{ font-size:.9rem; color:var(--farbe-text-soft); margin:0; }
/* ---------- „Vor Ort im Einsatz" (Szenen-Montagen) ---------- */
.szenen-raster{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:16px; }
.szene{ margin:0; }
/* 4:3 statt 3:2 (10.08.2026): Die Marken-Motive des Kunden sind 4:3 und tragen
Überschrift oben und FD-Logo unten — ein 3:2-Beschnitt würde beides anschneiden.
height:auto ist Pflicht: ohne das schlagen die width/height-Attribute am ![]()
(Presentational Hints der UA) durch und aspect-ratio wird ignoriert. */
.szene img{
width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
border-radius:var(--radius); box-shadow:var(--schatten);
}
.szene figcaption{ font-size:.85rem; color:var(--farbe-text-soft); padding:8px 4px 0; }
/* ---------- Kontaktwege (10.08.2026) --------------------------------------
Drei gleichwertige Kacheln statt einer nackten Mailadresse. WhatsApp steht
vorn, weil die Bestätigung ohnehin dort läuft (Kundenregel 05.08.). */
.kontakt-wege{ display:grid; grid-template-columns:1fr; gap:12px; margin:18px 0 22px; }
@media (min-width:760px){ .kontakt-wege{ grid-template-columns:repeat(3,1fr); } }
.kontakt-weg{
display:flex; align-items:flex-start; gap:14px;
padding:16px 18px; text-decoration:none; color:inherit;
background:var(--farbe-karte); border:1px solid var(--farbe-linie);
border-radius:var(--radius); box-shadow:var(--schatten);
transition:border-color .18s ease, transform .18s ease;
}
.kontakt-weg:hover{ border-color:var(--fd-blau); transform:translateY(-2px); }
.kontakt-weg--wa{ border-color:var(--fd-gruen); background:linear-gradient(180deg,#f4f8ef,#fff); }
.kontakt-weg--wa:hover{ border-color:var(--fd-gruen-dunkel); }
.kontakt-weg__icon{ font-size:1.5rem; line-height:1; flex:none; margin-top:2px; }
.kontakt-weg__inhalt{ display:block; min-width:0; }
.kontakt-weg__titel{
display:block; font-size:.75rem; font-weight:800; letter-spacing:.08em;
text-transform:uppercase; color:var(--farbe-text-soft);
}
.kontakt-weg__wert{
display:block; font-size:1.05rem; font-weight:800; color:var(--fd-navy);
margin-top:2px; overflow-wrap:anywhere;
}
.kontakt-weg__sub{ display:block; font-size:.83rem; color:var(--farbe-text-soft); margin-top:3px; }
.kontakt-fakten{
border-top:1px solid var(--farbe-linie); padding-top:16px;
display:grid; gap:8px; font-size:.93rem; color:var(--farbe-text-soft);
}
.kontakt-fakten strong{ color:var(--farbe-text); }
.kontakt-fakten a{ color:var(--farbe-primaer); }
.dauermiete-hinweis{
display:flex; gap:12px; align-items:center; flex-wrap:wrap;
background:var(--farbe-karte); border:1px dashed var(--farbe-primaer);
border-radius:var(--radius); padding:16px 18px; margin:8px 0 30px;
font-size:.92rem;
}
.dauermiete-hinweis strong{ color:var(--farbe-primaer); }
/* ---------- Footer ---------- */
.seiten-footer{
background:var(--farbe-navy-tief); color:#c3d2e2; padding:34px 0 26px; margin-top:20px;
font-size:.88rem;
}
.seiten-footer a{ color:#fff; }
.footer-spalten{ display:grid; grid-template-columns:1fr; gap:20px; }
.footer-marke{ font-weight:800; color:#fff; font-size:1.05rem; display:flex; align-items:center; gap:8px; }
.footer-meta{ border-top:1px solid rgba(255,255,255,.15); margin-top:22px; padding-top:14px; font-size:.78rem; color:#8ba2bb; }
/* ---------- Modals ---------- */
.modal-hintergrund{
position:fixed; inset:0; z-index:70; background:rgba(20,30,26,.55);
display:none; align-items:flex-end; justify-content:center; padding:0;
}
.modal-hintergrund.offen{ display:flex; }
.modal{
background:var(--farbe-karte); width:100%; max-width:560px;
border-radius:18px 18px 0 0; max-height:92vh; overflow-y:auto;
padding:20px 18px 26px; position:relative;
}
/* Modal-Kopfbalken (12.08.2026) — Titel + Schließkreuz kleben zusammen oben.
Vorgeschichte: Ursprünglich war das Kreuz `position:absolute` und scrollte im
Modal nach oben weg — auf dem Handy war es dadurch oft gar nicht erreichbar
(„lässt sich nicht klicken"). Der erste Fix (`sticky` + `float` am Knopf allein)
löste das, schuf aber ein schlimmeres Problem: Der Kreis schwebte frei über dem
Inhalt und fing Taps ab, die dem Element darunter galten — im Checkout traf er
u. a. die Lieferart-Radios und die Zeit-Wähler, ein Tipp aufs Zeilenende schloss
also das Modal und verwarf das ausgefüllte Formular.
Deshalb jetzt ein VOLLBREITER, deckender Balken: Er nimmt echten Platz ein,
schiebt den Inhalt darunter und kann nichts mehr verdecken oder abfangen. */
/* Hat ein Modal einen Kopfbalken, trägt der das obere Polster — das Modal selbst
darf keins mehr haben. Sonst braucht der Kopf einen negativen margin-top, und
genau der war der Fehler (13.08.2026): Ein sticky Element klebt bei `top:0`,
sein Platz im Textfluss lag durch `margin-top:-20px` aber 20 px höher. Der
Balken stand dadurch dauerhaft 20 px zu tief und überdeckte die erste Zeile
des Inhalts — im Produktfenster die Intro-Zeile, und zwar sofort beim Öffnen,
nicht erst beim Scrollen. */
.modal:has(.modal-kopf){ padding-top:0; }
.modal-kopf{
position:sticky; top:0; z-index:5;
display:flex; align-items:flex-start; gap:12px;
margin:0 -18px 6px; padding:16px 16px 10px;
background:var(--farbe-karte); border-radius:18px 18px 0 0;
}
/* margin-left:auto statt justify-content — schiebt das Kreuz auch dann nach rechts,
wenn der Balken KEINEN Titel enthält (Checkout: der Titel wechselt je Schritt
und steckt deshalb in den Schritt-Containern, nicht im Kopfbalken). */
.modal-kopf .modal-schliessen{ margin-left:auto; }
/* Weicher Auslauf nach unten, damit durchscrollender Text nicht hart an der
Balkenkante abgeschnitten wirkt. */
.modal-kopf::after{
content:""; position:absolute; left:0; right:0; top:100%; height:12px;
background:linear-gradient(var(--farbe-karte), rgba(255,255,255,0));
pointer-events:none;
}
.modal-kopf h2{ margin:0; padding-right:0; }
.modal-schliessen{
flex:none; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
background:var(--farbe-bg); color:var(--farbe-text); font-size:1.15rem; font-weight:700;
}
.modal-schliessen:hover{ background:#e4ebf1; }
.modal h2{ font-size:1.25rem; }
.modal .feld-gruppe{ margin-bottom:14px; }
.demo-hinweis-box{
background:var(--farbe-warn-bg); color:var(--farbe-warn);
border-radius:10px; padding:10px 12px; font-size:.82rem; margin:12px 0;
}
/* Auswahlfelder für die Lieferart und die PLZ-Umkreisprüfung sind am 18.08.2026
entfallen (nur noch Abholung) — die Regeln dazu ebenfalls. */
/* Meldung unter einem Feld (früher „plz-ergebnis" — der Name log nach dem
Ausbau der PLZ-Prüfung). */
.feld-meldung{ font-size:.85rem; font-weight:700; margin-top:6px; }
.feld-meldung.ok{ color:var(--farbe-ok); }
.feld-meldung.fehler{ color:#b3261e; }
.zusammenfassung{
background:var(--farbe-bg); border:1px solid var(--farbe-linie);
border-radius:12px; padding:14px; font-size:.92rem; margin-bottom:14px;
}
.zusammenfassung dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 14px; }
.zusammenfassung dt{ color:var(--farbe-text-soft); }
.zusammenfassung dd{ margin:0; font-weight:700; text-align:right; }
.zusammenfassung .summe{ border-top:1px dashed var(--farbe-linie); padding-top:6px; margin-top:4px; }
.bestaetigung{ text-align:center; padding:12px 0; }
.bestaetigung-icon{
width:64px; height:64px; margin:0 auto 14px; border-radius:50%;
background:var(--farbe-ok-bg); color:var(--farbe-ok);
display:flex; align-items:center; justify-content:center;
}
.check-liste{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0; }
.check-option{
display:flex; gap:8px; align-items:center;
border:1.5px solid var(--farbe-linie); border-radius:10px; padding:9px 10px;
font-size:.85rem; cursor:pointer; background:#fff;
}
.check-option:has(input:checked){ border-color:var(--farbe-primaer); background:var(--farbe-ok-bg); }
.check-option input{ accent-color:var(--farbe-primaer); }
.empfehlungen{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.empfehlung{
display:flex; gap:12px; align-items:center;
border:1px solid var(--farbe-linie); border-radius:12px; padding:12px;
}
.empfehlung .karte-icon{ width:44px; height:44px; }
.empfehlung-info{ flex:1; min-width:0; }
.empfehlung-info .name{ font-weight:700; font-size:.92rem; }
.empfehlung-info .grund{ font-size:.8rem; color:var(--farbe-text-soft); }
.empfehlung .preis{ font-weight:800; color:var(--farbe-primaer); white-space:nowrap; font-size:.92rem; }
/* ---------- Warenkorb ----------
Der Korb bündelt Artikel für EINEN Zeitraum → eine gemeinsame Buchung.
Leiste unten = Einstieg (erscheint ab 1 Artikel, via body.korb-aktiv). */
.korb-leiste{
position:fixed; left:0; right:0; bottom:0; z-index:55;
display:none; align-items:center; gap:10px;
background:var(--farbe-navy-tief); color:#fff;
padding:10px 12px calc(10px + env(safe-area-inset-bottom)) 16px;
box-shadow:0 -4px 18px rgba(1,39,76,.28);
}
body.korb-aktiv .korb-leiste{ display:flex; }
/* Doppelte Sicherung: mit hidden-Attribut NIE anzeigen (schlägt auch die Regel darüber) */
.korb-leiste[hidden]{ display:none !important; }
.korb-leiste-info{
flex:1; min-width:0; font-size:.92rem;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.korb-leiste-info strong{ font-size:1rem; }
.korb-leiste .btn{ flex-shrink:0; white-space:nowrap; }
/* Schwebender Assistent-Knopf: kompakte runde Icon-Blase (verdeckt so nie die
Karten-Buttons); rückt hoch, sobald die Korb-Leiste da ist */
.fab-assistent{
position:fixed; bottom:16px; right:16px; z-index:50;
width:56px; height:56px; padding:0; border-radius:50%;
font-size:1.55rem; line-height:1;
box-shadow:0 4px 14px rgba(0,0,0,.25);
}
body.korb-aktiv .fab-assistent{ bottom:88px; }
.im-korb{
display:inline-flex; align-items:center; gap:6px;
font-size:.85rem; font-weight:700; color:var(--farbe-ok);
background:var(--farbe-ok-bg); border-radius:999px; padding:8px 14px;
}
.korb-kopf{
font-size:.88rem; background:var(--farbe-bg);
border:1px solid var(--farbe-linie); border-radius:10px; padding:10px 12px;
}
.korb-positionen{ display:flex; flex-direction:column; gap:10px; }
.korb-position{
display:flex; gap:12px; align-items:center;
border:1px solid var(--farbe-linie); border-radius:12px; padding:10px 12px;
}
.pos-bild{
width:52px; height:52px; border-radius:10px; overflow:hidden; flex-shrink:0;
background:#f2f0ea; color:var(--farbe-primaer);
display:flex; align-items:center; justify-content:center;
}
.pos-bild img{ width:100%; height:100%; object-fit:cover; }
.pos-info{ flex:1; min-width:0; }
.pos-name{ font-weight:700; font-size:.92rem; }
.pos-rechnung{ font-size:.8rem; color:var(--farbe-text-soft); }
.pos-preis{ font-weight:800; color:var(--farbe-primaer); white-space:nowrap; font-size:.95rem; }
.pos-entfernen{
width:32px; height:32px; border-radius:50%; border:none; cursor:pointer; flex-shrink:0;
background:var(--farbe-bg); color:var(--farbe-text-soft); font-size:.95rem; font-weight:700;
}
.pos-entfernen:hover{ background:#fbe9e7; color:#b3261e; }
.korb-gesamt-zeile{
display:flex; justify-content:space-between; align-items:baseline;
border-top:1px dashed var(--farbe-linie); margin-top:14px; padding-top:10px;
font-weight:800;
}
.korb-gesamt-zeile .betrag{ font-size:1.35rem; color:var(--farbe-primaer); }
#wk-buchen{ margin-top:12px; }
/* ---------- Unterseiten (Impressum/Datenschutz) ---------- */
.rechtsseite{ padding:30px 0 60px; max-width:760px; }
/* .todo-box und .platzhalter entfernt (18.08.2026): Die Entwurfs-Kästen standen als
orange gestrichelte Hinweise SICHTBAR im Impressum, in der Datenschutzerklärung und
in den Mietbedingungen — auf der Live-Seite für jeden Besucher lesbar. Die Notizen
stehen jetzt als HTML-Kommentare im Quelltext der jeweiligen Seite. */
/* =========================================================================
MARKEN-BAUSTEINE — aus dem Marken-Board des Kunden (06.08.2026)
=========================================================================
Wortmarke, Maskottchen („Depot-Männchen"), Siegel und der Dreiklang
„Buchen. Abholen. Erleben." Bilder liegen in img/marke/ (freigestellt,
aus dem Board geschnitten + hochskaliert).
⚠️ Der E-Scooter taucht bewusst NIRGENDS auf (Fabi 2026-08-07) — auch nicht
als Icon: auf der Kiste des Maskottchens wurde er durch ein Zelt ersetzt.
========================================================================= */
/* --- Wortmarke im Header (ersetzt Kachel-Logo + Schriftzug) --- */
.logo-wortmarke{ height:32px; width:auto; display:block; }
/* --- Dreiklang „Buchen. Abholen. Erleben." --- */
.dreiklang-band{
display:grid; grid-template-columns:1fr; gap:14px; align-items:center;
background:var(--farbe-karte); border:1px solid var(--farbe-linie);
border-radius:var(--radius); padding:18px 18px 0;
margin:16px 0 6px; overflow:hidden;
}
.dreiklang{
display:grid; grid-template-columns:repeat(3, 1fr);
gap:6px; padding-bottom:6px;
}
.dk-schritt{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
/* Trennstriche wie im Marken-Board */
.dk-schritt + .dk-schritt{ border-left:1px solid var(--farbe-linie); }
.dk-schritt svg{ width:58px; height:58px; display:block; }
.dk-wort{
font-family:var(--font-head); font-weight:800;
font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
}
.dk-buchen .dk-wort{ color:var(--fd-navy); }
.dk-abholen .dk-wort{ color:var(--fd-gruen-dunkel); }
.dk-erleben .dk-wort{ color:var(--fd-blau); }
/* Maskottchen sitzt auf der Unterkante des Bandes auf: mobil mittig unter den
Icons, ab 960px als eigene Spalte rechts daneben. Bewusst auch mobil sichtbar —
dort kommt der Großteil der Besucher an, und das Männchen IST die Marke. */
.dreiklang-maskottchen{
display:block; height:112px; width:auto; align-self:end; justify-self:center;
filter:drop-shadow(0 12px 18px rgba(8,34,69,.18));
}
/* ⚠️ Höhe bewusst kleiner als bei der früheren sitzenden Fassung (150/215 px).
Grund: Dort war rund ein Drittel der Bildhöhe die Kiste — die Figur selbst
nahm nur zwei Drittel ein. Die stehende Fassung füllt die Bildhöhe komplett
aus und wirkt bei gleicher Pixelangabe deshalb deutlich größer; sie zog das
Band auf und drückte die Icons nach unten. 112/165 px ergeben eine Figur in
derselben optischen Größe wie vorher. */
/* --- Maskottchen als Begleiter in Leer-/Erfolgs-Zuständen --- */
.mit-maskottchen{
display:flex; gap:14px; align-items:center; text-align:left;
}
.mit-maskottchen img{
flex:none; width:78px; height:auto;
filter:drop-shadow(0 6px 10px rgba(8,34,69,.16));
}
/* Die Büste ist unten hart abgeschnitten (Kiste weggeschnitten) — der weiche
Auslauf lässt sie „aus der Fläche auftauchen" statt abgesägt zu wirken. */
.mit-maskottchen img,
.bestaetigung-maskottchen img{
-webkit-mask-image:linear-gradient(#000 76%, transparent 99%);
mask-image:linear-gradient(#000 76%, transparent 99%);
}
/* Bestätigung: Männchen mit Daumen hoch statt nur Häkchen-Kreis */
.bestaetigung-maskottchen{
position:relative; width:132px; margin:0 auto 12px;
}
.bestaetigung-maskottchen img{ width:100%; height:auto; display:block;
filter:drop-shadow(0 10px 16px rgba(8,34,69,.2)); }
/* Haken sitzt LINKS — rechts hält der erhobene Daumen die Fläche */
.bestaetigung-maskottchen .haken{
position:absolute; left:-2px; bottom:14px;
width:40px; height:40px; border-radius:50%;
background:var(--fd-gruen-dunkel); color:#fff;
display:flex; align-items:center; justify-content:center;
border:3px solid #fff; box-shadow:0 3px 10px rgba(8,34,69,.25);
}
/* --- Marken-Siegel (rund) im Footer --- */
.footer-siegel{
width:84px; height:84px; flex:none;
filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));
}
.footer-wortmarke{ height:30px; width:auto; display:block; }
.footer-marke-zeile{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
/* ---------- Handy: weniger Überladung (Fabi 12.08.2026) ----------
Alles eine Stufe kompakter: kleinere Bilder/Abstände, Kurztext auf 2 Zeilen,
und die lange Preis-Staffel-Zeile verschwindet (steht komplett im Detail-Modal). */
/* ---------- Desktop ---------- */
@media (min-width: 640px){
.modal-hintergrund{ align-items:center; padding:24px; }
.modal{ border-radius:18px; }
.karten-raster{ grid-template-columns:repeat(2, 1fr); }
.suche-felder{ grid-template-columns:1fr 1fr auto; align-items:end; }
.suche-felder .feld-gruppe.voll{ grid-column:auto; }
/* Korb-Leiste als schwebende Pille statt Vollbreite */
.korb-leiste{
left:50%; right:auto; bottom:16px; transform:translateX(-50%);
width:min(560px, calc(100% - 32px));
border-radius:999px; padding:10px 10px 10px 22px;
}
}
@media (min-width: 960px){
.karten-raster{ grid-template-columns:repeat(3, 1fr); }
.schritte{ grid-template-columns:repeat(3, 1fr); }
.szenen-raster{ grid-template-columns:repeat(3, 1fr); }
.footer-spalten{ grid-template-columns:2fr 1fr 1fr; }
.hero{ padding:56px 0 100px; }
/* Scooter groß rechts neben dem Text; Container hält rechts Platz frei */
.hero .container{ padding-right:340px; }
/* Dreiklang bekommt das Maskottchen als vierte Spalte dazu.
padding-bottom:0 → das Männchen sitzt auf der Bandkante auf, statt zu schweben. */
.dreiklang-band{ grid-template-columns:1fr auto; gap:30px; padding:22px 30px 0; }
.dreiklang{ padding-bottom:22px; }
.dreiklang-maskottchen{ height:165px; }
}
/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*{ transition:none !important; animation:none !important; }
}
/* =========================================================================
EIGENE KOMPONENTEN (Kundenregel 2026-08-05: keine nativen Browser-Widgets,
kein Simpel-CSS — Referenz-Niveau 21st.dev/shadcn, nativ nachgebaut)
========================================================================= */
/* ---------- Zeitraum-Feld + Range-Kalender (Popover) ---------- */
.zeitraum-zeile{ display:grid; grid-template-columns:1fr; gap:10px; }
.zeitraum-feld{ position:relative; }
.zeitraum-trigger{
width:100%; display:flex; align-items:center; gap:12px; text-align:left;
min-height:58px; padding:8px 14px; font:inherit; font-size:1.02rem; font-weight:600;
color:var(--farbe-text-soft); background:#fff; cursor:pointer;
border:1.5px solid var(--farbe-linie); border-radius:14px;
transition:border-color .18s ease, box-shadow .18s ease;
}
.zeitraum-trigger:hover{ border-color:#b9cddb; box-shadow:0 2px 10px rgba(1,39,76,.07); }
.zeitraum-trigger:focus-visible{
outline:none; border-color:var(--farbe-akzent);
box-shadow:0 0 0 4px rgba(2,206,230,.22);
}
.zeitraum-trigger[data-gefuellt]{ color:var(--farbe-navy-tief); font-weight:700; }
.zt-icon{
flex:none; width:38px; height:38px; display:grid; place-items:center;
background:#e6fafd; color:var(--farbe-akzent); border-radius:11px;
}
.zt-text{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zt-text small{ display:block; font-size:.72rem; font-weight:700; color:var(--farbe-text-soft); letter-spacing:.01em; }
.zt-pfeil{ flex:none; color:var(--farbe-text-soft); display:grid; place-items:center; transition:transform .2s cubic-bezier(.16,1,.3,1); }
.zeitraum-trigger[aria-expanded="true"] .zt-pfeil{ transform:rotate(180deg); }
.zeitraum-trigger[aria-expanded="true"]{ border-color:var(--farbe-akzent); box-shadow:0 0 0 4px rgba(2,206,230,.16); }
.zeitraum-submit{ width:100%; min-height:58px; font-size:1.02rem; border-radius:14px; }
@media (min-width:720px){
.zeitraum-zeile{ grid-template-columns:minmax(0,1fr) auto; align-items:stretch; }
.zeitraum-submit{ width:auto; padding-inline:26px; }
}
/* Popover-Karte. Sichtbarkeit hängt NUR am hidden-Attribut; die Einblend-Animation
ist reine Zugabe (Grundzustand sichtbar → kann in Hintergrund-Tabs nie hängen bleiben). */
.kalender-popover{
position:absolute; top:calc(100% + 10px); left:0; z-index:40;
background:#fff; border:1px solid var(--farbe-linie); border-radius:18px;
box-shadow:0 12px 24px rgba(1,39,76,.10), 0 32px 64px rgba(1,39,76,.18);
padding:16px 16px 12px; width:min(660px, calc(100vw - 40px));
transform-origin:top left;
}
.kalender-popover[data-offen]{ animation:kal-auf .2s cubic-bezier(.16,1,.3,1); }
@keyframes kal-auf{ from{ opacity:0; transform:translateY(-6px) scale(.985); } }
@media (max-width:719px){
.kalender-popover{ width:calc(100vw - 40px); max-width:360px; }
}
@media (prefers-reduced-motion:reduce){
.kalender-popover[data-offen]{ animation:none; }
.zt-pfeil{ transition:none; }
}
.kal-kopf{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.kal-nav{
width:36px; height:36px; display:grid; place-items:center; flex:none;
font:inherit; background:transparent; border:0; border-radius:10px; cursor:pointer;
color:var(--farbe-primaer); transition:background .15s ease;
}
.kal-nav:hover{ background:#eef3f7; }
.kal-nav:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(2,206,230,.25); }
.kal-nav[disabled]{ color:#c2cdd8; cursor:default; background:transparent; }
.kal-titel-zone{ display:flex; flex:1; justify-content:space-around; gap:12px; }
.kal-titel{ font-weight:800; font-size:.98rem; color:var(--farbe-navy-tief); }
.kal-monate{ display:flex; gap:22px; justify-content:center; }
.kal-monat{ width:296px; max-width:100%; }
.kal-wochentage, .kal-tage{ display:grid; grid-template-columns:repeat(7,1fr); }
.kal-wochentage span{
height:30px; display:grid; place-items:center;
font-size:.72rem; font-weight:800; letter-spacing:.02em; color:var(--farbe-text-soft);
}
.kal-tage{ row-gap:3px; }
.kal-tag{
position:relative; height:40px; display:grid; place-items:center;
font:inherit; font-size:.94rem; font-weight:600; color:var(--farbe-text);
background:transparent; border:0; border-radius:11px; cursor:pointer;
transition:background .12s ease, color .12s ease;
}
.kal-tag:hover{ background:#e9f4f7; }
.kal-tag:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(2,206,230,.30); z-index:1; }
.kal-tag.leer{ visibility:hidden; pointer-events:none; }
.kal-tag[disabled]{ color:#bcc8d3; cursor:default; background:transparent; }
.kal-tag.heute::after{
content:""; position:absolute; bottom:5px; width:5px; height:5px; border-radius:50%;
background:var(--farbe-akzent);
}
.kal-tag.im-zeitraum{ background:#dcf7fb; border-radius:0; }
.kal-tag.im-zeitraum:hover{ background:#c9f1f8; }
.kal-tag.start, .kal-tag.ende{
background:var(--farbe-navy-tief); color:#fff; font-weight:800; border-radius:11px;
}
.kal-tag.start.mit-band{ border-radius:11px 0 0 11px; }
.kal-tag.ende.mit-band{ border-radius:0 11px 11px 0; }
.kal-tag.start.ende{ border-radius:11px; }
.kal-fuss{
display:flex; align-items:center; justify-content:space-between; gap:10px;
margin-top:10px; padding-top:12px; border-top:1px solid var(--farbe-linie);
}
.kal-fuss-info{ font-size:.9rem; font-weight:600; color:var(--farbe-text-soft); }
.kal-fuss-info strong{ color:var(--farbe-navy-tief); }
.kal-reset{
font:inherit; font-size:.86rem; font-weight:700; color:var(--farbe-primaer);
background:transparent; border:0; border-radius:9px; padding:7px 12px; cursor:pointer;
}
.kal-reset:hover{ background:#eef3f7; }
/* ---------- Katalog-Suchleiste ---------- */
.katalog-suche-wrap{ position:relative; max-width:560px; margin:10px 0 4px; }
.sr-nur{ position:absolute; left:-9999px; }
.suche-lupe{
position:absolute; left:18px; top:50%; transform:translateY(-50%);
color:var(--farbe-text-soft); display:grid; place-items:center; pointer-events:none;
transition:color .15s ease;
}
.katalog-suche-wrap:focus-within .suche-lupe{ color:var(--farbe-akzent); }
#katalog-suche{
width:100%; min-height:56px; padding:8px 52px 8px 52px;
font:inherit; font-size:1.05rem; color:var(--farbe-text);
background:#fff; border:1.5px solid var(--farbe-linie); border-radius:16px;
box-shadow:var(--schatten); -webkit-appearance:none; appearance:none;
transition:border-color .18s ease, box-shadow .18s ease;
}
#katalog-suche::placeholder{ color:#5e7183; }
#katalog-suche:hover{ border-color:#b9cddb; }
#katalog-suche:focus{
outline:none; border-color:var(--farbe-akzent);
box-shadow:0 0 0 4px rgba(2,206,230,.20), var(--schatten);
}
#katalog-suche::-webkit-search-cancel-button{ display:none; }
.suche-clear{
position:absolute; right:10px; top:50%; transform:translateY(-50%);
width:36px; height:36px; display:grid; place-items:center;
font:inherit; color:var(--farbe-text-soft); background:transparent;
border:0; border-radius:10px; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.suche-clear:hover{ background:#eef3f7; color:var(--farbe-navy-tief); }
.suche-clear:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(2,206,230,.25); }
/* ---------- Zeit-Wähler (Checkout: Wunschzeit Übergabe/Rückgabe) ----------
Gleiches Komponenten-Niveau wie der Range-Kalender; im Modal bewusst
INLINE aufklappend (kein absolute-Popover → nichts wird abgeschnitten). */
.zeit-waehler{ margin-bottom:10px; }
.zeit-trigger{
width:100%; display:flex; align-items:center; gap:11px; text-align:left;
min-height:52px; padding:7px 12px; font:inherit; font-size:.98rem; font-weight:600;
color:var(--farbe-text-soft); background:#fff; cursor:pointer;
border:1.5px solid var(--farbe-linie); border-radius:13px;
transition:border-color .18s ease, box-shadow .18s ease;
}
.zeit-trigger:hover{ border-color:#b9cddb; box-shadow:0 2px 8px rgba(1,39,76,.06); }
.zeit-trigger:focus-visible{ outline:none; border-color:var(--farbe-akzent); box-shadow:0 0 0 4px rgba(2,206,230,.22); }
.zeit-trigger[aria-expanded="true"]{ border-color:var(--farbe-akzent); box-shadow:0 0 0 4px rgba(2,206,230,.14); }
.zeit-trigger[aria-expanded="true"] .zt-pfeil{ transform:rotate(180deg); }
.zeit-trigger[data-gefuellt]{ color:var(--farbe-navy-tief); font-weight:700; }
.zeit-trigger .zt-icon{ width:34px; height:34px; border-radius:10px; }
.zeit-panel{
margin-top:8px; padding:12px; background:#f7fafc;
border:1px solid var(--farbe-linie); border-radius:13px;
}
.zeit-panel[data-offen]{ animation:kal-auf .18s cubic-bezier(.16,1,.3,1); }
.zeit-gruppe{ margin-bottom:10px; }
.zeit-gruppe:last-child{ margin-bottom:0; }
.zeit-gruppe-titel{
font-size:.72rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
color:var(--farbe-text-soft); margin:0 0 6px 2px;
}
.zeit-chips{ display:grid; grid-template-columns:repeat(auto-fill, minmax(74px, 1fr)); gap:7px; }
.zeit-chip{
min-height:44px; font:inherit; font-size:.95rem; font-weight:700;
color:var(--farbe-text); background:#fff; cursor:pointer;
border:1.5px solid var(--farbe-linie); border-radius:11px;
transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.zeit-chip:hover{ border-color:var(--farbe-akzent); background:#eefbfd; }
.zeit-chip:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(2,206,230,.30); }
.zeit-chip.gewaehlt{ background:var(--farbe-navy-tief); border-color:var(--farbe-navy-tief); color:#fff; }
.zeit-chip.flexibel{ grid-column:1 / -1; background:#eef3f7; border-style:dashed; font-weight:600; }
.zeit-chip.flexibel:hover{ background:#e2ebf2; border-color:#b9cddb; }
.zeit-chip.flexibel.gewaehlt{ background:var(--farbe-navy-tief); color:#fff; border-style:solid; }
@media (prefers-reduced-motion:reduce){
.zeit-panel[data-offen]{ animation:none; }
}
/* ---------- Zusatz-Karte im Checkout (Extra-Gaskartuschen zum Gasgrill) ----------
Eigenständige Upsell-Karte statt grauem Formularfeld: warmer Flammen-Ton, damit
sie sich vom Rest des Formulars abhebt, ohne wie ein Fehler-Hinweis zu wirken. */
.zusatz-karte{
margin:14px 0; padding:14px;
background:linear-gradient(180deg,#fffaf3 0%, #fff6ea 100%);
border:1.5px solid #f0d9b6; border-radius:15px;
}
.zk-kopf{ display:flex; gap:11px; align-items:flex-start; }
.zk-icon{
flex-shrink:0; width:38px; height:38px; border-radius:11px;
display:flex; align-items:center; justify-content:center;
background:#fff; color:#c2600d; border:1.5px solid #f0d9b6;
}
.zk-titel{ display:block; font-size:.98rem; }
.zk-text{ margin:2px 0 0; font-size:.88rem; color:var(--farbe-text-soft); line-height:1.45; }
.zk-text strong{ color:var(--farbe-text); }
.zk-chips{
display:grid; grid-template-columns:repeat(auto-fit, minmax(64px, 1fr));
gap:7px; margin-top:12px;
}
.zk-chip{
min-height:44px; font:inherit; font-size:.95rem; font-weight:700;
color:var(--farbe-text); background:#fff; cursor:pointer;
border:1.5px solid #f0d9b6; border-radius:11px;
transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.zk-chip:hover{ border-color:#d99b3f; background:#fff3e0; }
.zk-chip:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(217,155,63,.32); }
.zk-chip.gewaehlt{ background:#8a4c10; border-color:#8a4c10; color:#fff; }
.zk-summe{
margin:10px 0 0; font-size:.85rem; color:var(--farbe-text-soft);
}
.zk-summe[data-aktiv]{
color:#7a4409; font-weight:600;
background:#fff; border:1px dashed #e2bd85; border-radius:10px; padding:8px 11px;
}
/* ---------- Cross-Selling (z. B. Powerstation → Kühlboxen, 2026-08-06) ---------- */
/* Tipp-Zeile auf der Artikel-Karte */
.cross-tipp{
display:block; width:100%; text-align:left; margin:2px 0 8px;
font:inherit; font-size:.82rem; color:var(--farbe-akzent-hv); cursor:pointer;
background:#eefbfd; border:1px dashed #9adfe9; border-radius:10px; padding:7px 11px;
transition:background .15s ease, border-color .15s ease;
}
.cross-tipp:hover{ background:#ddf6fa; border-color:var(--farbe-akzent); }
.cross-tipp:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(2,206,230,.25); }
.cross-tipp strong{ color:var(--farbe-navy-tief); }
/* „Passt dazu"-Box im Warenkorb */
.cross-sell-box{
display:flex; align-items:center; gap:12px; margin:12px 0;
background:#eefbfd; border:1.5px solid #9adfe9; border-radius:13px; padding:10px 12px;
}
.cross-sell-box .pos-bild{
flex:none; width:52px; height:52px; border-radius:10px; overflow:hidden;
background:#fff; display:grid; place-items:center;
}
.cross-sell-box .pos-bild img{ width:100%; height:100%; object-fit:contain; }
.cross-sell-box .cross-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cross-sell-box .cross-info strong{ font-size:.92rem; color:var(--farbe-navy-tief); }
.cross-sell-box .cross-info span{ font-size:.82rem; color:var(--farbe-text-soft); }
.cross-sell-box .btn{ flex:none; }
@media (max-width:480px){
.cross-sell-box{ flex-wrap:wrap; }
.cross-sell-box .btn{ width:100%; }
}
/* ---------- Hero-Störer „Jetzt clever vorab mieten" (Fabi 2026-08-06) ----------
Das Vorab-Argument laut im Titelbild, ohne marktschreierisch zu wirken.
Mobil läuft die Karte im Fluss unter den CTAs mit, ab 960px sitzt sie absolut
in der rechten Hero-Spalte (die .hero .container dort ohnehin freihält).
Glasfläche + Türkis-Lichtkante aus der Logo-Farbwelt, leicht gekippt wie ein
aufgeklebter Störer — Hover richtet sie auf. Klick springt zur Zeitraum-Suche. */
.hero-stoerer{
--kipp:-2.2deg;
position:relative; z-index:3; display:block; isolation:isolate;
max-width:420px; margin:20px 0 2px; padding:15px 18px 14px;
color:#fff; text-decoration:none; border-radius:18px;
background:
linear-gradient(152deg, rgba(255,255,255,.20), rgba(255,255,255,.05) 62%),
rgba(1,27,52,.46);
-webkit-backdrop-filter:blur(12px) saturate(150%);
backdrop-filter:blur(12px) saturate(150%);
border:1px solid rgba(255,255,255,.26);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.34),
0 18px 38px rgba(0,12,28,.42),
0 0 58px -16px rgba(2,206,230,.5);
transform:rotate(var(--kipp));
transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease;
/* Einmaliger Auftritt kurz nach dem Laden — erzeugt Aufmerksamkeit, ohne zu zappeln.
fill-mode BACKWARDS (nicht both/forwards!), sonst überschriebe die Animation
dauerhaft den Hover-Transform. Die globale reduced-motion-Regel schaltet sie ab. */
animation:stoerer-auftritt .7s cubic-bezier(.2,.9,.3,1) .35s backwards;
}
@keyframes stoerer-auftritt{
from{ opacity:0; transform:rotate(-8deg) translateY(-14px) scale(.93); }
to{ opacity:1; transform:rotate(var(--kipp)) translateY(0) scale(1); }
}
/* Türkis-Lichtkante: Verlaufs-Rand über Masken-Trick (kein zweiter Wrapper nötig) */
.hero-stoerer::before{
content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
background:linear-gradient(145deg, var(--farbe-tuerkis), rgba(2,206,230,.05) 42%, rgba(255,255,255,.55));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
opacity:.9; pointer-events:none;
}
.stoerer-kicker{
/* flex-start: bricht die Zeile um, bleibt der Punkt trotzdem an der ersten Zeile */
display:flex; align-items:flex-start; gap:9px; line-height:1.35;
font-size:.68rem; font-weight:800; letter-spacing:.045em; text-transform:uppercase;
color:#8fecf9;
}
/* Pulsierender Punkt = „hier ist gerade Bewegung drin" */
.stoerer-puls{
flex:none; width:9px; height:9px; margin-top:4px; border-radius:50%;
background:var(--farbe-tuerkis); box-shadow:0 0 0 0 rgba(2,206,230,.6);
animation:stoerer-puls 2.4s ease-out infinite;
}
@keyframes stoerer-puls{
0%{ box-shadow:0 0 0 0 rgba(2,206,230,.6); }
70%{ box-shadow:0 0 0 11px rgba(2,206,230,0); }
100%{ box-shadow:0 0 0 0 rgba(2,206,230,0); }
}
.stoerer-titel{
display:block; margin:9px 0 5px;
font-family:var(--font-head); font-size:clamp(1.22rem,1.9vw,1.46rem);
font-weight:800; line-height:1.16; letter-spacing:-.015em;
}
/* „vorab" mit Textmarker-Strich statt Farbwechsel — bleibt auch auf dem Foto lesbar.
Strich im Marken-Grün (ABHOLEN-Akzent), auf dem dunklen Störer leicht aufgehellt —
das satte #729153 säuft sonst im Nachtfoto ab. Ausklang nur bis .78, sonst
verschwindet das Ende (Grün ist dunkler als das frühere Türkis). */
.stoerer-titel mark{ background:none; color:#fff; position:relative; white-space:nowrap; }
.stoerer-titel mark::before{
content:""; position:absolute; z-index:-1; left:-.16em; right:-.16em; bottom:-.06em; height:.36em;
background:linear-gradient(90deg, rgba(140,176,99,1), rgba(114,145,83,.78));
border-radius:.3em; transform:rotate(-.8deg);
}
.stoerer-text{ display:block; font-size:.9rem; line-height:1.46; color:rgba(255,255,255,.9); }
/* CTA als Pille: sieht auf den ersten Blick klickbar aus (die Karte selbst ist der Link) */
.stoerer-cta{
display:inline-flex; align-items:center; gap:7px; margin-top:13px;
padding:7px 13px; border-radius:999px;
background:rgba(2,206,230,.16); border:1px solid rgba(2,206,230,.45);
font-size:.85rem; font-weight:800; color:#fff;
transition:background .25s ease, border-color .25s ease;
}
.hero-stoerer:hover .stoerer-cta,
.hero-stoerer:focus-visible .stoerer-cta{
background:rgba(2,206,230,.3); border-color:rgba(2,206,230,.75);
}
.stoerer-cta svg{ transition:transform .28s cubic-bezier(.2,.8,.3,1); }
.hero-stoerer:hover,
.hero-stoerer:focus-visible{
transform:rotate(0deg) translateY(-4px);
border-color:rgba(2,206,230,.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.4),
0 26px 52px rgba(0,12,28,.5),
0 0 74px -12px rgba(2,206,230,.7);
}
.hero-stoerer:focus-visible{ outline:none; }
.hero-stoerer:hover .stoerer-cta svg,
.hero-stoerer:focus-visible .stoerer-cta svg{ transform:translateX(4px); }
.hero-stoerer:active{ transform:rotate(0deg) translateY(-1px); }
/* Ziel des Störer-Sprungs. Seit der Banner `sticky` ist (belegt eigenen Platz),
braucht es keinen Zuschlag für ihn mehr — der hätte im Live-Modus, wo es gar
keinen Banner gibt, 34 px unnötige Luft gelassen. */
#suche-panel{ scroll-margin-top:14px; }
@media (min-width: 960px){
/* Absolut gesetzt → der Hero muss die Höhe selbst halten (er hat overflow:hidden) */
.hero{ min-height:530px; }
.hero-stoerer{
position:absolute; top:0; right:0; width:348px; max-width:none; margin:0;
}
}
/* =========================================================================
HERO: Desktop-Verlauf + Depot-Männchen (14.08.2026)
========================================================================= */
@media (min-width:960px){
/* Desktop: Text steht links, das Foto darf rechts frei atmen —
der Verlauf läuft deshalb seitlich statt von unten. */
.hero::before{
background:
linear-gradient(100deg,
rgba(1,25,48,.90) 0%, rgba(1,25,48,.74) 34%, rgba(1,25,48,.34) 58%,
rgba(1,25,48,.10) 76%, rgba(1,25,48,0) 92%),
linear-gradient(180deg, rgba(1,25,48,.28) 0%, rgba(1,25,48,0) 40%);
}
}
@media (min-width:1400px){
.hero{ background-position:center 52%; }
}
/* Das Depot-Männchen im Titelbild — Wunsch Fabi nach dem Marken-Board.
Es sitzt auf seiner Kiste, und darauf stehen bereits die richtigen Symbole:
SUP, Zelt, Kühlbox. Der E-Scooter aus dem Board-Entwurf fehlt bewusst —
den vermieten wir nicht (Regel 07.08.). Auf der Cap trägt es seit heute das
FD-Monogramm statt des Haus-Symbols.
Handy: ausgeblendet — dort würde es neben dem Verleih-Set gedrängt wirken,
und es steht ohnehin direkt darunter im Dreiklang-Band. */
/* ---------------------------------------------------------------------------
Titelbild-Motiv: Figur + Artikel im gleichen Plüsch-Stil (14.08.2026)
---------------------------------------------------------------------------
Vorher standen im Hero eine Plüschfigur UND freigestellte Produktfotos
nebeneinander — zwei Bildwelten in einem Bild. Jetzt ein Motiv, in dem SUP,
Kühlbox und Zelt genauso weich und verspielt aussehen wie die Figur selbst.
Ersetzt .hero-scooter und .hero-maskottchen. */
.hero-szene{
position:absolute; right:2%; bottom:30px; z-index:1;
height:180px; width:auto;
filter:drop-shadow(0 14px 20px rgba(0,18,38,.45));
}
@media (min-width:640px){ .hero-szene{ height:215px; bottom:36px; } }
@media (min-width:960px){
/* Höhe begrenzt, damit das aufrechte SUP-Board nicht in den Störer ragt:
Der Sichtprüfer meldete sonst 45 px verdeckten Text auf „Freien Zeitraum
sichern". Die Szene endet jetzt unterhalb der Störer-Unterkante. */
.hero-szene{ right:3%; height:250px; bottom:46px; }
}
@media (min-width:1280px){ .hero-szene{ height:280px; } }
/* =========================================================================
HANDY-ANSICHT — als eigene Ansicht gedacht, nicht als schmaler Desktop
=========================================================================
Zweiter Anlauf (14.08.2026). Der erste war eine Listenansicht mit kleinem
Bild links; Fabis Urteil: „wirkt zu gewollt". Zu Recht — auf 375 px wird aus
Bild + Titel + Link + Preis + Knopf in einer Zeile ein Gedränge, und ein
118-px-Vorschaubild verkauft nichts.
Wie Shop-Apps es lösen: großzügige Produktkacheln im ZWEIERRASTER. Das Bild
trägt die Kachel, darunter nur Name und Preis. Alles Weitere kommt beim
Antippen. Zwei Kacheln nebeneinander zeigen genauso viele Artikel wie eine
gedrängte Liste, wirken aber ruhig statt vollgestopft.
Leitgedanken:
· Ein Gedanke pro Bildschirm, viel Weißraum, wenig Text.
· Das Bild ist die Hauptsache — Kachelbild quadratisch und randlos.
· Bedienbares ist groß und immer erreichbar (Warenkorbleiste unten).
· Details, Galerie, Cross-Selling: erst nach dem Antippen.
⚠️ Dieser Block steht am DATEIENDE. Beim ersten Anlauf stand er weiter oben,
und alles, wozu es unten eine Basisregel gibt, wurde überschrieben — der
Cross-Tipp blieb sichtbar, der Detail-Link lag über dem Titel. Bei gleicher
Spezifität gewinnt die spätere Regel.
========================================================================= */
@media (max-width: 639px){
/* ---------- Kopfbereich: ruhig und kurz ---------- */
.hero{ padding:22px 0 170px; }
.hero h1{ font-size:1.46rem; line-height:1.2; letter-spacing:-.01em; }
/* Zwei Zeilen genügen. Wer mehr wissen will, findet „So funktioniert's“
direkt darunter — der Prospekt gehört nicht vor die Ware. */
.hero-logik{
font-size:.9rem; line-height:1.45; margin-top:6px;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Nur der wichtigste Vertrauensanker bleibt sichtbar; die anderen beiden
stehen ohnehin im Kontaktbereich und in den Schritten. */
.hero-badges{ gap:6px; margin:12px 0 14px; }
.hero-badges .badge:nth-child(n+2){ display:none; }
.hero-ctas{ gap:4px; }
.hero-ctas .btn-primaer{ width:100%; min-height:50px; font-size:1rem; }
.hero-ctas .btn-ghost{
width:100%; background:none; border:none; color:#bfe9f5;
text-decoration:underline; text-underline-offset:4px; font-size:.86rem; padding:6px;
}
.hero-stoerer{ margin-top:12px; padding:11px 13px; }
.stoerer-kicker{ font-size:.62rem; }
.stoerer-titel{ font-size:1.02rem; margin:6px 0 3px; }
.stoerer-text{ font-size:.82rem; line-height:1.4; }
.stoerer-cta{ font-size:.8rem; padding:6px 11px; margin-top:9px; }
/* ---------- Suche: ein klares Feld ---------- */
.suche-wrap{ margin-top:-38px; }
.suche-panel{ padding:12px; }
.suche-titel{ font-size:.92rem; margin-bottom:8px; }
.zeitraum-trigger{ min-height:50px; font-size:.95rem; }
.zeitraum-submit{ min-height:48px; font-size:.95rem; }
/* ---------- Katalog ---------- */
.katalog{ padding:22px 0 6px; }
.katalog-kopf h2{ font-size:1.28rem; }
#katalog-suche{ min-height:46px; font-size:.95rem; padding-left:46px; }
.suche-lupe{ left:15px; }
.kategorie-leiste{
position:sticky; top:0; z-index:30;
background:var(--farbe-bg); padding:9px 0 7px; margin-bottom:2px;
box-shadow:0 8px 10px -9px rgba(1,39,76,.3);
}
.kat-chip{ font-size:.8rem; padding:6px 13px; }
/* ---------- Produktkacheln im Zweierraster ---------- */
.karten-raster{
grid-template-columns:repeat(2, minmax(0,1fr));
gap:12px; padding:12px 0 26px;
}
.artikel-karte{
padding:0 0 11px; gap:0; border-radius:14px; overflow:hidden;
}
/* Das Bild trägt die Kachel: quadratisch, randlos, ohne Innenabstand. */
/* 18.08.2026 — DIE Ursache von „Bilder sind am Handy nicht komplett zu sehen":
Der Rahmen war hier quadratisch, die Motive sind 4:3. Mit object-fit:cover hat
der Browser links und rechts abgeschnitten — beim SUP-Motiv fiel damit genau das
Info-Panel mit dem FD-Balken heraus. Rahmen und Bild haben jetzt dasselbe
Verhältnis: nichts wird beschnitten, und es bleibt kein Rand übrig. */
.karte-bild{
margin:0 0 9px; border-radius:0; aspect-ratio:4/3; background:#fff;
}
.karte-bild img{ object-fit:cover; }
.karte-kopf{ padding:0 11px; }
.karte-kat{ font-size:.6rem; letter-spacing:.05em; margin-bottom:1px; }
.karte-titel{
font-size:.86rem; line-height:1.28; font-weight:700;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.karte-preis-zeile{
padding:7px 11px 0; margin:0; border:none;
flex-direction:column; align-items:flex-start; gap:0;
}
.karte-preis{ font-size:1.1rem; line-height:1.2; }
.karte-preis-einheit{ font-size:.7rem; }
.karte-preis-mehr{ display:none; }
.karte-fuss{ padding:9px 11px 0; }
.karte-fuss .btn{
width:100%; padding:9px 8px; font-size:.8rem; min-height:38px;
}
.im-korb{ width:100%; justify-content:center; font-size:.78rem; padding:8px; }
/* Verfügbarkeit auf das Wesentliche: In einer 182 px breiten Kachel brauchte
der volle Text (Zeitraum + Rechenweg + Ersparnis + Kaution) 167 px Höhe und
sprengte die Kachel. Sichtbar bleibt der Gesamtpreis — das ist die Zahl,
nach der verglichen wird. Zeitraum steht oben in der Suche, Kaution und
Ersparnis im Detailfenster und im Checkout. */
.karte-verfuegbar{
margin:0 11px; padding:6px 8px; font-size:.72rem; border-radius:7px;
}
.karte-verfuegbar .gesamt{ font-size:.84rem; display:block; }
.vf-zeitraum, .vf-spar, .vf-kaution, .vf-label{ display:none; }
.karte-vergeben-hinweis{ margin:0 11px; padding:6px 8px; font-size:.72rem; }
.karte-vergeben-hinweis span{ font-size:.7rem; }
/* Kommt beim Antippen — in einer 170-px-Kachel ist dafür kein Platz. */
.karte-thumbs, .cross-tipp, .karte-text, .karte-details-link,
.karte-upsell{ display:none; }
/* ---------- Warenkorbleiste: immer erreichbar ---------- */
.korb-leiste{ padding:11px 12px calc(11px + env(safe-area-inset-bottom)) 16px; }
.korb-leiste-info{ font-size:.88rem; }
.fab-assistent{ width:50px; height:50px; font-size:1.35rem; bottom:14px; right:14px; }
body.korb-aktiv .fab-assistent{ bottom:82px; }
/* ---------- Restliche Abschnitte ---------- */
.sektion{ padding:24px 0; }
.sektion h2{ font-size:1.28rem; }
.dreiklang-band{ padding:15px 15px 0; }
.dreiklang-maskottchen{ height:92px; }
.dk-schritt svg{ width:44px; height:44px; }
.dk-wort{ font-size:.68rem; }
.schritt{ padding:14px; }
.schritt-bild{ margin:-14px -14px 10px; }
.schritt h3{ font-size:.96rem; }
.schritt p{ font-size:.85rem; }
.szene figcaption{ font-size:.78rem; }
.kontakt-weg{ padding:13px 15px; }
/* „Vor Ort im Einsatz" auf dem Handy komplett raus (Fabi 14.08.): Die drei
Motive wiederholen, was in den Produktkacheln ohnehin steht, und kosten
eine halbe Bildschirmlänge. Auf dem Desktop bleibt der Abschnitt. */
#vor-ort{ display:none; }
/* Die ganze Kachel ist antippbar und soll das auch zeigen */
.artikel-karte{ cursor:pointer; -webkit-tap-highlight-color:rgba(2,206,230,.18); }
.artikel-karte:active{ transform:scale(.985); }
/* Galerie im Detailfenster: 4:3 wie die Bilder selbst. Quadratisch ließ bei
object-fit:contain oben und unten Luft und machte das Motiv unnötig klein. */
.pd-bild{ aspect-ratio:4/3; }
.pd-thumb{ width:56px; height:44px; }
.kontakt-weg__wert{ font-size:.98rem; }
.modal{ padding:16px 14px 22px; }
.dauermiete-hinweis{ padding:13px 15px; font-size:.86rem; }
}
/* ---------------------------------------------------------------------------
Handy: Titelbild-Motiv aus dem Weg des Störers
---------------------------------------------------------------------------
⚠️ Diese Regeln stehen bewusst am DATEIENDE. Im oberen Handy-Block hatten
sie keine Wirkung, weil die Basisregeln für .hero-szene und .hero-stoerer
weiter unten in der Datei stehen und bei gleicher Spezifität gewinnen.
Der Fehler dahinter: Auf Handybreite rutscht der Störer weit nach unten in
den Hero, und das aufrecht stehende SUP-Board ragte 49 px in den Knopf
„Freien Zeitraum sichern" — der Tap landete auf dem Bild statt auf dem Link.
Zwei Maßnahmen: mehr Bodenabstand im Hero, und das Motiv liegt unter dem
Störer, damit Bedienbares immer gewinnt. */
@media (max-width: 639px){
.hero{ padding-bottom:186px; }
.hero-szene{ height:118px; bottom:10px; right:0; z-index:0; }
.hero-stoerer{ z-index:5; }
}
/* ---------------------------------------------------------------------------
[hidden] muss IMMER verstecken (Fund 14.08.2026)
---------------------------------------------------------------------------
Der Browser setzt für [hidden] nur `display:none` als Standardregel — jede
eigene display-Angabe schlägt sie, weil Klassenselektoren stärker sind.
Genau das war passiert:
· #suche-leer ("Noch nicht im Sortiment — aber wir wachsen!") stand durch
.mit-maskottchen{display:flex} DAUERHAFT über dem Katalog, obwohl das
JavaScript es korrekt auf hidden gesetzt hatte. Es sollte nur erscheinen,
wenn eine Suche nichts findet.
· #katalog-suche-clear (Lösch-Kreuz) schwebte immer im leeren Suchfeld.
Beide Male war das JavaScript richtig und das CSS hat es ausgehebelt.
Diese Regel gehört ans Dateiende, damit sie wirklich zuletzt greift. */
[hidden]{ display:none !important; }
/* ---------------------------------------------------------------------------
Bildergalerie im Detailfenster (14.08.2026)
---------------------------------------------------------------------------
Bisher zeigte das Fenster nur Text — die Motive waren nur als briefmarken-
große Vorschau an der Karte zu sehen. Auf dem Handy gab es sie gar nicht,
weil die Vorschaureihe dort ausgeblendet ist. Jetzt steht die Galerie oben
im Fenster: großes Bild, darunter die antippbare Reihe. */
.pd-galerie{ margin:0 0 14px; }
.pd-bild{
background:#fff; border:1px solid var(--farbe-linie); border-radius:12px;
overflow:hidden; aspect-ratio:4/3;
}
/* Rahmen und Motive sind beide 4:3 → cover füllt vollständig, ohne zu beschneiden. */
.pd-bild img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumbs{ display:flex; gap:8px; margin-top:8px; overflow-x:auto; scrollbar-width:none; }
.pd-thumbs::-webkit-scrollbar{ display:none; }
.pd-thumb{
flex:none; width:62px; height:48px; padding:0; overflow:hidden; cursor:pointer;
border:2px solid var(--farbe-linie); border-radius:9px; background:#fff;
}
.pd-thumb.aktiv{ border-color:var(--farbe-akzent); }
.pd-thumb img{ width:100%; height:100%; object-fit:cover; }
/* ---------------------------------------------------------------------------
Tippflächen in der Kopfnavigation (14.08.2026)
---------------------------------------------------------------------------
Die Navigationslinks sind 31 px hoch — Google erwartet auf dem Handy rund
48 px, sonst gilt die Seite als schwer bedienbar. Statt die Links optisch
größer zu machen (das hätte den Kopfbereich von 106 auf 120 px aufgeblasen,
direkt nachdem die Handyansicht abgenommen war), wird nur die unsichtbare
Trefferfläche gedehnt: gemessen 45 px, Aussehen und Layout unverändert.
Hinweis für die Sichtprüfung: Der Prüfer misst getBoundingClientRect() des
Elements und sieht diese erweiterte Fläche NICHT — er meldet die Links
weiterhin als „tippziel-klein". Das ist ein bekannter Fehlalarm; die echte
Fläche lässt sich nur mit elementFromPoint nachmessen. */
.header-nav a{ position:relative; }
.header-nav a::after{
content:""; position:absolute; left:0; right:0;
top:50%; transform:translateY(-50%); height:44px;
}
/* Der Assistenten-Knopf war mit 33 px ebenfalls zu flach. */
#btn-hero-assistent{ min-height:44px; }
/* ---------------------------------------------------------------------------
Anschrift + Copyright im Fuß (14.08.2026)
---------------------------------------------------------------------------
Beides ist neu hinzugekommen, weil im ausgelieferten Quelltext weder Adresse
noch Jahreszahl standen — beides erst per JavaScript. Google wertet aber den
Quelltext aus, und an Adresse + Telefon erkennt es einen örtlichen Betrieb.
Optisch bewusst zurückhaltend: Pflichtangabe, kein Blickfang. */
.footer-anschrift{
margin-top:12px; font-size:.83rem; line-height:1.55; color:#8ba2bb;
}
.footer-copyright{
border-top:1px solid rgba(255,255,255,.15);
margin-top:22px; padding-top:14px;
font-size:.78rem; color:#8ba2bb;
}
/* --- Statisches Sortiment im Katalog (15.08.2026) ---------------------------
Grundlage des Katalogs, bevor JavaScript ihn ersetzt (siehe Kommentar in
index.html). Zwei Zwecke: Suchmaschinen lesen die Artikel direkt aus dem
HTML, und wer mit langsamer Verbindung kommt, sieht das Sortiment statt
einer leeren Fläche. Bewusst schlicht — sichtbar ist es nur für Sekunden. */
.sortiment-statisch{
grid-column:1/-1;
background:var(--farbe-karte);
border:1px solid var(--farbe-linie);
border-radius:14px;
padding:22px 24px;
}
.sortiment-statisch h3{ margin:0 0 12px; color:var(--farbe-navy-tief); }
.sortiment-statisch ul{ margin:0; padding-left:20px; }
.sortiment-statisch li{ margin-bottom:10px; line-height:1.55; }
.sortiment-statisch li strong{ color:var(--farbe-primaer); }
.sortiment-statisch > p{
margin:16px 0 0; padding-top:14px;
border-top:1px solid var(--farbe-linie);
color:var(--farbe-text-soft); font-size:.92rem;
}
/* ---------- Lauter Verlängerungs-Hinweis + Kontaktdaten-Kontrolle (18.08.2026) ----------
Der Fall „du zahlst die Woche ohnehin" ging bisher in der Reihe der kleinen
Hinweise unter. Er ist aber der einzige, bei dem der Kunde geschenkte Tage
liegen lässt — deshalb eigene, auffällige Gestalt. */
.karte-upsell-laut {
display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%;
background: linear-gradient(135deg, #fff8e6, #ffeec4);
border: 2px solid #f0b429;
border-radius: 12px;
padding: 11px 13px;
color: #4a3208;
box-shadow: 0 2px 0 rgba(240,180,41,.25);
}
.karte-upsell-laut:hover { background: linear-gradient(135deg, #fff4d6, #ffe7ae); }
.karte-upsell-laut .upsell-blitz { font-size: 20px; line-height: 1.2; flex: 0 0 auto; }
.karte-upsell-laut strong { display: block; font-size: 1rem; color: #7a4f05; }
.karte-upsell-laut .upsell-zeile { display: block; font-size: .86rem; margin-top: 2px; }
.karte-upsell-laut .upsell-cta {
display: inline-block; margin-top: 6px; font-weight: 700; font-size: .86rem;
color: #8a5a00; text-decoration: underline;
}
/* Kontaktdaten-Kontrolle vor dem Absenden */
.daten-check {
border: 2px solid var(--tuerkis, #16a3b8);
background: #f2fbfd; border-radius: 12px;
padding: 14px 16px; margin: 12px 0;
}
.daten-check-titel { font-weight: 800; margin: 0 0 2px; font-size: 1.02rem; }
.daten-check-text { margin: 0 0 10px; font-size: .87rem; opacity: .8; }
.daten-check-liste { display: grid; grid-template-columns: 74px 1fr; gap: 6px 12px; margin: 0 0 12px; }
.daten-check-liste dt { opacity: .7; font-size: .87rem; }
.daten-check-liste dd { margin: 0; font-weight: 700; word-break: break-word; }
.daten-check-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.daten-check-knoepfe .btn { flex: 1 1 auto; }
/* Am Handy stehen die Karten zu zweit nebeneinander — der laute Hinweis darf die
Karte dort nicht erschlagen. Gleiche Aussage, kleinere Bühne. */
@media (max-width: 640px) {
.karte-upsell-laut { padding: 8px 9px; gap: 7px; border-radius: 10px; }
.karte-upsell-laut .upsell-blitz { font-size: 16px; }
.karte-upsell-laut strong { font-size: .88rem; line-height: 1.25; }
.karte-upsell-laut .upsell-zeile { font-size: .78rem; }
.karte-upsell-laut .upsell-cta { font-size: .78rem; margin-top: 4px; }
}
/* Links in Ausfall-Meldungen (Telefonnummer, E-Mail): erben die Warnfarbe, bleiben
aber klar als Link erkennbar. Ohne das war die Nummer im roten Text unsichtbar. */
.suche-status a,
.feld-meldung a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.suche-status a:hover,
.feld-meldung a:hover{ text-decoration-thickness:2px; }
/* ===========================================================================
Sprunglink "Zum Inhalt" (WCAG 2.4.1)
===========================================================================
Wer mit der Tastatur bedient, musste sich bisher durch den kompletten
Kopfbereich tabben, bevor der erste Artikel dran war. Der Link ist das
erste fokussierbare Element der Seite und wird nur sichtbar, wenn er den
Fokus hat - fuer Maus- und Touch-Bedienung aendert sich nichts.
Bewusst nicht display:none: was ausgeblendet ist, bekommt keinen Fokus.
=========================================================================== */
.sprung-link {
position: absolute;
left: 1rem;
top: -4rem; /* ausserhalb des Sichtfelds geparkt */
z-index: 1000;
padding: .7rem 1.1rem;
border-radius: 8px;
background: var(--farbe-navy-tief);
color: #fff;
font-weight: 600;
text-decoration: none;
box-shadow: 0 6px 20px rgba(1, 39, 76, .35);
transition: top .15s ease-out;
}
.sprung-link:focus {
top: 1rem; /* faehrt beim Fokus ins Bild */
outline: 3px solid var(--farbe-tuerkis);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.sprung-link { transition: none; }
}