/* =========================
   Mobile-Fixes & Responsives
   ========================= */

/* 1) Lesbare, skalierende Typo im Hero */
#hero-title { font-size: clamp(1.75rem, 4.8vw, 2.25rem); }
#hero-kicker { font-size: clamp(1.2rem, 3.6vw, 2rem); }
.lead { font-size: clamp(1rem, 2.8vw, 1.25rem); }

/* 2) Sticky-Header: interne Anker nicht verdecken */
:root{ --navH: 72px; }
[id] { scroll-margin-top: var(--navH); }

/* =========================
   Hero: Hintergrundbild (Karpfen-Seite)
   ========================= */
/* WICHTIG: Pfade sind relativ zu DIESER Datei -> ../img/... */
.hero-section{
  position: relative;
  min-height: 58svh;
  padding: clamp(2rem, 6vw, 5rem) 0;
  background-color: #313131;
  background-image: url("../img/hero/carp-2560.jpg"); /* Basis */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Overlay unter dem Inhalt platzieren (Lesbarkeit) */
.page--carp .hero-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.32) 40%, rgba(0,0,0,.56) 100%);
  pointer-events:none;
}
.page--carp .hero-section > * { position: relative; z-index: 2; }

/* Größere Screens: größere Source */
@media (min-width: 1200px){
  .page-carp .hero-section{
    background-image: url("../img/Karpfen/carp-2560.jpg");
  }
}

/* Tablets */
@media (max-width: 991.98px){
  .page--carp .hero-section{
    background-image: url("../img/hero/carp-1536.jpg");
  }
}

/* Phones/Portrait */
@media (max-width: 575.98px){
  .page--carp .hero-section{
    background-image: url("../img/hero/carp-1080x1920.jpg");
    background-position: center 35%;
    min-height: 46svh;
  }
}

/* HINWEIS: image-set block vorerst entfernt.
   Falls du .webp wirklich hast, kannst du ihn später wieder aktivieren.
   Achte dann darauf, dass die *gleichen* Dateien wie oben existieren. */

/* 4) Bilder & Ratio-Verhalten (Safari/Chrome mobil) */
.card-img-top, .img-fluid { max-width: 100%; height: auto; }
.ratio > img, .ratio > video { width: 100%; height: 100%; object-fit: cover; }

/* 5) Tabellen: horizontales Scrollen erlauben */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 6) Cookie-Modal: auf schmalen Screens im Viewport halten */
.cc-modal { max-width: min(680px, 92vw); max-height: 90vh; overflow: auto; }
.cc-backdrop { backdrop-filter: blur(2px); }

/* 7) FAB (WhatsApp/Pfeil) soll nichts überdecken */
.fab-stack { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 1040; }
.section-padding:last-of-type { padding-bottom: 5rem; } /* Platz für FAB */

/* 8) Footer-Links sauber umbrechen */
.site-footer .list-inline-item { display: inline-block; margin-bottom: .25rem; }

/* 9) Lange Wörter/URLs: hübscher Umbruch */
p, li, .card-text { word-break: break-word; hyphens: auto; }

/* 10) Kleine Geräte: kompaktere Abstände & Buttons */
@media (max-width: 576px) {
  .hero-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .btn.btn-lg { padding:.6rem 1rem; font-size:1rem; }
  .u-rounded { border-radius: .75rem; }
}

.logo-craftcodex {
margin: 0 50px;
}
@media (max-width: 576px) {
  .logo-craftcodex {
    margin: 0 110px;
  }
}