/* ============================================================================
   BIKE VERLEIH WALTER – style.css
   ============================================================================
   INHALTSVERZEICHNIS (mit der Suchfunktion deines Editors nach den
   Stichworten unten suchen, z.B. "HERO" oder "WARENKORB"):

   - Grundlagen: Farben, Schriften, Grundformat        -> ganz oben
   - Kopf-/Fußzeile (Header/Footer)                    -> "KOPF- & FUSSZEILE" / "KOPFZEILE" / "FUSSZEILE"
   - Hero-Bereich (großes Bild ganz oben)               -> "HERO"
   - Sektionsüberschriften (Linien-Stil)                -> "EINHEITLICHE SEKTIONS-BESCHRIFTUNG"
   - Finde dein Bike (Kacheln)                          -> "FINDE DEIN BIKE"
   - Visuelle Inhalte (GreenTrails/TrekkingTrails/...)  -> "VISUELLE INHALTE"
   - Route / Anfahrt + Karte                            -> "ROUTE"
   - Trinkgeld & Unterstützung                          -> "TRINKGELD"
   - Rechtliche Links                                   -> "RECHTLICHE LINKS"
   - Warenkorb                                          -> "WARENKORB"
   - Produktkarten (Buchen & Reservieren)                -> "PRODUKTKARTEN"
   - Kalender                                           -> "KALENDER"
   - Vollbild-Galerie (Lightbox)                        -> "VOLLBILD-GALERIE"

   Aufbau der Datei: zuerst die Basis-Regeln (gelten immer), danach die
   @media-Blöcke für kleinere Bildschirme/Querformat, danach mehrere
   durchnummerierte Korrektur-Blöcke (1, 2, 3, ...) – das sind die Änderungen,
   die im Laufe unserer Gespräche dazugekommen sind. Jeder Block ist wie
   oben beschriftet.

   Diese Datei wurde am 23.08.2026 aufgeräumt: doppelte/mehrfach vorkommende
   Regeln wurden zusammengeführt (nur exakte Wiederholungen derselben
   Regel – das Ergebnis wurde geprüft und verhält sich exakt wie vorher).
   ============================================================================ */

/* Google Fonts werden jetzt in includes/header.php per <link> geladen (schneller als @import). */

:root{
  --green:#0b4d3b;
  --deep:#062d21;
  --cream:#f3f0e4;
  --gold:#d8ad3d;
  --ink:#10231d;
  --line:#d4ddd5;
  --white:#fff;
}

*{ box-sizing:border-box; }

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background-image:radial-gradient(#0b4d3b 0.7px,transparent .20px);
  background-size:30px 30px;
}

a{ color:inherit; }

.wrap{
  width:min(1160px,92%);
  margin:auto;
}

/* Logo ungefähr auf Größe des Warenkorb-Icons */

/* Zwei Textzeilen beibehalten, nur Abstand reduzieren */

.site-header .wrap nav{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.site-header .brand{
  gap:7px;
  align-items:center;
}

/* Bläulicher Verlauf über die gesamte Kopfzeile */

/*.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.90);backdrop-filter:blur(16px);border-bottom:1px solid rgba(11,77,59,.12)}*/

.nav{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
  color:var(--green);
}

.brand-icon{ font-size:30px; }

.brand b{
  display:block;
  letter-spacing:1.5px;
  font-family:"Space Grotesk",sans-serif;
}

.brand small{
  font-size:10px;
  letter-spacing:1.4px;
}

*/
.cart-link{
  background:var(--green);
  color:#fff;
  padding:11px 15px;
  border-radius:15px;
  text-decoration:none;
  font-weight:900;
  box-shadow:0 8px 18px rgba(11,77,59,.25);
}

.hero-new:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:180px;
  background:linear-gradient(transparent,rgba(7,52,39,.08));
  pointer-events:none;
}

.graffiti{
  font-family:"Permanent Marker","Brush Script MT","Comic Sans MS",cursive;
  font-size:clamp(48px,8.2vw,88px);
  font-weight:400;
  line-height:.92;
  color:#124b38;
  text-shadow:3px 3px 0 rgba(216,173,61,.78),
    0 7px 14px rgba(0,0,0,.18);
  letter-spacing:-2px;
  transform:rotate(-3deg) skewX(-3deg);
  margin:2px 0 7px;
  filter:drop-shadow(0 3px 1px rgba(0,0,0,.12));
  display:inline-block;
  padding:0 8px;
}

.hero-copy p{
  font-size:18px;
  max-width:600px;
  margin:0;
}

.hero-bike-stage{
  height:360px;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0;
}

.hero-bike-stage img{
  width:min(92%,650px);
  height:260px;
  object-fit:contain;
  filter:drop-shadow(0 24px 18px rgba(0,0,0,.28));
}

.hero-buttons{
  display:flex;
  flex-direction:column;
  gap:22px;
  align-items:stretch;
  max-width:510px;
  margin:26px 0 0;
  margin-top:3px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--green);
  color:#fff;
  text-decoration:none;
  border:0;
  padding:16px 25px;
  border-radius:999px;
  font-weight:900;
  font-size:16px;
  cursor:pointer;
  box-shadow:0 8px 0 rgba(6,45,33,.18),0 14px 25px rgba(11,77,59,.18);
  transition:transform .16s,box-shadow .16s;
}

.btn:hover{ transform:translateY(-3px); }

.btn:active{
  transform:translateY(4px);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.18),0 3px 0 rgba(6,45,33,.18),0 8px 15px rgba(7,52,39,.18);
}

.hero-btn{
  width:min(100%,470px);
  justify-content:space-between;
  padding-left:24px;
  padding-right:24px;
  min-height:58px;
}

.hero-btn.secondary{
  background:#f0c955;
  color:#173a2e;
}

.section{ padding:72px 0; }

.alt-green{ background:rgba(232,239,230,.70); }

.center-head,.center-section{ text-align:center; }

.section h2{
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(30px,5vw,48px);
  color:var(--deep);
}

.eyebrow{
  letter-spacing:3px;
  font-size:13px;
  font-weight:900;
  color:var(--gold);
}

.feature-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:0 0 42px;
  position:relative;
  z-index:4;
  margin-top:-46px;
}

.app-feature{
  min-height:205px;
  background:linear-gradient(145deg,rgba(255,255,252,.98),rgba(226,235,221,.94));
  border:1px solid rgba(255,255,255,.90);
  border-radius:30px;
  padding:28px 18px 20px;
  text-decoration:none;
  text-align:center;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.95),
    inset 0 -7px 12px rgba(7,52,39,.07),
    0 8px 0 rgba(7,52,39,.10),
    0 20px 35px rgba(7,52,39,.18);
  transition:transform .18s,box-shadow .18s;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
}

.app-feature:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.95),
    inset 0 -7px 12px rgba(7,52,39,.06),
    0 12px 0 rgba(7,52,39,.09),
    0 27px 40px rgba(7,52,39,.22);
}

.app-feature:active{ transform:translateY(2px); }

.app-feature span{
  display:block;
  font-size:45px;
  line-height:1;
  margin-bottom:12px;
  color:var(--green);
  font-weight:900;
}

.app-feature b,.app-feature small{ display:block; }

.app-feature b{
  font-size:17px;
  letter-spacing:.5px;
}

.app-feature small{
  margin-top:7px;
  color:#5b6d63;
}

.tiles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.tile{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  border:1px solid rgba(11,77,59,.13);
  border-radius:25px;
  overflow:hidden;
  background:rgba(255,255,250,.94);
  box-shadow:inset 0 1px rgba(255,255,255,.9),
    0 7px 0 rgba(7,52,39,.10),
    0 16px 28px rgba(7,52,39,.18);
  transition:transform .18s;
}

.tile:hover{
  transform:translateY(-7px) scale(1.01);
  box-shadow:inset 0 1px rgba(255,255,255,.9),0 10px 0 rgba(7,52,39,.09),0 23px 35px rgba(7,52,39,.22);
}

.tile-image{
  height:auto!important;
  background:transparent;
  overflow:hidden;
  aspect-ratio:auto!important;
}

.tile-image img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  background:transparent;
}

.tile>div:last-child{
  padding:15px;
  text-align:center;
}

.tile b,.tile small{ display:block; }

.tile b{ font-size:18px; }

.tile small{
  margin-top:5px;
  color:#68746d;
}

.route-section{ padding-top:78px; }

.route-btn{ margin-top:28px; }

.map-gap{ margin-top:40px; }

.map-card{
  height:350px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(11,77,59,.18);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.65),0 8px 0 rgba(7,52,39,.08),0 18px 30px rgba(7,52,39,.16);
}

.map-card iframe{
  width:100%;
  height:100%;
  border:0;
}

.legal-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 22px;
  padding:28px 20px 42px;
  background:rgba(248,246,237,.78);
  margin:0 auto;
  max-width:1160px;
  border-radius:18px 18px 0 0;
}

.legal-links a{
  font-weight:800;
  text-decoration:none;
  border-bottom:1px solid currentColor;
}

.footer-icon:hover{
  background:#fff;
  color:var(--green);
  transform:translateY(-4px);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.28),0 9px 18px rgba(0,0,0,.25);
}

.icon-phone{
  transform:rotate(-25deg);
  font-size:25px;
}

.icon-mail{
  font-weight:900;
  font-size:22px;
}

.icon-back{ font-size:29px; }

footer+script{}

.narrow{ max-width:800px; }

.booking-grid{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:35px;
}

.booking-form,.checkout-form,.admin-form,.form-card{
  border:1px solid var(--line);
  padding:25px;
  border-radius:20px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 25px rgba(7,52,39,.10);
}

label{
  display:block;
  font-weight:700;
  margin:14px 0;
}

input,textarea,select{
  display:block;
  width:100%;
  margin-top:7px;
  padding:13px;
  border:1px solid #cbd4cd;
  border-radius:10px;
  font:inherit;
  background:#fff;
}

.info-box,.notice{
  background:#edf4ee;
  padding:18px;
  border-radius:14px;
  margin:20px 0;
}

.payment-options{
  border:1px solid var(--line);
  padding:12px 18px;
  border-radius:12px;
}

.payment-options input{
  display:inline;
  width:auto;
  margin-right:8px;
}

.detail-image{
  height:auto;
  background:#073c2d;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:20px;
  min-height:0;
}

.detail-image img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  background:#073c2d;
}

.products{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.product-card{
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 22px rgba(7,52,39,.12);
}

.product-image{
  height:230px;
  background:#e8efe9;
  overflow:hidden;
}

.product-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.product-body{ padding:18px; }

.badge{
  font-size:12px;
  color:var(--green);
  font-weight:900;
}

.price{
  font-size:23px;
  font-weight:900;
  margin:16px 0;
}

.available{
  display:block;
  color:#1c7b45;
  font-weight:800;
  font-size:13px;
  margin-bottom:10px;
}

.cart-list{
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}

.cart-total{
  text-align:right;
  font-size:24px;
  margin:22px 0;
}

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.steps>div{
  background:#fff;
  padding:24px;
  border-radius:18px;
}

.success{ text-align:center; }

.check input{
  display:inline;
  width:auto;
  margin-right:8px;
}

.admin-layout{
  display:grid;
  grid-template-columns:230px 1fr;
  min-height:100vh;
}

.admin-layout aside{
  background:var(--deep);
  color:#fff;
  padding:25px;
}

.admin-layout aside a{
  display:block;
  text-decoration:none;
  padding:12px 0;
  color:#dce5de;
}

.admin-main{
  padding:40px;
  background:#f1f4ef;
}

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin:25px 0;
}

.stats div{
  background:#fff;
  padding:24px;
  border-radius:16px;
}

.stats b{
  display:block;
  font-size:28px;
  color:var(--green);
}

.table-wrap{
  overflow:auto;
  background:#fff;
  border-radius:16px;
  margin-top:25px;
}

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  text-align:left;
  padding:14px;
  border-bottom:1px solid var(--line);
}

.admin-thumb{
  max-width:180px;
  max-height:120px;
  object-fit:cover;
  border-radius:10px;
}

.table-thumb{
  width:70px;
  height:50px;
  object-fit:cover;
  border-radius:7px;
}

.modern-icon{
  display:flex!important;
  align-items:center;
  justify-content:center;
  height:64px!important;
}

.modern-icon svg{
  width:58px;
  height:58px;
  fill:none;
  stroke:var(--green);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 6px 4px rgba(0,0,0,.20));
}

.hero-bg{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(238,246,239,.10),rgba(243,240,228,.18) 70%,rgba(243,240,228,.88)),url("/assets/green-trails-bg.svg") center/cover no-repeat;
  z-index:-1;
}

.hero-main-grid{
  width:min(1100px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:10px;
  text-align:left;
}

.hero-btn span{
  font-size:27px;
  line-height:1;
}

.app-feature i{
  margin-top:16px;
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#16745a,#083d2e);
  color:#fff;
  font-style:normal;
  font-size:27px;
  line-height:1;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.28),0 5px 10px rgba(7,52,39,.25);
}

.icon-lightning svg{ stroke:#8dbd24; }

.icon-water svg{ stroke:#2e9dcc; }

.icon-pin svg{ stroke:#2d8d52; }

.icon-bike svg{ stroke:#1e6d4e; }

.bike-section{
  padding-top:34px;
  padding-bottom:22px;
}

.section-head h2{ margin:4px 0 0; }

.mini-bike{
  display:block;
  text-align:center;
  color:var(--green);
  font-size:26px;
  line-height:1;
}

.tile-label{
  background:linear-gradient(180deg,#0e6049,#073c2d);
  color:#fff;
  padding:10px 10px 12px!important;
  text-align:center;
}

.tile-label small{ color:#dcebe2; }

.cart-actions{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:30px 0 24px;
}

.checkout-btn{ margin-top:4px; }

.date-picker-card{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:14px;
  align-items:end;
  padding:22px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,250,.95);
  box-shadow:0 14px 28px rgba(7,52,39,.12);
}

.date-picker-card label{ margin:0; }

.date-picker-card .btn{
  height:52px;
  white-space:nowrap;
}

.selection-summary{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:34px 0 18px;
  padding:18px 20px;
  border-left:5px solid var(--gold);
  border-radius:14px;
  background:rgba(255,255,250,.85);
}

.selection-summary span{ color:#5b6d63; }

.booking-products .product-card{ background:rgba(255,255,250,.96); }

.empty-state{
  text-align:center;
  padding:45px 20px;
  border-radius:22px;
  background:rgba(255,255,250,.9);
  margin-top:20px;
}

.product-body .btn{ width:100%; }

.btn,.cart-link{
  position:relative;
  transform:translateY(0);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.28),
    inset 0 -5px 8px rgba(0,0,0,.12),
    0 7px 0 rgba(6,45,33,.20),
    0 15px 26px rgba(7,52,39,.22);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}

.btn:hover,.cart-link:hover{
  transform:translateY(-4px);
  filter:saturate(1.08);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.32),
    inset 0 -5px 8px rgba(0,0,0,.10),
    0 10px 0 rgba(6,45,33,.18),
    0 20px 32px rgba(7,52,39,.25);
}

.lake-section{
  background:linear-gradient(180deg,rgba(237,243,232,.78),rgba(243,240,228,.70)),
    url("/assets/Bilder/Trail2.jpeg") center/cover no-repeat;
  border-radius:38px;
  margin:35px auto;
  width:min(1160px,92%);
  box-shadow:0 18px 38px rgba(7,52,39,.14);
}

.lake-copy{
  max-width:760px;
  margin:0 auto 22px;
}

.lake-logo img{
  width:min(280px,70%);
  max-height:110px;
  object-fit:contain;
  border-radius:18px;
  box-shadow:0 10px 20px rgba(7,52,39,.14);
}

.lake-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:24px;
}

.lake-gallery img{
  width:100%;
  height:210px;
  object-fit:cover;
  border-radius:22px;
  box-shadow:0 10px 22px rgba(7,52,39,.18);
  border:1px solid rgba(255,255,255,.75);
}

.fixed-footer:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-18px;
  height:25px;
  background:linear-gradient(180deg,#0b5b45,#0b5b45);
  clip-path:polygon(0 45%,8% 20%,16% 42%,25% 16%,34% 45%,43% 22%,52% 44%,61% 18%,70% 43%,79% 20%,88% 44%,100% 17%,100% 100%,0 100%);
}

.hero-water-text{
  font-family:"Comic Sans MS","Trebuchet MS",cursive;
  color:#237d91;
  font-size:clamp(17px,2.2vw,25px);
  line-height:1.22;
  font-weight:700;
  max-width:760px;
  margin:9px auto 24px;
  text-shadow:0 1px 0 rgba(255,255,255,.82);
  letter-spacing:.1px;
}

.feature-strip.app-feature-grid{
  margin-top:0;
  padding-top:0;
  padding-bottom:28px;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin:0;
  padding:0;
  display:grid;
}

.bike-section .section-head h2{
  margin-top:6px;
  margin-bottom:14px;
  margin:4px 0 0;
}

.bike-tiles{
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  display:grid;
}

.tile-label b{
  font-size:16px;
  letter-spacing:.4px;
}

.lake-photo-button{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:22px;
  text-decoration:none;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.25),0 8px 0 rgba(7,52,39,.12),0 18px 28px rgba(7,52,39,.20);
  border:1px solid rgba(255,255,255,.72);
  background:#073c2d;
  transition:transform .18s ease,box-shadow .18s ease;
}

.lake-photo-button img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border:0;
  border-radius:0;
  transition:transform .25s ease;
  transform:none!important;
}

.lake-photo-button span{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  padding:9px 12px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(7,52,39,.84),rgba(3,39,29,.96));
  color:#fff;
  font-weight:900;
  text-align:center;
  box-shadow:0 5px 12px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.18);
}

.lake-photo-button:hover img{ transform:scale(1.04); }

.gallery-page{
  min-height:calc(100svh - 160px);
  padding-top:0!important;
}

.gallery-page h1{
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(36px,6vw,64px);
  color:var(--deep);
  margin:6px 0 28px;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:30px;
}

.gallery-card{
  overflow:hidden;
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 26px rgba(7,52,39,.16);
}

.gallery-card img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.gallery-page .btn{ margin-top:4px; }

@media (max-width:700px) {
  .gallery-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .gallery-card{ border-radius:16px; }
}

.bike-tile-button{
  position:relative;
  display:flex;
  overflow:hidden;
  border-radius:24px;
  text-decoration:none;
  background:#073c2d;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.35),0 8px 0 rgba(7,52,39,.14),0 18px 30px rgba(7,52,39,.20);
  transition:transform .18s ease,box-shadow .18s ease;
  flex-direction:column;
}

.bike-tile-button:hover{
  transform:translateY(-6px);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.35),0 11px 0 rgba(7,52,39,.12),0 24px 36px rgba(7,52,39,.24);
}

.bike-tile-button .tile-image{
  height:auto;
  aspect-ratio:auto;
  background:#073c2d;
  overflow:hidden;
}

.bike-tile-button .tile-image img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  background:#073c2d;
}

.bike-tile-button .tile-label b{
  font-size:15px;
  letter-spacing:.5px;
}

.bike-tile-button .tile-label span{
  font-size:12px;
  white-space:nowrap;
  color:#e9f3ed;
}

.feature-section{ padding:8px 0 44px; }

.app-feature.feature-photo{
  position:relative;
  min-height:190px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding:20px 14px 16px;
  text-align:center;
  color:#fff;
  background:linear-gradient(180deg,rgba(3,45,33,.08) 15%,rgba(3,45,33,.88) 100%),var(--feature-image) center/cover no-repeat;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.35),0 8px 0 rgba(7,52,39,.12),0 20px 32px rgba(7,52,39,.20);
}

.app-feature.feature-photo:hover{ transform:translateY(-6px) scale(1.01); }

.app-feature.feature-photo .modern-icon{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:64px;
  height:64px!important;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 18px rgba(0,0,0,.24);
  backdrop-filter:blur(5px);
}

.app-feature.feature-photo .modern-icon svg{
  width:43px;
  height:43px;
  stroke-width:1.8;
}

.app-feature.feature-photo b{
  font-size:16px;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}

.app-feature.feature-photo small{
  margin-top:5px;
  color:#fff;
  font-size:12px;
  text-shadow:0 2px 6px rgba(0,0,0,.55);
}

.app-feature.feature-photo i{
  margin-top:10px;
  width:34px;
  height:34px;
}

.lake-photo-button:hover{
  transform:translateY(-5px);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.25),0 11px 0 rgba(7,52,39,.10),0 22px 32px rgba(7,52,39,.24);
}

.gallery-card.gallery-button{
  position:relative;
  display:block;
  overflow:hidden;
  background:#073c2d;
  border:1px solid rgba(255,255,255,.7);
  border-radius:22px;
  text-decoration:none;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.25),0 8px 0 rgba(7,52,39,.10),0 18px 28px rgba(7,52,39,.18);
}

.gallery-card.gallery-button img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  background:#073c2d;
}

.gallery-card.gallery-button span{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  padding:9px 12px;
  border-radius:999px;
  text-align:center;
  font-weight:900;
  color:#fff;
  background:rgba(7,52,39,.9);
  box-shadow:0 5px 12px rgba(0,0,0,.2);
}

.booking-products{ grid-template-columns:repeat(2,1fr); }

.booking-product-row .product-image,.product-card .product-image{
  height:auto;
  min-height:0;
  background:#073c2d;
  overflow:hidden;
}

.booking-product-row .product-image img,.product-card .product-image img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  background:#073c2d;
}

.booking-product-row .product-body{ padding:12px 14px 14px; }

.booking-product-row .image-name{
  font-size:11px;
  color:#61736a;
  margin:4px 0 0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.booking-product-row .price{
  font-size:18px;
  margin:10px 0;
}

.booking-product-row .btn{
  width:100%;
  padding:11px 15px;
}

main > .section:first-child{ padding-top:0!important; }

.booking-select{ padding-top:0!important; }

.tile-image-link{
  display:block;
  text-decoration:none;
}

.tile-availability{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f0c955;
  color:#173a2e;
  border-radius:999px;
  padding:8px 12px;
  font-size:11px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 4px 0 rgba(100,75,10,.18);
}

.calendar-card{
  max-width:560px;
  margin:0 auto;
  padding:14px;
  width:min(100%,520px);
  box-sizing:border-box;
}

.calendar-weekdays,.calendar-grid{
  gap:5px;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  width:100%;
}

.calendar-day,.calendar-empty{
  aspect-ratio:1/0.82;
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

.admin-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.admin-check input{
  display:inline-block;
  width:auto;
  margin:0 8px 0 0;
}

.admin-preview-large{
  display:block;
  width:180px;
  height:120px;
  object-fit:contain;
  background:#eef2ed;
  border-radius:12px;
  margin:10px 0;
}

.block-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}

.block-row small{
  display:block;
  color:#68746d;
  margin-top:3px;
}

.link-button{
  background:none;
  border:0;
  padding:0;
  color:var(--green);
  font:inherit;
  font-weight:800;
  cursor:pointer;
  text-decoration:underline;
}

.link-button.danger{ color:#a33; }

.admin-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  align-items:center;
}

.admin-actions form{ display:inline; }

.media-admin-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:24px;
}

.media-admin-card{
  background:#fff;
  border-radius:18px;
  padding:12px;
  box-shadow:0 10px 22px rgba(7,52,39,.1);
}

.media-admin-preview{
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:12px;
  background:#edf2ed;
}

.media-admin-preview img,.media-admin-preview video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.media-admin-card h3{
  margin:10px 0 3px;
  font-size:16px;
}

.media-admin-card small{ color:#68746d; }

.media-actions{
  display:flex;
  gap:14px;
  margin-top:10px;
}

.admin-inline-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:end;
}

.calendar-submit{
  display:block;
  margin:14px auto 0;
}

.product-admin-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:12px 0 18px;
}

.product-admin-image{
  background:#f1f4ef;
  border-radius:14px;
  padding:8px;
}

.product-admin-image img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  border-radius:10px;
  background:#e6ece7;
}

.product-admin-image .link-button{ margin-top:7px; }

.admin-image-status{
  padding:12px;
  border-radius:14px;
  background:#edf5ee;
  border:1px solid #c8ddce;
}

.visual-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 20px;
}

.visual-tab{
  padding:11px 16px;
  border-radius:999px;
  text-decoration:none;
  background:#e8eee8;
  color:#164c39;
  font-weight:900;
  box-shadow:0 3px 0 rgba(7,52,39,.1);
}

.visual-tab.active{
  background:#0d674d;
  color:#fff;
}

.inline-select select{
  width:auto;
  min-width:120px;
}

.bike-gallery-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.bike-gallery-item{
  background:rgba(255,255,250,.92);
  border-radius:22px;
  padding:12px;
  box-shadow:0 12px 26px rgba(7,52,39,.13);
}

.bike-gallery-item h2{
  font-size:20px;
  margin:2px 6px 10px;
  color:#073c2d;
}

.swipe-gallery{
  position:relative;
  overflow:hidden;
  border-radius:17px;
  background:#073c2d;
}

.swipe-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.swipe-track::-webkit-scrollbar{ display:none; }

.swipe-slide{
  flex:0 0 100%;
  scroll-snap-align:start;
}

.swipe-slide img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#073c2d;
}

.swipe-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:rgba(7,60,45,.78);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

.swipe-arrow.prev{ left:8px; }

.swipe-arrow.next{ right:8px; }

.swipe-dots{
  position:absolute;
  bottom:8px;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  gap:6px;
}

.swipe-dots i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
}

.swipe-dots i.active{
  background:#fff;
  transform:scale(1.25);
}

@media (max-width:850px) {
  .feature-strip{ grid-template-columns:repeat(2,1fr); }
  .booking-grid{ grid-template-columns:1fr; }
  .admin-layout{ grid-template-columns:1fr; }
  .admin-layout aside{
    display:flex;
    gap:12px;
    overflow:auto;
    padding:15px;
  }
  .admin-layout aside h2{ display:none; }
  .stats{ grid-template-columns:1fr; }
  .products{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .admin-grid-2,.media-admin-grid{ grid-template-columns:1fr; }
  .admin-inline-form{ grid-template-columns:1fr; }
  .cart-item-side{ min-width:120px; }
  .cart-item-side img{
    width:52px;
    height:42px;
  }
  .product-admin-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bike-gallery-list{ grid-template-columns:1fr; }
}

/*@media (max-width:520px){.hero-new{min-height:calc(100svh - 72px);
    background-position:center center;}
.hero-overlay{padding:0 12px 26px;}
.hero-eyebrow{margin:0 auto 8px;
    padding:8px 0 7px;
    font-size:12px;
    letter-spacing:1.7px;}
.build-note{margin:7px auto 2px;
    font-size:13px;}
.graffiti{font-size:42px;
    margin:1px 0 8px;
    letter-spacing:-1.5px;}
.hero-copy h1{max-width:350px;
    margin:3px auto 8px;
    font-size:34px;
    line-height:1.02;}
.hero-water-text{max-width:360px;
    margin:8px auto 20px;
    font-size:16px;
    line-height:1.2;}
.hero-buttons{gap:20px;
    margin-top:0;}
.hero-btn{min-height:54px;
    font-size:14px;
    padding:14px 16px;}}
*/

/* Trinkgeld: vier kompakte Icons nebeneinander */

.tip-buttons,
.trinkgeld-buttons,
.support-buttons{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  width:min(520px, 100%);
  margin-left:auto;
  margin-right:auto;
}

.tip-button img,
.trinkgeld-button img,
.support-button img{
  width:34px;
  height:34px;
  object-fit:contain;
}

/* ============================================================================
   OPTIMIERUNG / FIXES – neue Regeln (gebündelt, damit nichts Altes kaputt geht).
   Da sie weiter unten in der Datei stehen, gewinnen sie automatisch gegenüber
   den älteren, weiter oben stehenden Regeln mit gleicher Wichtigkeit.
   ============================================================================ */

/* ----------------------------------------------------------------------
   1) KOPF- & FUSSZEILE: im Querformat (kurzer Bildschirm) deutlich kleiner,
      damit sie nicht mehr den Großteil des Bildschirms einnehmen.
   ---------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
   2) HERO: kleine Zeilen kompakt ganz oben, "HALLO BIKER!" zentriert mit
      durchgehender Unterstreichung (Marker-Stil), "Dein Abenteuer..."
      zentriert darunter. Hintergrund unverändert.
   ---------------------------------------------------------------------- */

/* kompaktere Kopfzeilen */

.build-note{
  margin:0 auto 10px;
  font-size:clamp(14px,2vw,20px);
  color:#233b32;
  font-weight:800;
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height:1.05;
}

/* HALLO BIKER!: zentriert, durchgehende Unterstreichung im Marker-Stil */

.hero-shout{
  position:relative;
  display:inline-block;
  margin:0 auto 10px;
  align-self:center;
}

.hero-copy{
  padding:10px 0 20px;
  align-self:center;
  text-align:center;
  width:100%;
}

.hero-copy h1{
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(34px,4.7vw,58px);
  line-height:1.02;
  margin:5px auto 8px;
  max-width:760px;
  font-weight:800;
  letter-spacing:-1.2px;
  text-align:center;
}

/* ----------------------------------------------------------------------
   3) FINDE DEIN BIKE: eigene Schriftart für die (jetzt einzige) Überschrift
   ---------------------------------------------------------------------- */

.bike-section-title{
  font-family:"Permanent Marker","Space Grotesk",sans-serif;
  font-weight:400;
  color:var(--green);
  letter-spacing:.5px;
  transform:rotate(-1deg);
}

/* ----------------------------------------------------------------------
   4) VISUELLE INHALTE: einzige Überschrift etwas größer als vorher (die
      kleine "eyebrow"-Zeile übernimmt jetzt die Rolle der Hauptüberschrift)
   ---------------------------------------------------------------------- */

h2.section-eyebrow-solo{
  font-size:clamp(20px,3vw,28px);
  border-bottom:0;
  padding:0;
  margin:0 auto 6px;
}

/* ----------------------------------------------------------------------
   5) FINDE-DEIN-BIKE-KACHELN: Titel + Button jetzt IMMER (Mobil & Desktop)
      untereinander/zentriert statt nebeneinander -> nicht mehr verschoben.
   ---------------------------------------------------------------------- */

.bike-tile-button .tile-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  background:linear-gradient(180deg,#0e654d,#073c2d);
  color:#fff;
  padding:11px 13px!important;
  text-align:center;
  flex-direction:column;
}

/* ----------------------------------------------------------------------
   6) VISUELLE INHALTE – Kacheln: kein grüner Streifen mehr links/rechts
      auf dem Handy (Bild füllt die Kachel komplett statt "contain").
   ---------------------------------------------------------------------- */

@media (max-width:900px) {
  .hero-main-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
  .hero-copy{ padding-bottom:0; }
  .hero-copy p{ margin:0 auto; }
  .hero-buttons{ margin:24px auto 0; }
  .hero-bike-stage{
    height:260px;
    order:-1;
  }
  .hero-bike-stage img{ height:260px; }
  .feature-strip{
    grid-template-columns:repeat(2,1fr);
    margin-top:-38px;
  }
  .tiles{ grid-template-columns:repeat(2,1fr); }
  .date-picker-card{ grid-template-columns:1fr 1fr; }
  .date-picker-card .btn{ grid-column:1/-1; }
  .lake-gallery img:last-child{ grid-column:1/-1; }
  .bike-tiles,.feature-strip.app-feature-grid{ grid-template-columns:repeat(2,1fr); }
  .lake-gallery{ grid-template-columns:repeat(2,1fr); }
  .lake-photo-button:last-child{ grid-column:1/-1; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .booking-products{ grid-template-columns:repeat(2,1fr); }
  .lake-photo-button img{
    object-fit:cover;
    height:170px;
  }
}

/* ----------------------------------------------------------------------
   7) ROUTE: Desktop = Text links, Karte rechts & kleiner. Mobil bleibt
      wie gehabt einspaltig und zentriert.
   ---------------------------------------------------------------------- */

.route-grid{ display:block; }

.route-text{ text-align:center; }

.route-map{ margin-top:0; }

@media (min-width:1100px) {
  .route-map .map-card{ height:320px; }
}

/* ----------------------------------------------------------------------
   8) TRINKGELD & UNTERSTÜTZUNG: 4 Icons in EINER Reihe, ca. 70px groß.
      (Vorher gab es hierfür gar keine passende CSS-Regel.)
   ---------------------------------------------------------------------- */

.support-link:hover{ transform:translateY(-4px); }

.support-link img{
  width:60%;
  height:60%;
  object-fit:contain;
}

.support-link.is-placeholder{
  opacity:.45;
  pointer-events:none;
}

/* ----------------------------------------------------------------------
   9) KALENDER: ausgewählte(r) Tag(e) jetzt BLÄULICH hinterlegt statt grün
      (der eigentliche Bug – Datum wurde nie markiert – ist im JS behoben).
   ---------------------------------------------------------------------- */

.calendar-day.selected,.calendar-day.range-end,.calendar-day.range-start{
  background:#2f8fd1!important;
  color:#fff!important;
  border-color:#2f8fd1!important;
  box-shadow:0 3px 0 rgba(20,70,110,.25)!important;
}

.calendar-day.in-range{
  background:#d7ecfb!important;
  color:#0d3b57!important;
  border-color:#a9d6f2!important;
}

/* ----------------------------------------------------------------------
   10) VOLLBILD-GALERIE (Lightbox): app.js baut dieses Element, es gab dafür
       aber noch gar kein Styling. X oben rechts, Pfeile, Wisch-Unterstützung.
   ---------------------------------------------------------------------- */

.media-lightbox{
  position:fixed;
  inset:0;
  height:100vh;
  height:100dvh;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(3,15,11,.94);
}

.media-lightbox.open{ display:flex; }

body.lightbox-open{ overflow:hidden; }

.media-lightbox-stage{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 70px;
}

.media-lightbox-stage img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}

.media-lightbox-close{
  position:absolute;
  top:14px;
  right:16px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}

.media-lightbox-prev,.media-lightbox-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}

.media-lightbox-prev{ left:10px; }

.media-lightbox-next{ right:10px; }

.media-lightbox-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:14px;
  text-align:center;
  color:#fff;
  font-weight:700;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
  padding:0 60px;
}

@media (max-width:600px) {
  .media-lightbox-stage{ padding:70px 16px; }
  .media-lightbox-close{
    width:38px;
    height:38px;
    font-size:22px;
    top:8px;
    right:8px;
  }
  .media-lightbox-prev,.media-lightbox-next{
    width:42px;
    height:42px;
    font-size:24px;
  }
}

/* ----------------------------------------------------------------------
   11) Kleine Performance-/Aufräum-Korrektur: Kalender-Karte nicht breiter
       als der Rest der Sektion (verhindert horizontales Wackeln/Scrollen).
   ---------------------------------------------------------------------- */

.calendar-form{
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}

/* ============================================================================
   OPTIMIERUNG / FIXES – RUNDE 2 (Kopfzeile fest, Warenkorb-Icon, Vollbild
   Querformat, Hintergrund war schon oben angepasst).
   ============================================================================ */

/* ----------------------------------------------------------------------
   12) KOPFZEILE: bleibt jetzt beim Scrollen oben sichtbar (sticky) und
       ist insgesamt niedriger als vorher.
   ---------------------------------------------------------------------- */

.site-header{
  width:100%;
  left:0;
  right:0;
  background:linear-gradient(
            180deg,
            rgba(174,220,240,.98) 0%,
            rgba(207,236,247,.97) 68%,
            rgba(232,246,251,.96) 100%
        );
  border-bottom:1px solid rgba(43,128,160,.16);
  position:sticky;
  top:0;
  z-index:60;
  box-shadow:0 2px 10px rgba(11,77,59,.10);
}

.site-header .nav{
  height:58px;
  width:min(1160px, 94%);
  margin:0 auto;
  text-align:center;
}

.site-header .brand-icon,
.site-header .brand img,
.site-header .brand-logo,
.site-header img[src*="Logo.jpeg"]{
  width:42px;
  height:42px;
  object-fit:contain;
  flex:0 0 42px;
}

.site-header .brand b{
  display:block;
  margin:0;
  line-height:1.05;
  text-align:center;
  font-size:14px;
}

.site-header .brand small{
  display:block;
  margin:1px 0 0;
  line-height:1.05;
  text-align:center;
  font-size:8.5px;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:70px;
}

/* ----------------------------------------------------------------------
   13) WARENKORB-ICON: modernes SVG-Symbol statt Emoji, mit rundem Badge
       für die Anzahl der Artikel.
   ---------------------------------------------------------------------- */

.cart-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--green);
  color:#fff;
  padding:9px 13px;
  border-radius:14px;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(11,77,59,.25);
}

.cart-icon{
  width:20px;
  height:20px;
  fill:none;
  stroke:#fff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.cart-icon circle{
  fill:#fff;
  stroke:none;
}

.cart-count{
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:9px;
  background:var(--gold);
  color:#173a2c;
  font-size:11px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* ----------------------------------------------------------------------
   14) VOLLBILD-GALERIE im QUERFORMAT: Bilder waren kleiner als in der
       normalen Ansicht, weil der Innenabstand zu groß war. Jetzt nutzt
       das Bild auf kurzen/breiten (Querformat-)Bildschirmen fast die
       gesamte Fläche.
   ---------------------------------------------------------------------- */

@media (orientation:landscape) and (max-height:620px) {
  .media-lightbox-stage{ padding:10px 58px; }
  .media-lightbox-close{
    top:6px;
    right:8px;
    width:36px;
    height:36px;
    font-size:20px;
  }
  .media-lightbox-prev,.media-lightbox-next{
    width:40px;
    height:40px;
    font-size:22px;
  }
  .media-lightbox-prev{ left:6px; }
  .media-lightbox-next{ right:6px; }
  .media-lightbox-caption{
    bottom:4px;
    padding:0 46px;
    font-size:12px;
  }
}

/* ============================================================================
   OPTIMIERUNG / FIXES – RUNDE 3: an eine Beispiel-Vorlage angelehntes,
   kompakteres Layout. Reihenfolge unten entspricht der Reihenfolge der
   Sektionen in index.php von oben nach unten.
   ============================================================================ */

/* ----------------------------------------------------------------------
   15) EINHEITLICHE SEKTIONS-BESCHRIFTUNG: zentrierter, fetter Text mit
       dünnen Linien links/rechts (wie in der Vorlage). Gilt für alle
       "echten" Sektionsüberschriften – NICHT für die kleine Hero-Zeile
       oben (.hero-eyebrow bleibt eine reine Textzeile ohne Linien).
   ---------------------------------------------------------------------- */

.section-label{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  max-width:480px;
  margin:0 auto 8px;
  text-align:center;
  justify-content:center;
  font-family:"Space Grotesk",sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.6px;
  color:var(--green);
  font-size:clamp(15px,2.4vw,19px);
  border-bottom:0;
  padding:0;
}

.section-label:before,.section-label:after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:currentColor;
  opacity:.35;
  max-width:70px;
}

.bike-section .section-head{ margin-bottom:14px; }

/* ----------------------------------------------------------------------
   16) FINDE DEIN BIKE: 4 Kacheln in EINER Reihe auf dem Handy (nicht 2x2).
       Kompakte Bilder + kurze Beschriftung, damit es in eine Zeile passt.
   ---------------------------------------------------------------------- */

.bike-tiles-row{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:8px!important;
}

.bike-tiles-row .tile-image{ aspect-ratio:1/1; }

.bike-tiles-row .tile-label{
  padding:6px 4px!important;
  gap:2px;
}

.bike-tiles-row .tile-label b{
  font-size:10.5px;
  letter-spacing:.2px;
}

.bike-tiles-row .tile-availability{ font-size:9.5px; }

/* ----------------------------------------------------------------------
   17) VISUELLE INHALTE: 3 Kacheln in EINER Reihe auf dem Handy.
   ---------------------------------------------------------------------- */

.lake-gallery-row{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:8px!important;
  margin-top:14px!important;
}

.lake-gallery-row img,.lake-gallery-row img:last-child{
  grid-column:auto!important;
  height:110px!important;
  object-fit:cover!important;
}

.lake-gallery-row span{
  font-size:11px;
  padding:6px 4px;
}

/* ----------------------------------------------------------------------
   18) ROUTE: Text + Karte etwas kompakter (kleiner).
   ---------------------------------------------------------------------- */

.route-section-compact{ padding:26px 0; }

.route-section-compact .route-text h2{
  font-size:clamp(19px,3vw,26px);
  margin:4px auto 6px;
}

.route-section-compact .route-text p{
  font-size:14px;
  margin:0 auto 10px;
}

.route-section-compact .route-btn{
  padding:12px 20px;
  min-height:44px;
  font-size:13px;
}

.route-section-compact .map-card{ height:150px; }

@media (min-width:901px) {
  .hero-overlay{ max-width:1100px; }
  .hero-copy h1{ font-size:clamp(48px,5vw,68px); }
  .feature-strip.app-feature-grid{ grid-template-columns:repeat(4,1fr); }
  .bike-tiles{ grid-template-columns:repeat(4,1fr); }
  .route-grid{
    display:grid;
    grid-template-columns:1.1fr 420px;
    gap:48px;
    align-items:center;
    text-align:left;
  }
  .route-text{ text-align:left; }
  .route-text .eyebrow,.route-text h2{ text-align:left; }
  .route-map .map-card{
    height:300px;
    margin-top:0;
  }
  .lake-gallery-row img,.lake-gallery-row img:last-child{ height:210px!important; }
  .lake-gallery-row span{ font-size:15px; }
  .route-section-compact .map-card{ height:210px; }
}

/* ----------------------------------------------------------------------
   19) TRINKGELD & UNTERSTÜTZUNG: etwas kompakter (60px statt 70px),
       passend zum insgesamt gestrafften Layout.
   ---------------------------------------------------------------------- */

.support-links{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:clamp(8px,2.6vw,18px);
  margin-top:12px;
}

.support-link{
  flex:0 0 auto;
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(11,77,59,.14);
  box-shadow:0 10px 20px rgba(7,52,39,.14);
  transition:transform .16s ease,box-shadow .16s ease;
}

@media (max-width:420px) {
  .bike-tiles-row{ gap:6px!important; }
  .bike-tiles-row .tile-label b{ font-size:9.5px; }
  .bike-tiles-row .tile-availability{ font-size:8.5px; }
  .support-link{
    width:52px;
    height:52px;
    border-radius:14px;
  }
}

/* ----------------------------------------------------------------------
   20) RECHTLICHE LINKS: etwas kompakter.
   ---------------------------------------------------------------------- */

.legal-links-compact{
  padding:16px 16px 22px!important;
  gap:8px 14px!important;
  font-size:12.5px!important;
}

/* ----------------------------------------------------------------------
   21) FUSSZEILE: insgesamt etwas kleiner.
   ---------------------------------------------------------------------- */

.fixed-footer{
  position:fixed;
  z-index:100;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(180deg,#0b5b45,#062d21);
  color:#fff;
  padding:7px 12px 8px!important;
  text-align:center;
  box-shadow:0 -10px 28px rgba(0,0,0,.20);
  backdrop-filter:blur(12px);
  overflow:visible;
}

.footer-icon{
  width:38px!important;
  height:38px!important;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.78);
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.03));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:24px;
  cursor:pointer;
  transition:.18s;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.22),0 6px 12px rgba(0,0,0,.22);
}

.footer-icon svg{
  width:18px!important;
  height:18px!important;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.footer-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(34px,16vw,110px);
}

body{
  margin:0;
  color:var(--ink);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  padding-bottom:66px;
  background-color:#f3f0e4;
  background-image:linear-gradient(rgba(243,240,228,.90),rgba(243,240,228,.90)),
    url("/assets/Bilder/GreenTrail1.jpeg");
  background-position:center top;
  background-size:cover;
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* ============================================================================
   OPTIMIERUNG / FIXES – RUNDE 4
   ============================================================================ */

/* ----------------------------------------------------------------------
   22) HERO: Hintergrundbild etwas kleiner (weniger dominant), die beiden
       kleinen Textzeilen ganz oben, "Dein Abenteuer..." rechts, kleiner
       und in einer moderneren, schlichten Schrift.
   ---------------------------------------------------------------------- */

.hero-eyebrow{
  font-size:clamp(15px,2.35vw,25px);
  letter-spacing:2.8px;
  color:var(--green);
  margin:0 auto 2px;
  margin-top:0;
  font-family:"Space Grotesk",sans-serif;
  font-weight:800;
  padding:6px 0 4px;
  width:min(920px,100%);
  line-height:1.05;
  border-bottom:2px solid rgba(11,77,59,.38);
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}

.hero-copy-right{
  align-self:flex-end;
  text-align:right;
  width:auto;
  max-width:78%;
  margin-left:auto;
}

.hero-copy-right h1{
  text-align:right;
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-weight:800;
  letter-spacing:-.3px;
  font-size:clamp(22px,4.4vw,34px);
  line-height:1.12;
}

@media (max-width:520px) {
  .brand b{ font-size:17px; }
  .brand small{ font-size:8px; }
  .app-feature span{ font-size:38px; }
  .section{ padding:55px 0; }
  .map-card{ height:280px; }
  .steps{ grid-template-columns:1fr; }
  .hero-main-grid{ gap:0; }
  .hero-copy p{ font-size:15px; }
  .modern-icon{ height:48px!important; }
  .modern-icon svg{
    width:45px;
    height:45px;
  }
  .bike-section{ padding-top:24px; }
  .tile small{ font-size:11px; }
  .date-picker-card{
    grid-template-columns:1fr;
    padding:16px;
  }
  .date-picker-card .btn{
    grid-column:auto;
    width:100%;
  }
  .booking-heading h1{ font-size:32px; }
  .selection-summary{ margin-top:24px; }
  .products{ grid-template-columns:1fr; }
  .cart-actions{ gap:16px; }
  .cart-actions .btn{ width:100%; }
  body{
    padding-bottom:82px;
    background-attachment:scroll;
  }
  .hero-eyebrow{
    font-size:13px;
    letter-spacing:2px;
    margin-top:0;
  }
  .build-note{ font-size:14px; }
  .hero-bike-stage{ height:205px; }
  .hero-bike-stage img{
    height:205px;
    width:96%;
  }
  .feature-strip{
    gap:12px;
    padding-left:0;
    padding-right:0;
    margin-top:-22px;
  }
  .app-feature{
    min-height:170px;
    padding:18px 9px;
    border-radius:23px;
  }
  .app-feature b{
    font-size:14px;
    line-height:1.15;
  }
  .app-feature small{
    font-size:11px;
    line-height:1.3;
  }
  .app-feature i{
    width:32px;
    height:32px;
    font-size:23px;
    margin-top:10px;
  }
  .tiles{ gap:10px; }
  .tile{ border-radius:19px; }
  .tile-image{ height:145px; }
  .tile b{ font-size:14px; }
  .lake-section{
    border-radius:28px;
    margin:22px auto;
    width:94%;
  }
  .lake-gallery{
    grid-template-columns:1fr;
    gap:10px;
  }
  .lake-gallery img,.lake-gallery img:last-child{
    grid-column:auto;
    height:170px;
  }
  .route-section{ padding-top:58px; }
  .map-gap{ margin-top:38px; }
  .legal-links{
    gap:10px 14px;
    font-size:13px;
    padding-bottom:30px;
  }
  .fixed-footer{ padding-bottom:9px; }
  .footer-actions{ gap:42px; }
  .footer-icon{
    width:42px;
    height:42px;
  }
  .feature-strip.app-feature-grid{
    margin-top:0;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .app-feature-grid .app-feature{ min-height:155px; }
  .bike-tiles{
    grid-template-columns:repeat(2,1fr);
    gap:9px;
  }
  .tile-label{ padding:8px 5px 10px!important; }
  .tile-label b{ font-size:13px; }
  .lake-photo-button img{ height:170px; }
  .hero-new{
    min-height:calc(100svh - 72px);
    border-radius:0 0 26px 26px;
  }
  .graffiti{
    font-size:43px;
    margin:9px 0 13px;
  }
  .hero-copy h1{
    font-size:38px;
    line-height:1.02;
  }
  .hero-water-text{
    font-size:18px;
    margin:13px auto 22px;
  }
  .hero-buttons{
    gap:24px;
    margin-top:0;
  }
  .hero-btn{
    font-size:14px;
    padding:14px 16px;
    width:min(94%,430px);
    min-height:55px;
  }
  .bike-tiles,.feature-strip.app-feature-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .bike-tile-button{ border-radius:18px; }
  .bike-tile-button .tile-label{
    padding:8px 8px!important;
    display:block;
    text-align:center;
  }
  .bike-tile-button .tile-label b{
    font-size:12px;
    display:block;
  }
  .bike-tile-button .tile-label span{
    display:block;
    margin-top:3px;
    font-size:10px;
  }
  .app-feature.feature-photo{
    min-height:155px;
    border-radius:20px;
    padding:18px 8px 12px;
  }
  .app-feature.feature-photo .modern-icon{
    width:52px;
    height:52px!important;
    top:12px;
  }
  .app-feature.feature-photo .modern-icon svg{
    width:35px;
    height:35px;
  }
  .app-feature.feature-photo b{ font-size:13px; }
  .app-feature.feature-photo small{ font-size:10px; }
  .app-feature.feature-photo i{
    width:30px;
    height:30px;
    font-size:22px;
  }
  .lake-gallery,.gallery-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .lake-photo-button:last-child{ grid-column:auto; }
  .lake-photo-button span{ bottom:8px; }
  .booking-products{ grid-template-columns:1fr; }
  .gallery-card.gallery-button{ border-radius:18px; }
  .hero-overlay{
    padding-top:0!important;
    padding:13px 12px 30px;
  }
  .calendar-day{
    font-size:12px;
    border-radius:8px;
  }
  .tile-availability{
    font-size:10px;
    padding:7px 9px;
  }
  .cart-item{
    flex-direction:column;
    padding:14px;
    gap:10px;
  }
  .cart-item-side{
    min-width:105px;
    gap:6px;
  }
  .cart-item-side img{
    width:48px;
    height:38px;
  }
  .cart-item-info h3{ font-size:15px; }
  .cart-item-info p{ font-size:12px; }
  .admin-actions{
    flex-direction:column;
    align-items:flex-start;
  }
  .calendar-card{
    padding:8px;
    width:min(100%,360px);
  }
  .calendar-weekdays,.calendar-grid{ gap:3px; }
  .calendar-day,.calendar-empty{
    aspect-ratio:1/1;
    font-size:12px;
  }
  .product-admin-gallery{ grid-template-columns:1fr 1fr; }
  .visual-tab{
    padding:9px 12px;
    font-size:13px;
  }
  .bike-gallery-item{
    padding:8px;
    border-radius:18px;
  }
  .bike-gallery-item h2{ font-size:17px; }
  .swipe-arrow{
    width:32px;
    height:32px;
    font-size:23px;
  }
  .site-header .nav{ height:56px; }
  .hero-copy-right{ max-width:86%; }
}

@media (max-height:500px) and (orientation:landscape) {
  .site-header .brand-icon,.site-header .brand img,.site-header .brand-logo,.site-header img[src*="Logo.jpeg"]{
    width:34px;
    height:34px;
    flex:0 0 34px;
  }
  .site-header .brand b{ font-size:13px; }
  .site-header .brand small{ font-size:7px; }
  .hero-overlay{
    padding-top:4px;
    padding-bottom:14px;
  }
  .hero-bubble{
    margin-bottom:6px;
    padding:8px 14px;
  }
  .graffiti{
    font-size:30px;
    margin:0 0 2px;
  }
  .hero-copy h1{
    font-size:20px;
    margin:0;
  }
  .hero-eyebrow{
    padding:4px 0;
    margin-bottom:4px;
    font-size:11px;
  }
  .build-note{
    font-size:11px;
    margin:2px auto;
  }
  .hero-water-text{
    font-size:13px!important;
    margin:6px auto!important;
  }
  .hero-buttons{ margin-top:8px!important; }
  .hero-btn{
    min-height:40px;
    padding:8px 14px;
    font-size:12px;
  }
  body{ padding-bottom:54px; }
  .fixed-footer{ padding:4px 12px 5px; }
  .footer-icon{
    width:32px;
    height:32px;
  }
  .footer-icon svg{
    width:16px;
    height:16px;
  }
  .footer-actions{ gap:clamp(28px,14vw,90px); }
  .site-header .nav{ height:42px; }
  .hero-new{
    min-height:auto!important;
    padding-top:6px;
  }
}

/* ----------------------------------------------------------------------
   23) VISUELLE INHALTE: Überschrift zweizeilig (Titel mit Linien + kleine
       Zeile darunter), alles kompakter direkt am oberen Rand des
       Hintergrundbilds, Hintergrundbild selbst nicht mehr so hoch/groß.
   ---------------------------------------------------------------------- */

.section-sublabel{
  text-align:center;
  color:var(--green);
  opacity:.75;
  font-family:"Space Grotesk",sans-serif;
  font-weight:600;
  letter-spacing:1px;
  font-size:clamp(11px,1.8vw,13px);
  margin:0 auto 14px;
}

.lake-section-compact{ padding:22px 0 30px!important; }

.lake-section-compact .section-label{ margin-top:0; }

/* ----------------------------------------------------------------------
   24) VOLLBILD-GALERIE: echtes Vollbild via Fullscreen-API (siehe app.js).
       Hinweis: auf iPhone/Safari unterstützt das Betriebssystem echtes
       Element-Vollbild leider nicht – dort bleibt die Browserleiste sichtbar,
       das ist eine iOS-Einschränkung, keine Einstellung auf der Seite.
   ---------------------------------------------------------------------- */

.media-lightbox:fullscreen{ background:#000; }

.media-lightbox:fullscreen .media-lightbox-stage{ padding:0; }

/* ----------------------------------------------------------------------
   25) BUCHEN & RESERVIEREN – Produktkarten: 2 kompakte Zeilen statt 4.
       Zeile 1: Rubrik links / Name rechts. Zeile 2: Bezeichnung links / Preis rechts.
   ---------------------------------------------------------------------- */

.compact-body{ padding-top:10px; }

.compact-body .pb-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.compact-body .pb-row+.pb-row{ margin-top:2px; }

.compact-body .badge{ margin:0; }

.compact-body h3{
  margin:0;
  font-size:16px;
  text-align:right;
}

.compact-body .model-name{
  font-size:12.5px;
  color:#5b6b62;
  text-align:left;
}

.compact-body .price{
  margin:0;
  font-size:18px;
  text-align:right;
}

.compact-body form{ margin-top:10px; }

/* ----------------------------------------------------------------------
   26) WARENKORB: linke Spalte (Name/Datum/Menge) und rechte Spalte
       (Bild/Preis/Entfernen) stehen jetzt IMMER nebeneinander – auch auf
       dem Handy – damit ein Artikel nur noch 3–4 Zeilen hoch ist.
   ---------------------------------------------------------------------- */

.cart-item{
  display:flex!important;
  justify-content:space-between;
  gap:12px;
  padding:20px;
  border-bottom:1px solid var(--line);
  flex-direction:row!important;
  align-items:flex-start!important;
}

.cart-item-info{ text-align:left; }

.cart-item-info h3{ margin:0 0 3px; }

.cart-item-info p{ margin:0 0 3px; }

.cart-item-side{
  min-width:145px;
  gap:8px;
  display:flex!important;
  align-items:center;
  justify-content:flex-end;
  text-align:right;
  flex-shrink:0;
}

.cart-item-side>div{ text-align:right; }

.cart-item-side img{
  width:64px;
  height:48px;
  aspect-ratio:4/3;
  object-fit:contain;
  border-radius:9px;
  flex-shrink:0;
}

/* ============================================================================
   OPTIMIERUNG / FIXES – RUNDE 5
   ============================================================================ */

/* ----------------------------------------------------------------------
   27) HERO: oberer Block (die zwei kleinen Zeilen) ganz nach oben, unterer
       Block (Text + Button) ganz nach unten – der Hintergrund wird so über
       die volle Höhe genutzt statt Leerraum zu lassen.
   ---------------------------------------------------------------------- */

.hero-overlay{
  position:relative;
  z-index:2;
  text-align:center;
  padding:0 18px 34px;
  max-width:1180px;
  margin:auto;
  width:100%;
  padding-top:14px!important;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100%;
  margin-top:0!important;
  margin-bottom:0!important;
  padding-bottom:20px!important;
}

.hero-new{
  min-height:clamp(430px,62svh,600px)!important;
  position:relative;
  overflow:hidden;
  background:transparent;
  isolation:isolate;
  background-image:linear-gradient(180deg,rgba(248,248,238,.78) 0%,rgba(248,246,235,.52) 40%,rgba(243,240,228,.70) 100%),
    url("/assets/Bilder/Hero.jpeg");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  border-radius:0 0 26px 26px!important;
  box-shadow:0 18px 45px rgba(7,52,39,.16);
  height:auto;
  display:flex;
  align-items:stretch!important;
  justify-content:center;
}

.hero-middle-group{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero-top-group{ margin:0; }

.hero-top-group .hero-eyebrow{ margin:0 auto 2px; }

.hero-top-group .build-note{ margin:0 auto; }

.hero-bottom-group{ margin:0; }

.hero-bottom-group .hero-water-text{ margin:0 auto 10px!important; }

.hero-bottom-group .hero-buttons{ margin:0; }

/* ----------------------------------------------------------------------
   28) BUGFIX: Unterstreichung von "HALLO BIKER!" war unsichtbar, weil
       z-index:-1 sie hinter den Hero-Hintergrund geschoben hat.
   ---------------------------------------------------------------------- */

.hero-shout:after{
  content:"";
  position:absolute;
  left:3%;
  bottom:4px;
  width:94%;
  height:.12em;
  min-height:5px;
  background:var(--gold);
  border-radius:4px;
  transform:rotate(-1deg);
  z-index:0;
}