:root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }
 :root {
     --brand-yellow: #ffde00;
     --brand-black: #0b0b0b;
     --brand-text: #222;
}
 html {
     scroll-behavior: smooth;
}
 body {
     background: #fff;
     color: var(--brand-text);
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
/* Header */
 .navbar {
     box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 .navbar-brand img {
     height: clamp(28px, 4.2vw, 44px);
     width: auto;
     display: block;
}
 @media (min-width: 1400px){
     .navbar-brand img{
         height:48px;
    }
}
 .nav-link {
     font-weight: 500;
     position: relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:.5rem;
     right:.5rem;
     bottom:.35rem;
     height:2px;
     background:var(--brand-yellow);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .25s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
 .btn-brand {
     --bs-btn-bg: var(--brand-yellow);
     --bs-btn-border-color: var(--brand-yellow);
     --bs-btn-color: var(--brand-black);
     font-weight:600;
}
/* ========= FANCY HERO ========= */
 .hero {
     position: relative;
     color: var(--brand-black);
     overflow: hidden;
     display: flex;
     align-items: center;
     padding: 3.75rem 0 3rem;
     min-height: clamp(560px, 70vh, 860px);
     background: radial-gradient(1200px 600px at -10% 0%, rgba(255,240,120,.55) 0%, rgba(255,240,120,0) 60%), radial-gradient(900px 500px at 110% 30%, rgba(255,232,77,.45) 0%, rgba(255,232,77,0) 60%), var(--brand-yellow);
}
 @media (min-width: 992px){
     .hero{
         padding: 4.25rem 0 4.25rem;
    }
}
 @media (min-width: 1400px){
     .hero{
         padding-bottom: 5.75rem;
    }
}
 .hero-title {
     font-family:'Space Grotesk','Inter',sans-serif;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -.01em;
}
 .hero-title .highlight {
     background: linear-gradient(to top, rgba(255,255,255,.9) 36%, transparent 36%);
     display:inline;
     box-decoration-break:clone;
}
 .hero-lead {
     color: rgba(0,0,0,.78);
}
 .btn-ink {
     background: var(--brand-black);
     border-color: var(--brand-black);
     color:#fff;
     font-weight:700;
     border-radius:.75rem;
}
 .btn-ink:hover {
     background:#111;
     border-color:#111;
}
 .btn-ghost {
     border:2px solid rgba(0,0,0,.85);
     color:var(--brand-black);
     font-weight:700;
     background:transparent;
     border-radius:.75rem;
}
 .btn-ghost:hover {
     background:rgba(0,0,0,.08);
}
 .features {
     position: relative;
     z-index: 2;
}
 .hero-visual {
     position: relative;
     perspective: 1000px;
}
 .blob {
     position:absolute;
     right:-18px;
     bottom:-18px;
     z-index:0;
     width: 68%;
     max-width: 380px;
     aspect-ratio: 1/1;
     background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.0) 60%), radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,.0) 70%), rgba(255,230,70,.85);
     filter: blur(24px) saturate(1.1);
     border-radius: 50% 60% 45% 55% / 55% 45% 60% 50%;
     transform: rotate(-8deg);
}
 .tilt-card {
     position: relative;
     z-index:1;
     border-radius: 1rem;
     overflow: hidden;
     border: 6px solid #fff;
     box-shadow: 0 16px 40px rgba(0,0,0,.18);
     transform-style: preserve-3d;
     transition: transform .2s ease, box-shadow .2s ease;
     will-change: transform;
     max-width: 420px;
     margin-inline:auto;
     animation: bob 8s ease-in-out infinite;
     background: #fff;
}
 .tilt-card img {
     width:100%;
     height:auto;
     display:block;
}
 .shine {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
     mix-blend-mode: screen;
     transform: translateX(-30%) rotate(8deg);
     animation: shine 5.5s ease-in-out infinite;
}
 @keyframes shine {
     0% {
         transform: translateX(-40%) rotate(8deg);
    }
     45% {
         transform: translateX(140%) rotate(8deg);
    }
     100% {
         transform: translateX(140%) rotate(8deg);
    }
}
 @keyframes bob {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-6px)
    }
}
 .hero-wave {
     position: absolute;
     left:0;
     right:0;
     bottom:-1px;
     line-height:0;
     z-index:0;
}
 .hero-wave svg {
     display:block;
     width:100%;
     height:auto;
}
 .hero-wave path {
     fill:#fff;
}
/* ===== Über uns – mobile-first fancy ===== */
.about{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}
.about .kicker{ display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#6b7280; }
.about .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.4rem, 4.8vw, 2.2rem); margin:.25rem 0 .35rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about .about-title:after{
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about .about-sub{ color:#374151; max-width:56ch; margin:.75rem 0 1.1rem; }

/* USP Checklist */
.about .usp-list{
  list-style:none; padding:0; margin:0 0 1.1rem; display:grid; gap:.55rem;
}
.about .usp-list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.55; }
.about .usp-list i{
  color:#111; background:var(--brand-yellow); border-radius:.6rem; padding:.25rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Trust Stats */
.about .stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.65rem; margin: .5rem 0 1.25rem;
}
.about .stat{
  background:#fff; border:1px solid #eee; border-radius:.9rem; padding:.75rem .8rem;
  box-shadow:0 8px 22px rgba(0,0,0,.05); text-align:center;
}
.about .stat .num{
  font-weight:900; letter-spacing:-.02em; font-size: clamp(1rem, 4.2vw, 1.35rem); color:#111;
}
.about .stat .label{ color:#6b7280; font-size:.85rem; }

/* Steps (horizontal scroll, thumbs) */
.about-steps{ position:relative; margin:.5rem 0 1.25rem; }
.about .steps-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.about .steps-scroller::-webkit-scrollbar{ display:none; }
.about .step{
  scroll-snap-align:start; background:#fff; border:1px solid #eee; border-radius: .9rem;
  padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  flex:0 0 auto;
}
.about .step-icon{
  width:34px; height:34px; border-radius:.7rem; display:grid; place-items:center;
  background: var(--brand-yellow); color:#111; font-size:1rem;
}
.about .step-text{ white-space:nowrap; font-weight:700; }
.about .steps-fade{ position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.about .steps-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.about .steps-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* Visual (right) */
.about-visual{ position:relative; width:100%; max-width:520px; }
.about-visual .blob.b1{
  position:absolute; right:-8%; bottom:-6%;
  width:64%; aspect-ratio:1/1; border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}
.about-visual .stack{ position:relative; z-index:1; }
.about-visual .shot{
  border-radius:1.2rem; overflow:hidden; border:6px solid #fff; background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.14); transition: transform .28s ease, box-shadow .28s ease; cursor: zoom-in;
}
.about-visual .shot:hover{ transform: translateY(-3px); box-shadow:0 24px 52px rgba(0,0,0,.18); }
.about-visual .shot .frame{ aspect-ratio: 4 / 3; width:100%; }
.about-visual .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-visual .card-a{ transform: rotate(-2.2deg); }
.about-visual .card-b{ transform: translate(10%, -14%) rotate(2deg); }
.about-visual .floating-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Spacing tweaks */
@media (min-width: 992px){
  .about .about-sub{ margin-bottom:1.25rem; }
  .about .stats{ gap:.9rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-visual .shot, .about-visual .card-a, .about-visual .card-b{ transition:none; transform:none; }
}

/* Reuse your reveal animation timing */
.about .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about .reveal.show{ opacity:1; transform: translateY(0); }

/* ===== Über uns – Storytelling Variante ===== */
.about.story{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.08), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.06), transparent 60%),
    #fff;
}

/* Head */
.about.story .about-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 5vw, 2.2rem); margin:.25rem 0 .5rem; color:var(--brand-black);
  position:relative; display:inline-block;
}
.about.story .about-title:after{
  content:""; position:absolute; left:0; bottom:-8px; width:92px; height:6px;
  background: linear-gradient(90deg, var(--brand-yellow), #ffe666);
  border-radius:6px;
}
.about.story .about-sub{ color:#374151; max-width:65ch; }

/* Founder Quote */
.founder-quote{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06); margin: .9rem 0 1.25rem;
}
.founder-quote p{ margin:0; font-size:1.05rem; line-height:1.65; }
.founder-quote footer{ margin-top:.35rem; color:#6b7280; font-size:.9rem; }

/* Timeline (mobile-first: vertikal) */
.timeline{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; gap:1rem;
}
.timeline .milestone{
  position:relative; background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:.9rem 1rem 1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); padding:.2rem .5rem; border-radius:.5rem; margin-bottom:.35rem;
}
.timeline .title{ font-weight:800; margin:.15rem 0 .2rem; }
.timeline .desc{ color:#6b7280; margin:0; }
.timeline .dot{
  position:absolute; left:-18px; top:18px; width:10px; height:10px; border-radius:999px;
  background:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

/* Timeline – Desktop: linke Linie */
@media (min-width: 992px){
  .timeline{ margin-left:1.25rem; }
  .timeline::before{
    content:""; position:absolute; left:-14px; top:0; bottom:0; width:2px; background:#eee;
  }
}

/* Archiv-Stack (2 alte Fotos) */
.archive-stack{ position:relative; width:100%; max-width:520px; }
.archive-stack .polaroid{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding: .65rem .65rem .9rem; /* Platz für Caption */
  box-shadow:0 16px 44px rgba(0,0,0,.12);
  transform-origin: center;
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: zoom-in;
}
.archive-stack .polaroid .frame{ aspect-ratio: 4/3; width:100%; overflow:hidden; border-radius:8px; }
.archive-stack .polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }

.archive-stack .polaroid .caption{
  margin-top:.5rem; font-weight:700; color:#111; display:flex; align-items:center; gap:.4rem;
}
.archive-stack .polaroid .badge-year{
  display:inline-block; background:var(--brand-yellow); color:#000; font-weight:900; border-radius:.4rem;
  padding:.15rem .4rem; line-height:1;
}

/* leichte, versetzte Komposition */
.archive-stack .p1{ transform: rotate(-2.2deg); }
.archive-stack .p2{ transform: translate(14%, -16%) rotate(2deg); }

.archive-stack .polaroid:hover{ transform: translateY(-3px) rotate(var(--rot, 0deg)); box-shadow:0 24px 56px rgba(0,0,0,.18); }

/* Zusatzchip */
.history-chip{
  position:absolute; right:6%; top:-6%;
  background:#111; color:#fff; border-radius:999px; padding:.5rem .9rem; font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

/* Blob-Hintergrund */
.blob.b-history{
  position:absolute; right:-10%; bottom:-8%; width:68%; aspect-ratio:1/1;
  border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    rgba(255,230,70,.85);
  filter: blur(22px) saturate(1.05);
  transform: rotate(-6deg);
  z-index:0;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .archive-stack .polaroid{ transition:none; transform:none; }
}

/* Reveal (nutzt dein System) */
.about.story .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.about.story .reveal.show{ opacity:1; transform: translateY(0); }










/* Marken – cleaner Slider */
.brands{ background:transparent; padding: clamp(1.2rem, 4vw, 2rem) 0; border-bottom:1px solid #f3f4f6; }

/* Viewport: Fades am Rand via Mask */
.brand-viewport{
  --gap: clamp(12px, 2vw, 20px);
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Track */
.brand-track{
  display:flex; align-items:center; gap: var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding: .25rem 4px .5rem;
}
.brand-track::-webkit-scrollbar{ height:6px; }
.brand-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }

/* Slides – mobil max. 2, sonst mehr */
.brand-slide{
  flex: 0 0 calc(50% - var(--gap)/2);   /* 2 auf XS */
  height: clamp(74px, 10vw, 96px);
  padding: clamp(10px, 1.6vw, 14px);
  display:grid; place-items:center;
  scroll-snap-align:start; text-decoration:none;
  border:1px solid rgba(0,0,0,.08); border-radius:14px; background:transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width:576px){ .brand-slide{ flex: 0 0 calc(33.333% - var(--gap)*2/3); } } /* 3 */
@media (min-width:768px){ .brand-slide{ flex: 0 0 calc(25% - var(--gap)*3/4); } }   /* 4 */
@media (min-width:992px){ .brand-slide{ flex: 0 0 calc(16.666% - var(--gap)*5/6); } }/* 6 */
.brand-slide:hover, .brand-slide:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.16);
  outline:none;
}


/* Logos: grau → farbig */
.brand-slide img{
  max-width: 78%; max-height: 68%;
  object-fit: contain; display:block;
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .25s ease, transform .25s ease;
}
.brand-slide:hover img, .brand-slide:focus-visible img{ filter:none; transform: translateY(-1px); }

/* Pfeile: overlay, mittig */
.brand-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:grid; place-items:center; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease;
}
.brand-prev{ left:6px; } .brand-next{ right:6px; }
.brand-arrow:hover{ transform: translateY(-50%) scale(1.03); border-color:rgba(0,0,0,.2); }
.brand-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .brand-track, .brand-slide, .brand-slide img, .brand-arrow{ transition:none; }
}

/* 1) Logos & Slides größer */
#marken .brand-slide{
  height: clamp(88px, 11.5vw, 112px);
  padding: clamp(12px, 1.8vw, 16px);
}
#marken .brand-slide img{
  max-width: 86%;
  max-height: 78%;
}

/* 2) Scrollbar komplett ausblenden (alle Browser) */
#marken .brand-track{
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#marken .brand-track::-webkit-scrollbar{
  display: none;              /* WebKit */
}

/* 3) Pfeile etwas deutlicher */
#marken .brand-arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  font-size: 1.05rem;         /* Icon minimal größer */
}
#marken .brand-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(0,0,0,.28);
}


/* (optional) Rand-Fade minimal verbreitern, damit größere Slides nicht „hart“ auslaufen */
#marken .brand-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent);
}
















/* ===== Vertrieb / Distribution – Logos zentriert & leicht verkleinert ===== */
#vertrieb.distribution{
  position:relative;
  background:
    radial-gradient(110% 90% at -10% -10%, rgba(255,222,0,.08), transparent 60%),
    radial-gradient(80% 70% at 110% 110%, rgba(255,222,0,.05), transparent 60%),
    #fff;
}

/* Textbereich */
#vertrieb .dist-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin:.25rem 0 .35rem;
}
#vertrieb .dist-sub{ color:#4b5563; margin:0 0 .9rem; max-width:62ch; }
#vertrieb .dist-list{ list-style:none; padding:0; margin:.5rem 0 1.1rem; display:grid; gap:.5rem; }
#vertrieb .dist-list i{ background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem; }

/* Grid-Struktur */
#vertrieb .dist-grid{
  --gap: clamp(12px, 2.2vw, 18px);
  --h-xl: clamp(170px, 22vw, 220px);
  --h-md: clamp(140px, 17vw, 180px);
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #vertrieb .dist-grid{ grid-template-columns: repeat(6, 1fr); }
  #vertrieb .card--xl{ grid-column: span 3; height: var(--h-xl); }
  #vertrieb .card--md{ grid-column: span 2; height: var(--h-md); }
}

/* Kartenbasis */
#vertrieb .dist-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
#vertrieb .dist-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

/* Logo-Bereich: leicht verkleinert & perfekt zentriert */
#vertrieb .dist-media{
  position:relative;
  width:100%;
  display:grid; place-items:center;
  background: radial-gradient(80% 70% at 50% 30%, #fff, #fafafa);
  border-radius:12px;
  padding: clamp(8px, 2vw, 12px);
  overflow:hidden;
}
#vertrieb .dist-media::before{
  content:""; display:block; width:100%;
}
#vertrieb .dist-media img{
  position:absolute;
  inset:0; margin:auto;
  width:auto; height:auto;
  max-width:80%;   /* vorher 92% → jetzt etwas kleiner */
  max-height:70%;  /* vorher 80% → ebenfalls kleiner */
  object-fit:contain;
  filter: grayscale(100%) contrast(1.05) opacity(.95);
  transition: filter .25s ease, transform .25s ease;
}
#vertrieb .dist-card:hover .dist-media img{
  filter:none;
  transform:translateY(-2px) scale(1.02);
}

/* Caption */
#vertrieb .dist-cap{
  margin-top:.55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:800; color:#111; font-size:.95rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  padding:.38rem .7rem; border-radius:999px;
}

/* Desktop-Chip-Stil */
@media (min-width: 992px){
  #vertrieb .dist-media::before{ aspect-ratio:4/3; }
  #vertrieb .dist-cap{
    position:absolute; left:10px; right:10px; bottom:10px;
    margin-top:0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(6px);
  }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #vertrieb .dist-card, #vertrieb .dist-media img{ transition:none; }
}







/* ==== Fix: Vertrieb-Logos sind mobil zu klein ==== */
@media (max-width: 991.98px){
  /* gib dem Medienbereich eine echte Höhe via Aspect Ratio */
  #vertrieb .dist-media::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;   /* sorgt mobil für stabile Höhe */
  }

  /* Logos dürfen fast die gesamte Fläche nutzen */
  #vertrieb .dist-media{
    padding: 10px;         /* etwas Innenabstand, damit nichts klebt */
  }
  #vertrieb .dist-media img{
    position:absolute;     /* bleibt zentriert */
    inset: 0;
    margin:auto;
    max-width: 96%;
    max-height: 96%;       /* vorher 70% -> deutlich größer */
    filter: grayscale(100%) contrast(1.05) opacity(.95);
  }

  /* Karten wirken dadurch automatisch höher – optional etwas mehr „Luft“ */
  #vertrieb .dist-card{
    padding: 14px;
  }
}


















/* ===== Abholmarkt / Cash & Carry ===== */
.pickup{
  background:
    radial-gradient(120% 90% at -10% -10%, rgba(255,222,0,.10), transparent 60%),
    radial-gradient(90% 70% at 110% 110%, rgba(255,222,0,.06), transparent 60%),
    #fff;
}

.pickup-head{ margin-bottom: clamp(1rem, 3.5vw, 1.6rem); }
.pickup-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#0b0b0b; font-size: clamp(1.35rem, 3.4vw, 2rem); margin:.2rem 0 .35rem;
}
.pickup-sub{ color:#4b5563; max-width: 62ch; }

/* Grid: mobile 1 Spalte, ab lg 2 Spalten */
.pickup-grid{
  display:grid; gap: clamp(12px, 2.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .pickup-grid{ grid-template-columns: 1.1fr .9fr; align-items: stretch; }
}

/* Brand-Card links */
.pickup-card{
  position: relative; background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
  display:grid; grid-template-rows: auto 1fr; /* media on top */
}
.pickup-card--brand{ isolation:isolate; }

.pm-ribbon{
  position:absolute; left:12px; top:12px; z-index:3;
  background:#0b0b0b; color:#fff; font-weight:900; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:10px; font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.pm-ribbon i{ margin-right:.35rem; }

/* Logo Bühne */
.pm-media{
  position:relative; background: var(--brand-yellow);
  display:grid; place-items:center; padding: clamp(10px, 2.5vw, 16px);
  min-height: clamp(200px, 36vw, 320px);
  overflow:hidden;
}
.pm-media::after{
  content:""; position:absolute; inset:auto 8% 8% 8%; height:32%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0));
  filter: blur(10px); z-index:0;
}
.pm-media img{
  width: clamp(62%, 72%, 80%); height:auto; display:block; object-fit:contain; z-index:1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  transition: transform .35s ease;
}
@media (hover:hover){
  .pm-media:hover img{ transform: translateY(-3px) scale(1.02); }
}

/* Info & Actions */
.pm-info{
  padding: clamp(12px, 2.6vw, 18px);
  display:grid; gap:.65rem; background:#fff;
}
.pm-row{ display:flex; gap:.65rem; align-items:flex-start; }
.pm-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-copy{ margin-top:.1rem; } /* übernimmt .ct-copy Styles */

/* Buttons zweireihig auf Mobile, nebeneinander auf >=sm */
.pm-actions{ display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top:.2rem; }
@media (min-width:576px){ .pm-actions{ grid-template-columns: 1fr 1fr; } }

/* Features rechts */
.pickup-features{
  background:#fff; border:1px solid #eee; border-radius:18px; padding: clamp(12px, 2.6vw, 18px);
  box-shadow:0 14px 32px rgba(0,0,0,.06); display:grid; align-content:start; gap:.8rem;
}
.pm-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.pm-list li{ display:flex; gap:.55rem; align-items:flex-start; color:#374151; }
.pm-list i{
  background:#ffde00; color:#000; border-radius:.55rem; padding:.22rem; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); flex:0 0 auto;
}

/* Chiprow */
.pm-chiprow{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem;
}
.pm-chip{
  background:#fff; border:2px solid #eee; color:#111; border-radius:999px; padding:.4rem .7rem; font-weight:800;
  display:inline-flex; align-items:center; gap:.35rem; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.pm-chip i{ font-size:1.05rem; }
.pm-chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e4e4e7; }

.pm-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-media img, .pm-chip{ transition:none; }
}

/* ===== Abholmarkt – attraktive rechte Spalte ===== */

/* Badgebar */
.pm-badgebar{
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.35rem;
}
.pm-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:900; letter-spacing:.01em;
  background: #111; color:#fff; border:1px solid rgba(255,255,255,.06);
  padding:.42rem .6rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.pm-badge i{ font-size:1.05rem; }

/* Featurecard */
.pm-featurecard{
  background:#fff; border:1px solid #eee; border-radius:14px; padding: .9rem 1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.pm-cardtitle{
  margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; color:#0b0b0b;
  font-size:1.05rem; display:flex; align-items:center;
}
.pm-cardtitle i{ color:#111; }

/* Hours Card */
.pm-hours{
  position:relative;
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,.18), transparent 60%),
    #fff;
  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding: .85rem 1rem;
}
.pm-hours-head{ display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.pm-hours-head i{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.pm-hours-grid{ display:grid; gap:.28rem; }
.pm-hours-grid .row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px dashed #eee; border-radius:10px; padding:.4rem .6rem;
}
.pm-hours-grid .row.is-closed strong{ color:#b91c1c; }
.pm-hours-note{ margin-top:.35rem; font-size:.9rem; color:#6b7280; display:flex; gap:.4rem; align-items:center; }

/* Mini Gallery */
.pm-gallery-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem;
}
.pm-thumb{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-thumb .frame{ aspect-ratio: 4/3; }
.pm-thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.pm-thumb figcaption{ font-weight:800; padding:.35rem .4rem; font-size:.9rem; }
.pm-thumb:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

/* Chiprow bleibt, aber mit dichterem Rhythmus auf Mobile */
.pm-chiprow{ margin-top:.2rem; }
@media (max-width:575.98px){
  .pm-chiprow{ gap:.4rem; }
}


/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .pm-thumb{ transition:none; }
}















/* ===== Team ===== */
.team { background:
  radial-gradient(110% 90% at 0% 0%, rgba(255,222,0,0.05), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
  #fff;
}
.team-head .team-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .35rem; color:var(--brand-black);
}
.team-head .team-sub{ color:#4b5563; max-width: 62ch; }

.person{
  height:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  border-color:#e9e9e9;
}

.person .avatar{
  width:84px; height:84px; margin: .25rem auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,232,77,.6), rgba(255,232,77,0) 70%),
    var(--brand-yellow);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 0 0 6px #fff;
  color:#000;
}
.person .avatar span{ font-size:1.2rem; }

.person .name{
  font-weight:800; margin:0; color:#111; font-size:1rem;
}
.person .role{
  margin:.15rem 0 0; color:#6b7280; font-weight:600; font-size:.95rem;
}

/* Feinjustierung für größere Screens */
@media (min-width: 992px){
  .person{ padding:1.15rem 1.1rem; }
  .person .avatar{ width:92px; height:92px; }
  .person .avatar span{ font-size:1.25rem; }
}















/* Sortiment (Catalog) */
 .catalog {
     position:relative;
     background: #fff;
}
 .catalog .section-head {
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:1rem;
}
 .catalog .section-head h2 {
     font-weight:800;
     letter-spacing:-.02em;
     margin-bottom:.25rem;
}
 .catalog .chips {
     display:flex;
     flex-wrap:wrap;
     gap:.5rem;
}
 .catalog .chip {
     background:#fff;
     border:1px solid #eee;
     color:#222;
     padding:.4rem .75rem;
     border-radius:999px;
     font-weight:600;
     font-size:.9rem;
     transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
 .catalog .chip:hover {
     transform: translateY(-1px);
     box-shadow:0 4px 12px rgba(0,0,0,.06);
     border-color:#e4e4e7;
}
 .catalog .card {
     border:1px solid #eee;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
     background:#fff;
}
 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow:0 12px 30px rgba(0,0,0,.10);
}
 .catalog .card-img-top {
     aspect-ratio: 3 / 2;
     object-fit: cover;
}
 .catalog .card-body {
     padding:1rem 1rem 1.25rem;
}
 .catalog .badge-cat {
     background: var(--brand-yellow);
     color:#000;
     font-weight:800;
}
 .catalog .meta {
     color:#6b7280;
     font-size:.9rem;
}
/* reveal-on-scroll */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s ease;
}
 .reveal.show {
     opacity: 1;
     transform: translateY(0);
}

/* ===== Helpers ===== */
.section-pad{ padding: 3rem 0; }
@media (min-width: 992px){ .section-pad{ padding: 4rem 0; } }
.kicker{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; color:#6b7280;
}

/* ===== Sortiment – Head ===== */
.catalog-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.catalog-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.35rem, 3.2vw, 2rem); margin: .2rem 0 .25rem;
}
.catalog-sub{ color:#4b5563; margin:0; }

/* ===== Kategorie-Chips (horizontal scroll) ===== */
.chip-row{ position:relative; margin: .75rem 0 1.25rem; }
.chip-scroller{
  display:flex; gap:.5rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.25rem;
  -webkit-overflow-scrolling: touch;
}
.chip-scroller::-webkit-scrollbar{ display:none; }
.chip{
  scroll-snap-align:start; white-space:nowrap;
  border:2px solid #eee; background:#fff; color:#111; text-decoration:none;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06); border-color:#e5e5e5; }
.chip.active{ border-color: var(--brand-yellow); box-shadow: 0 0 0 .15rem rgba(255,222,0,.35); }
.chip-fade{ position:absolute; top:0; bottom:0; width:36px; pointer-events:none; }
.chip-fade.left{ left:-2px;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.chip-fade.right{ right:-2px; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

/* ===== Karten ===== */
.cat-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:1rem; overflow:hidden; isolation:isolate;
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); border-color:#e9e9e9; }

.cat-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; }
.cat-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
.cat-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02);
  transition: transform .6s ease;
}
.cat-card:hover .cat-media img{ transform: scale(1.06); }

.cat-body{ padding: 1rem 1rem 1.1rem; display:grid; gap:.5rem; }
.cat-topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.15rem;
}
.cat-badge{
  background: var(--brand-yellow); color:#000; font-weight:800; font-size:.85rem;
  padding:.35rem .6rem; border-radius:.6rem;
}
.cat-title{
  font-weight:800; letter-spacing:-.015em; margin:0;
  font-size: clamp(1rem, 2.6vw, 1.05rem);
}
.cat-text{ color:#6b7280; margin:0; font-size:.95rem; }
.cat-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.2rem; }
.cat-link{
  font-weight:700; color:#111; text-decoration:none;
  display:inline-flex; align-items:center; gap:.15rem;
}
.cat-link:hover{ text-decoration:underline; }

/* kleine Corner-Icone rechts oben */
.icon{ opacity:.45; }

/* ===== Farbthemen je Kategorie (Akzentglow auf Bildkante) ===== */
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,222,0,.9), rgba(0,0,0,0));
}
.cat-card[data-theme="teal"]   .cat-badge{ background: #bbf7d0; }  /* Mint */
.cat-card[data-theme="amber"]  .cat-badge{ background: #fde68a; }  /* Amber */
.cat-card[data-theme="blue"]   .cat-badge{ background: #bfdbfe; }  /* Blue */
.cat-card[data-theme="rose"]   .cat-badge{ background: #fecdd3; }  /* Rose */
.cat-card[data-theme="green"]  .cat-badge{ background: #d1fae5; }  /* Green */
.cat-card[data-theme="indigo"] .cat-badge{ background: #c7d2fe; }  /* Indigo */
.cat-card[data-theme="purple"] .cat-badge{ background: #e9d5ff; }  /* Purple */
.cat-card[data-theme="orange"] .cat-badge{ background: #fed7aa; }  /* Orange */

/* ===== Mobile Fokus & A11y ===== */
.cat-card:focus-within{ outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ===== Reveal re-using your classes ===== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform: translateY(0); }

















/* ===== Über uns – Story v2 (mobile-first & fancy) ===== */
.about.story.story-v2{
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,222,0,0.06), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(255,222,0,0.05), transparent 60%),
    #fff;
}

/* Grid: 1 Spalte -> ab lg 2 Spalten */
.story-grid{
  display:grid;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 992px){
  .story-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Head & copy tighter */
.story-head .about-title{ margin-bottom:.4rem; }
.story-head .about-sub{ margin-top:.5rem; margin-bottom:.9rem; }

/* Kompakte Founder-Quote */
.story-quote{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.9rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.05);
  margin:.75rem 0 1rem;
}
.story-quote p{ margin:0; line-height:1.6; }
.story-quote strong{ display:block; margin-top:.35rem; color:#6b7280; }

/* Timeline – mobile vertikal, luftiger */
.story-timeline{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.story-timeline li{
  position:relative; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.8rem .9rem; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.story-timeline .year{
  display:inline-block; font-weight:900; letter-spacing:.02em; color:#111;
  background:var(--brand-yellow); border-radius:.45rem; padding:.18rem .5rem; margin-bottom:.25rem;
}
.story-timeline .title{ font-weight:800; margin:.1rem 0 .15rem; }
.story-timeline .desc{ color:#6b7280; margin:0; }

@media (min-width: 992px){
  .story-timeline{ margin-left:.8rem; }
  .story-timeline::before{
    content:""; position:absolute; left:calc(-.8rem - 2px); top:0; bottom:0; width:2px; background:#eee;
  }
}

/* ===== Neue Foto-Collage Struktur (A oben, B/C, D/E) ===== */
.story-photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

/* Ab SM: A breit, darunte 2+2 */
@media (min-width: 576px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-photo.photo-a {
    grid-column: 1 / -1; /* macht es oben breit */
  }

  .story-photo.photo-b,
  .story-photo.photo-c,
  .story-photo.photo-d,
  .story-photo.photo-e {
    grid-column: span 1; /* zwei Spalten */
  }
}

/* Ab LG: schöner Flow, größere Bildwirkung */
@media (min-width: 992px) {
  .story-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}



/* Karten bleiben gleich */
.story-photo{
  position:relative; border:6px solid #fff; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-photo .frame{ width:100%; aspect-ratio: 4/3; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* leichte Varianz der Verhältnisse für Collage */
@media (min-width: 992px){
  .story-photo.photo-a .frame{ aspect-ratio: 3/2; }
  .story-photo.photo-b .frame{ aspect-ratio: 4/5; }
  .story-photo.photo-c .frame{ aspect-ratio: 4/5; }
}

/* Badges/Chip unverändert */
.story-badge{
  position:absolute; left:.6rem; top:.6rem;
  background:var(--brand-yellow); color:#000; font-weight:900;
  padding:.2rem .5rem; border-radius:.5rem; box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.story-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  background:#0b0b0b; color:#fff; font-weight:800; border-radius:999px;
  padding:.35rem .65rem; font-size:.85rem; box-shadow:0 12px 28px rgba(0,0,0,.25);
}


/* Zwei Fotos nebeneinander ab sm; drittes breit */
@media (min-width: 576px){
  .story-photo.is-wide{ grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .story-photo{ transition:none; }
}


/* === Timeline zweispaltig ab lg, ohne Inhalte zu kürzen === */
@media (min-width: 992px){
  .story-timeline{
    column-count: 2;
    column-gap: 1rem;
    margin-left: 0;              /* Linie aus alter Variante entfernen */
  }
  .story-timeline::before{       /* vertikale Linie ausblenden */
    content: none;
  }
  .story-timeline li{
    break-inside: avoid;         /* keine Item-Trennungen */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
  }
}



































/* ===== Contact – Mobile-First ===== */
.ct-contact{ padding: clamp(1.6rem, 4vw, 2.6rem) 0; }
.ct-card{
  background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #efefef; box-shadow:0 14px 38px rgba(0,0,0,.06);
}
.ct-accent{ height:10px; background:linear-gradient(90deg, var(--brand-yellow), #ffe666); }

/* Grid: 1 Spalte -> ab lg 2 */
.ct-grid{ display:grid; grid-template-columns: 1fr; gap:0; }
@media (min-width: 992px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
  .ct-info{ border-left:1px solid #f1f1f1; }
}

.ct-col{ padding: clamp(1rem, 3.6vw, 1.6rem); }
@media (min-width: 992px){ .ct-col{ padding: clamp(1.4rem, 2.6vw, 2rem); } }

.ct-title{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; letter-spacing:-.02em;
  color:var(--brand-black); margin:0 0 .25rem; font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}
.ct-sub{ color:#6b7280; margin:0; font-size: .95rem; }

/* Fields */
.ct-field{ margin-bottom:.8rem; }
.ct-input{
  min-height: 48px; /* große Touch-Targets */
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  padding:.8rem .9rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ct-input:focus{ border-color:#111 !important; box-shadow:0 0 0 .18rem rgba(17,17,17,.08) !important; }
.ct-consent{ margin:.2rem 0 1rem; }

.ct-logo img{
  max-width:160px;
  width:60%;
  height:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}

/* Photo above contact info */
.ct-photo{
  width:30%;
  justify-self: center;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
}
.ct-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}

/* Für mobile: Bild kleiner / Rand */
@media (max-width: 575.98px){
  .ct-photo{ margin-bottom:1rem; border-radius:10px; }
}


.ct-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* Button */
.ct-btn{
  background: var(--brand-black); color:#fff; font-weight:800; border:none;
  border-radius:12px; padding: .95rem 1rem; font-size:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); touch-action: manipulation;
}
.ct-btn:active{ transform: translateY(1px); }

/* Info column */
.ct-info{
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fafafa;
}
.ct-illu{ display:none; margin:0 0 .6rem; }
.ct-illu img{ width:100%; max-width:360px; display:block; margin-inline:auto; }
@media (min-width: 576px){ .ct-illu{ display:block; } } /* auf XS ausgeblendet, spart Platz */

.ct-list{ list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.7rem; }
.ct-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.ct-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: var(--brand-yellow); color:#000; font-size:1.05rem; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.ct-list strong{ display:block; color:#111; font-weight:800; }
.ct-tap{ display:inline-block; padding:.2rem 0; font-weight:700; color:#111; text-decoration:none; }
.ct-tap:hover{ text-decoration:underline; }

/* Primary quick actions – große Buttons für Daumen */
.ct-actions{ display:grid; grid-template-columns: 1fr; gap:.55rem; }
@media (min-width: 576px){ .ct-actions{ grid-template-columns: repeat(3,1fr); } }
.ct-action{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid #e9e9e9; background:#fff; border-radius:12px; padding:.8rem .9rem;
  text-decoration:none; color:#111; font-weight:800;
}
.ct-action i{ font-size:1.05rem; }

/* Copy button */
.ct-copy{
  border:none; background:none; padding:0; margin:.15rem 0 0;
  font-weight:700; color:#111; cursor:pointer; text-align:left;
}
.ct-copy.copied{ color:#16a34a; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* A11y & Motion */
.ct-contact :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  .ct-btn, .ct-action{ transition:none; }
}












/* ===============================
   Fancy Hero – 2 Produktbühnen
   =============================== */
.hero-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pack-showcase {
  position: relative;
  width: clamp(340px, 90%, 740px);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4vw, 36px);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Grundstil für beide Produkte */
.pack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.22));
}

.pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: bottom center;
}

/* Linke Packung (Reis) */
.pack--left {
  width: 42%;
  transform: translateZ(-40px) rotateY(-4deg);
  z-index: 1;
}

/* Rechte Packung (Bakliyat) */
.pack--right {
  width: 55%;
  transform: translateZ(20px) rotateY(3deg) translateY(10px);
  z-index: 2;
}

/* Glow hinter beiden */
.pack::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.18), rgba(0,0,0,0));
  filter: blur(18px);
  z-index: -1;
}

/* Hover-Effekt (Desktop): sanftes Schweben */
@media (hover:hover) {
  .pack:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,.28));
  }
}

/* Mobile: untereinander */
@media (max-width: 575.98px) {
  .pack-showcase {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pack--left, .pack--right {
    width: 68%;
    transform: none;
  }
}



/* ===========================================
   Hero – Produkt Cards (gleich groß & ausbalanciert)
   =========================================== */

.product-duo {
  --gap: clamp(12px, 3vw, 28px);
  width: clamp(360px, 90%, 780px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
  justify-content: center;
  perspective: 1200px;
  z-index: 2;
}

.p-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .4) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  min-height: clamp(300px, 38vw, 420px);
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* beide gleich groß */
.p-card--big {
  min-height: clamp(300px, 38vw, 420px);
}

.p-card img {
  width: 92%;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .18));
  transition: transform .3s ease;
}

/* Bakliyat leicht vergrößern, damit gleich wirkt */
.p-card--big img {
  width: 96%;
}

/* Licht & Halo */
.p-halo {
  position: absolute;
  inset: auto 6% 8% 6%;
  height: 38%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 222, 0, .35), rgba(255, 222, 0, 0));
  filter: blur(10px);
  z-index: -1;
}

.p-ring {
  position: absolute;
  inset: 10% 8% 18% 8%;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
              conic-gradient(from 160deg at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  -webkit-mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  mask: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 58%, #000 59%);
  opacity: .65;
  pointer-events: none;
}

.p-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: .35rem .55rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.p-meta strong {
  color: #0b0b0b;
  font-weight: 800;
}

/* sanftes Hover */
@media (hover:hover) {
  .p-card:hover img {
    transform: scale(1.04);
  }
  .p-card:hover {
    transform: translateY(-6px) rotateX(1.5deg) rotateY(1.5deg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  }
}

/* Mobile untereinander */
@media (max-width: 575.98px) {
  .product-duo {
    grid-template-columns: 1fr;
  }
  .p-card {
    min-height: 280px;
  }
  .p-card img {
    width: 94%;
  }
}



















/* Footer */
 footer {
     background: linear-gradient(180deg, #303030 0%, #1f1f1f 70%, #303030 100%);
     color: #f1f1f1;
}
 footer a {
     color: #e5e7eb;
     text-decoration: none;
}
 footer a:hover {
     color: var(--brand-yellow);
     text-decoration: underline;
}
 .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, var(--brand-yellow) 0%, #ffe84d 100%);
}
 .footer-brand img {
     height: 40px;
}
 :focus-visible {
     outline: 3px solid var(--brand-yellow);
     outline-offset: 2px;
     border-radius: 4px;
}



/* Cookie Consent Card */
.cc-card{ border-radius:14px; overflow:hidden; border:1px solid #efefef; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid #f1f1f1;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(255,222,0,.18), transparent 60%),
    radial-gradient(100% 80% at 110% 110%, rgba(255,222,0,.12), transparent 60%),
    #fff;
}
.cc-logo{ width:120px; height:auto; }
.cc-groups{ display:grid; gap:.8rem; }
.cc-row{ padding:.6rem .3rem; border-bottom:1px dashed #eee; }
.cc-row:last-child{ border-bottom:none; }
.cc-more{ margin-top:.5rem; }
#cookieModal .modal-footer .btn{ font-weight:800; }
#cookieModal .btn-ghost{ border:2px solid rgba(0,0,0,.85); color:#0b0b0b; background:transparent; border-radius:.75rem; }
#cookieModal .btn-ghost:hover{ background:rgba(0,0,0,.08); }

/* Small helpers */
.cc-meta button{ color:#6b7280; }
.cc-meta button:hover{ color:#111; text-decoration:underline; }