/* =============================================================
   TurboDirekt — Ergänzungs-Stylesheet
   Definiert Utility-Klassen, die im kompilierten styles.css fehlen,
   plus Bento-Galerie & Lightbox. Wird NACH styles.css geladen.
   ============================================================= */

/* --- fehlende Abstands-/Größen-Utilities --------------------- */
.p-3{padding:.75rem}
.p-4{padding:1rem}
.px-2\.5{padding-left:.625rem;padding-right:.625rem}
.px-3\.5{padding-left:.875rem;padding-right:.875rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.w-auto{width:auto}
.inline-grid{display:inline-grid}
.z-40{z-index:40}
.top-10{top:2.5rem}
.top-24{top:6rem}
.right-5{right:1.25rem}
.bottom-5{bottom:1.25rem}
.-bottom-5{bottom:-1.25rem}
.object-center{object-position:center}
.justify-end{justify-content:flex-end}
.pb-24{padding-bottom:6rem}
.pt-40{padding-top:10rem}
.rounded-none{border-radius:0}

/* Basis-Grid-Spalten (nur responsive Varianten sind kompiliert) */
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Marquee-Randabblendung */
.\[mask-image\:linear-gradient\(to_right\2c transparent\2c black_8\%\2c black_92\%\2c transparent\)\]{
  -webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);
          mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);
}

/* --- Farb-Utilities (rot/weiß) ------------------------------- */
.bg-white\/25{background-color:rgba(255,255,255,.25)}
.bg-red-500\/10{background-color:rgba(239,68,68,.1)}
.border-red-500\/30{border-color:rgba(239,68,68,.3)}
.text-red-700{color:rgb(185 28 28)}
.hover\:border-mag:hover{border-color:rgb(237 28 36)}
.placeholder\:text-ink-400::placeholder{color:rgb(148 163 184)}
.to-ink-900\/70{--tw-gradient-to:rgba(11,17,32,.7) var(--tw-gradient-to-position)}
.focus\:ring-mag\/30:focus{--tw-ring-color:rgba(237,28,36,.3)}

/* Dark-Mode-Ergänzungen (:is(.dark *) wie im kompilierten CSS) */
.dark\:border-mag\/40:is(.dark *){border-color:rgba(237,28,36,.4)}
.dark\:text-red-300:is(.dark *){color:rgb(252 165 165)}
.dark\:placeholder\:text-white\/40:is(.dark *)::placeholder{color:rgba(255,255,255,.4)}

/* Responsive Ergänzungen (Breakpoints wie Tailwind: sm=640) */
@media (min-width:640px){
  .sm\:inline-flex{display:inline-flex}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
}

/* --- Bento-Galerie ------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;grid-auto-flow:dense;gap:.6rem}
.bento .cell{position:relative;overflow:hidden;border-radius:8px;aspect-ratio:1/1;cursor:zoom-in;padding:0;border:0;background:#0b1120}
.bento .cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.bento .cell:hover img{transform:scale(1.07)}
/* Grosse Kacheln: 2x2 Span, KEIN eigenes aspect-ratio (fuellen den quadratischen Span) */
.bento .a,.bento .b{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media (min-width:768px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bento .a{grid-column:1 / span 2;grid-row:1 / span 2}
  .bento .b{grid-column:3 / span 2;grid-row:4 / span 2}
}
@media (prefers-reduced-motion:reduce){ .bento .cell:hover img{transform:none} }

/* --- Lightbox ------------------------------------------------ */
.lb{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
    background:rgba(7,11,22,.92);padding:1.5rem;opacity:0;transition:opacity .25s ease}
.lb[hidden]{display:none}
.lb.open{opacity:1}
.lb img{max-width:min(1100px,92vw);max-height:88vh;border-radius:8px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.lb-close{position:absolute;top:1rem;right:1rem;width:2.75rem;height:2.75rem;display:grid;place-items:center;
    border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.14)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:2.75rem;height:2.75rem;display:grid;place-items:center;
    border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.lb-nav:hover{background:rgba(255,255,255,.14)}
.lb-prev{left:1rem}.lb-next{right:1rem}

/* --- Nachtrag: weitere fehlende Utilities -------------------- */
.gap-12{gap:3rem}
.h-20{height:5rem}
.w-20{width:5rem}
.h-64{height:16rem}
.mb-6{margin-bottom:1.5rem}
.mt-0\.5{margin-top:.125rem}
.min-w-0{min-width:0}
.max-h-10{max-height:2.5rem}
.bg-mag\/90{background-color:rgba(237,28,36,.9)}
.bg-white\/85{background-color:rgba(255,255,255,.85)}
.bg-ink-950\/40{background-color:rgba(7,11,22,.4)}
.border-white\/15{border-color:rgba(255,255,255,.15)}
.border-white\/25{border-color:rgba(255,255,255,.25)}
.text-white\/90{color:rgba(255,255,255,.9)}
.hover\:bg-white\/20:hover{background-color:rgba(255,255,255,.2)}
.fade-x{-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
/* Dark-Varianten */
.dark\:bg-ink-950\/40:is(.dark *){background-color:rgba(7,11,22,.4)}
.dark\:bg-ink-950\/80:is(.dark *){background-color:rgba(7,11,22,.8)}
.dark\:text-white\/90:is(.dark *){color:rgba(255,255,255,.9)}
.dark\:hover\:bg-white\/5:hover:is(.dark *){background-color:rgba(255,255,255,.05)}
@media (min-width:768px){
  .md\:p-6{padding:1.5rem}
  .md\:p-8{padding:2rem}
}
@media (min-width:1024px){
  .lg\:px-10{padding-left:2.5rem;padding-right:2.5rem}
  .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* Rechtsseiten: Kopf-Banner (zentral definiert) */
.legal-hero{position:relative;overflow:hidden;background:#1b1f25;border-bottom:1px solid rgba(255,255,255,.08)}
.legal-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.4}
.legal-hero .ov{position:absolute;inset:0;background:
  radial-gradient(115% 85% at 88% -10%, rgba(237,28,36,.30), transparent 55%),
  linear-gradient(180deg, rgba(27,31,37,.30) 0%, rgba(27,31,37,.82) 68%, #1b1f25 100%)}
.legal-hero .inner{position:relative}
.legal-hero .accent{display:block;width:2.75rem;height:3px;border-radius:2px;background:#ed1c24;margin-bottom:1.1rem;box-shadow:0 0 24px 2px rgba(237,28,36,.5)}
.legal-hero .lh-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.legal-hero .lh-title{padding:1.5rem 0 3.5rem}
/* „Zur Startseite"-Button (Footer der Rechtsseiten) */
.legal-back{display:inline-flex;align-items:center;gap:.5rem;border-radius:8px;background:#ed1c24;color:#fff;font-weight:600;padding:.7rem 1.25rem;text-decoration:none;box-shadow:0 0 40px -12px rgba(237,28,36,.7);transition:transform .2s ease}
.legal-back:hover{transform:translateY(-2px)}

/* Popup-Meldung (Urlaub / Betriebsurlaub) */
.tdpop-overlay{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:rgba(7,11,22,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s ease}
.tdpop-overlay.open{opacity:1}
.tdpop{position:relative;width:100%;max-width:30rem;overflow:hidden;border-radius:12px;background:#fff;border:1px solid rgba(11,17,32,.1);box-shadow:0 30px 80px -20px rgba(0,0,0,.55);transform:translateY(12px) scale(.98);transition:transform .28s cubic-bezier(.22,1,.36,1)}
.dark .tdpop{background:#0f1524;border-color:rgba(255,255,255,.1);color:#fff}
.tdpop-overlay.open .tdpop{transform:none}
.tdpop-bar{height:6px;background:linear-gradient(90deg,#ed1c24,#ff5a5a)}
.tdpop-body{padding:1.7rem 1.7rem 1.5rem}
.tdpop-ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:10px;background:rgba(237,28,36,.12);color:#ed1c24;margin-bottom:1rem}
.tdpop h3{font-family:"Space Grotesk",sans-serif;font-size:1.3rem;font-weight:700;margin:0 0 .5rem;line-height:1.2}
.tdpop p{line-height:1.65;color:rgb(51 65 85);margin:0 0 1.4rem}
.dark .tdpop p{color:rgba(255,255,255,.78)}
.tdpop-btn{display:inline-flex;align-items:center;gap:.5rem;border:0;border-radius:8px;background:#ed1c24;color:#fff;font-weight:600;padding:.7rem 1.4rem;cursor:pointer;box-shadow:0 0 40px -12px rgba(237,28,36,.7);transition:transform .2s ease}
.tdpop-btn:hover{transform:translateY(-2px)}
.tdpop-x{position:absolute;top:.7rem;right:.7rem;width:2.1rem;height:2.1rem;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:rgb(100 116 139);cursor:pointer;line-height:1}
.tdpop-x:hover{background:rgba(11,17,32,.06)}
.dark .tdpop-x{color:rgba(255,255,255,.6)}
.dark .tdpop-x:hover{background:rgba(255,255,255,.1)}
@media (prefers-reduced-motion:reduce){.tdpop-overlay,.tdpop{transition:none}}

/* Feinere Section-Paddings (gegen zu große Lücken) */
.pt-12{padding-top:3rem}
.pb-12{padding-bottom:3rem}
/* Teilstern-Anzeige (z. B. 4,4 von 5) */
.starbar{position:relative;display:inline-block;font-size:15px;letter-spacing:2px;line-height:1;color:rgba(148,163,184,.5)}
.starbar::before{content:"★★★★★"}
.starbar > i{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#f5b301}
.starbar > i::before{content:"★★★★★"}

/* Garantierte vertikale Abstände (space-y) */
.space-y-1\.5 > * + *{margin-top:.375rem}
.space-y-2\.5 > * + *{margin-top:.625rem}
.space-y-4   > * + *{margin-top:1rem}
/* Partner-Logos: einheitliche Höhe */
.plogo{height:2.25rem;width:auto;max-height:2.25rem;object-fit:contain;margin:0 auto}

/* Dezente Turbolader-Textur: bedeckt den GANZEN Sektor, sehr transparent */
.wm{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;object-fit:cover;object-position:center;opacity:.05;filter:grayscale(1)}
.dark .wm{opacity:.07}
/* Zusatz-Ausrichtung (falls gewünscht), Vollflächigkeit bleibt erhalten */
.wm-r{object-position:right center}
.wm-l{object-position:left center}

/* Rezensionen: verblurrte Teaser-Reihe + Verlauf */
.rev-more{position:relative}
.rev-more-cards > *{filter:blur(3.5px);opacity:.7;user-select:none;pointer-events:none}
.rev-more-veil{position:absolute;inset:0;display:grid;place-items:center;padding:1rem;
  background:linear-gradient(to bottom,rgba(244,246,251,0) 0%,rgba(244,246,251,.75) 60%,#f4f6fb 100%)}
.dark .rev-more-veil{background:linear-gradient(to bottom,rgba(7,11,22,0) 0%,rgba(7,11,22,.78) 60%,#070b16 100%)}