/* ===========================================================================
   Elif's Tortenwelt — Design System & Motion (Look: "Schicht für Schicht")
   Beere · Pistazie · Creme · Gold — modern, vibrant, festlich.
   =========================================================================== */
:root{
  --cream:#FEF6F0; --surface:#FFFFFF; --surface-soft:#FFFCF9;
  --ink:#2B1521; --ink-soft:#6B4A5A;
  --berry:#D81E6A; --berry-deep:#A01453; --rose:#F7B9D0; --rose-soft:#FCE3EC;
  --pistazie:#5E9E5C; --pistazie-soft:#BFE0B0;
  --gold:#C9962F;
  --border:#F0D9E2;
  --shadow-sm:0 4px 14px -6px rgba(168,20,83,.18);
  --shadow-md:0 18px 50px -22px rgba(168,20,83,.30);
  --shadow-lg:0 40px 90px -40px rgba(80,15,45,.45);
  --focus:var(--berry);
  /* scroll-getriebene Hintergrund-Variablen (von ScrollTrigger gesetzt) */
  --bgHue:340; --bgShift:24%; --bgRot:0deg; --bgHue2:120;
  --maxw:1180px; --pad:clamp(1.1rem,4vw,2.5rem);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --cream:#1B0E16; --surface:#271320; --surface-soft:#2E1726;
    --ink:#F7E9F0; --ink-soft:#C9A9B9;
    --rose-soft:#3A1C2C; --border:#43223360;
    --shadow-sm:0 4px 14px -6px rgba(0,0,0,.5);
    --shadow-md:0 18px 50px -22px rgba(0,0,0,.6);
    --shadow-lg:0 40px 90px -40px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,.font-head{font-family:"Fraunces","Georgia",serif; line-height:1.08; font-weight:600; color:var(--ink); text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:clamp(3.4rem,7vw,7rem); position:relative}
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; font-size:.78rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--berry-deep)}
.eyebrow::before{content:""; width:26px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--gold),var(--berry))}
.h1{font-size:clamp(2.5rem,7vw,5rem)}
.h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.lead{font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--ink-soft); max-width:60ch}
.muted{color:var(--ink-soft)}
.center{text-align:center}
.sec-head{max-width:64ch}
.sec-head.center{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.6rem; font-weight:600; font-size:1rem;
  padding:.95rem 1.7rem; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .4s cubic-bezier(.22,.61,.21,1),box-shadow .4s,background .3s,color .3s; will-change:transform}
.btn svg{width:1.1em;height:1.1em}
.btn-primary{background:linear-gradient(120deg,var(--berry),var(--berry-deep)); color:#fff; box-shadow:var(--shadow-sm)}
.btn-primary:hover{box-shadow:0 16px 40px -14px rgba(168,20,83,.6)}
.btn-ghost{background:color-mix(in srgb,var(--surface) 70%,transparent); color:var(--ink); border-color:var(--border); backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--berry); color:var(--berry-deep)}
.btn-gold{background:linear-gradient(120deg,#E7B852,var(--gold)); color:#3a2a06}

/* ---------- Header / Nav ---------- */
.site-header{position:fixed; inset:0 0 auto 0; z-index:60; transition:background .4s,box-shadow .4s,padding .4s; padding-block:.85rem}
.site-header.scrolled{background:color-mix(in srgb,var(--cream) 82%,transparent); backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 1px 0 var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.brand{display:flex; align-items:center; gap:.6rem; font-family:"Fraunces",serif; font-weight:600; font-size:1.32rem; color:var(--ink)}
.brand svg{width:38px;height:38px;flex:none}
.brand b{color:var(--berry-deep)}
.nav-links{display:flex; align-items:center; gap:.35rem}
.nav-links a{position:relative; padding:.5rem .8rem; border-radius:999px; font-weight:500; font-size:.96rem; color:var(--ink); transition:color .25s,background .25s}
.nav-links a::after{content:""; position:absolute; left:.8rem; right:.8rem; bottom:.32rem; height:2px; background:var(--berry); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .3s}
.nav-links a:hover{color:var(--berry-deep)} .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{margin-left:.4rem}
.burger{display:none; flex-direction:column; gap:5px; width:46px; height:46px; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--border); border-radius:14px; cursor:pointer}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s,opacity .3s}
.mobile-menu{position:fixed; inset:0; z-index:55; background:var(--cream); transform:translateY(-100%); transition:transform .5s cubic-bezier(.7,0,.2,1); display:flex; flex-direction:column; justify-content:center; gap:.4rem; padding:6rem var(--pad) 2rem; pointer-events:none}
.mobile-menu.open{transform:translateY(0); pointer-events:auto}
.mobile-menu a{font-family:"Fraunces",serif; font-size:clamp(1.6rem,7vw,2.4rem); padding:.4rem 0; color:var(--ink); border-bottom:1px solid var(--border)}
.mobile-menu a:last-of-type{border:0}
@media (max-width:920px){ .nav-links,.nav-cta{display:none} .burger{display:flex} }

/* ---------- Background scene (permanent + scroll-coupled) ---------- */
.bg-scene{position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(55% 55% at var(--bgShift,24%) 18%, hsl(var(--bgHue,340) 85% 78% / .55), transparent 70%),
    radial-gradient(50% 50% at 85% 30%, hsl(var(--bgHue2,120) 55% 75% / .40), transparent 72%),
    conic-gradient(from var(--bgRot,0deg) at 70% 85%, hsl(45 90% 78% / .35), transparent 55%),
    var(--cream);
  transition:background .2s linear}
.bg-scene::before{content:""; position:absolute; inset:-20%;
  background:radial-gradient(40% 40% at 30% 70%, hsl(330 90% 80% / .35), transparent 70%);
  animation:auroraDrift 22s ease-in-out infinite; will-change:transform}
@keyframes auroraDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4%,-3%,0) scale(1.12)}}
canvas.bg{position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}
@media (prefers-reduced-motion:reduce){.bg-scene::before{animation:none}}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; isolation:isolate}
.hero-media{position:absolute; inset:0; z-index:-1}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, color-mix(in srgb,var(--cream) 90%,transparent) 0%, color-mix(in srgb,var(--cream) 55%,transparent) 42%, transparent 78%),
            linear-gradient(0deg, color-mix(in srgb,var(--cream) 70%,transparent), transparent 45%)}
.hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center; width:100%; padding-block:7rem 3rem}
.hero-cake{position:relative; aspect-ratio:1/1; max-width:520px; margin-inline:auto; width:100%}
.hero-cake svg{width:100%;height:100%; overflow:visible; filter:drop-shadow(var(--shadow-lg))}
.hero h1 .word{display:inline-block; white-space:nowrap}
.hero h1 .char{display:inline-block; will-change:transform}
.hero .h1{margin:.4rem 0 1.1rem}
.hero .accent{color:var(--berry-deep); font-style:italic}
.scroll-cue{position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.4rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft)}
.scroll-cue i{width:1px; height:34px; background:linear-gradient(var(--berry),transparent); animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}
@media (max-width:880px){ .hero-inner{grid-template-columns:1fr; text-align:center; gap:1rem} .hero-cake{max-width:340px; order:-1} .hero .lead{margin-inline:auto} }

/* ---------- Cards / grids ---------- */
.grid{display:grid; gap:1.5rem}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
.card{background:var(--surface); border:1px solid var(--border); border-radius:1.4rem; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .5s cubic-bezier(.22,.61,.21,1),box-shadow .5s; display:flex; flex-direction:column}
.card:hover{box-shadow:var(--shadow-md)}
.card-media{aspect-ratio:4/3; overflow:hidden; position:relative}
.card-media img{width:100%;height:100%;object-fit:cover; transition:transform .9s cubic-bezier(.22,.61,.21,1)}
.card:hover .card-media img{transform:scale(1.07)}
.card-body{padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.55rem; flex:1}
.card-body h3{font-size:1.25rem}
.tag{position:absolute; top:.8rem; left:.8rem; z-index:2; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:color-mix(in srgb,var(--berry-deep) 88%,transparent); padding:.32rem .7rem; border-radius:999px; backdrop-filter:blur(4px)}
.icon-chip{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:var(--rose-soft);color:var(--berry-deep); flex:none}
.icon-chip svg{width:22px;height:22px}

/* ---------- Feature split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:center}
.split.rev .split-media{order:2}
@media (max-width:860px){.split{grid-template-columns:1fr} .split.rev .split-media{order:0}}
.split-media{position:relative}
.split-media img{width:100%; border-radius:1.6rem 1.6rem 6rem 1.6rem; box-shadow:var(--shadow-md); aspect-ratio:4/5; object-fit:cover}
.media-badge{position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:.9rem 1.1rem; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:.7rem}
@media (max-width:860px){.media-badge{right:8px !important; left:auto}}
.feat-list{display:flex; flex-direction:column; gap:.85rem; margin:1.4rem 0 0; padding:0; list-style:none}
.feat-list li{display:flex; gap:.8rem; align-items:flex-start}
.feat-list svg{width:22px;height:22px;flex:none;color:var(--pistazie); margin-top:2px}

/* ---------- Process infographic ---------- */
.process{position:relative}
.proc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; position:relative; z-index:2}
@media (max-width:820px){.proc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.proc-grid{grid-template-columns:1fr}}
.proc-step{background:var(--surface-soft); border:1px solid var(--border); border-radius:1.3rem; padding:1.6rem 1.4rem; position:relative}
.proc-num{font-family:"Fraunces",serif; font-size:2.4rem; color:var(--berry); line-height:1; opacity:.9}
.proc-line{position:absolute; inset:auto 0 0 0; top:54px; height:60px; width:100%; z-index:1; pointer-events:none}
@media (max-width:820px){.proc-line{display:none}}

/* ---------- Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:color-mix(in srgb,var(--surface) 80%,transparent); border:1px solid var(--border); border-radius:1.3rem; padding:1.6rem 1.3rem; text-align:center; backdrop-filter:blur(6px)}
.stat .num{font-family:"Fraunces",serif; font-size:clamp(2.2rem,4.5vw,3.2rem); color:var(--berry-deep); line-height:1}
.stat .lbl{color:var(--ink-soft); font-size:.95rem; margin-top:.3rem}

/* ---------- Gallery ---------- */
.gal-filter{display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; margin-bottom:2rem}
.gal-filter button{padding:.55rem 1.1rem; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-weight:600; font-size:.92rem; cursor:pointer; transition:all .25s}
.gal-filter button.active,.gal-filter button:hover{background:var(--berry); color:#fff; border-color:var(--berry)}
.gal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
@media (max-width:860px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.gal-grid{grid-template-columns:1fr}}
.gal-item{position:relative; border-radius:1.2rem; overflow:hidden; aspect-ratio:1/1; cursor:pointer; box-shadow:var(--shadow-sm)}
.gal-item img{width:100%;height:100%;object-fit:cover; transition:transform .8s cubic-bezier(.22,.61,.21,1)}
.gal-item:hover img{transform:scale(1.08)}
.gal-item figcaption{position:absolute; inset:auto 0 0 0; padding:1.4rem .9rem .8rem; color:#fff; font-weight:600; background:linear-gradient(transparent,rgba(43,21,33,.78)); transform:translateY(20%); opacity:0; transition:all .4s}
.gal-item:hover figcaption{transform:none; opacity:1}
.lightbox{position:fixed; inset:0; z-index:120; background:rgba(27,14,22,.92); display:none; align-items:center; justify-content:center; padding:2rem; backdrop-filter:blur(6px)}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw; max-height:86vh; border-radius:1rem; box-shadow:var(--shadow-lg)}
.lightbox button{position:absolute; top:1.2rem; right:1.4rem; width:48px;height:48px;border-radius:50%; border:0; background:var(--surface); color:var(--ink); font-size:1.4rem; cursor:pointer}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin-inline:auto; display:flex; flex-direction:column; gap:.8rem}
.faq-item{background:var(--surface); border:1px solid var(--border); border-radius:1.1rem; overflow:hidden}
.faq-q{width:100%; text-align:left; background:none; border:0; padding:1.2rem 1.4rem; font-family:"Fraunces",serif; font-size:1.12rem; font-weight:600; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem}
.faq-q .pm{width:26px;height:26px;flex:none; position:relative; transition:transform .3s}
.faq-q .pm::before,.faq-q .pm::after{content:""; position:absolute; inset:50% 0 auto 0; height:2px; background:var(--berry); border-radius:2px}
.faq-q .pm::after{transform:rotate(90deg); transition:transform .3s}
.faq-item.open .pm::after{transform:rotate(0)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s ease; color:var(--ink-soft)}
.faq-a div{padding:0 1.4rem 1.3rem}

/* ---------- Form ---------- */
.form-card{background:var(--surface); border:1px solid var(--border); border-radius:1.6rem; padding:clamp(1.5rem,4vw,2.6rem); box-shadow:var(--shadow-md)}
.field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem}
.field label{font-weight:600; font-size:.92rem}
.field input,.field select,.field textarea{font:inherit; padding:.8rem 1rem; border:1.5px solid var(--border); border-radius:.8rem; background:var(--surface-soft); color:var(--ink); transition:border-color .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--berry)}
.field textarea{resize:vertical; min-height:120px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 1.1rem}
@media (max-width:560px){.form-grid{grid-template-columns:1fr}}
.note{font-size:.85rem; color:var(--ink-soft)}

/* ---------- CTA band ---------- */
.cta-band{position:relative; border-radius:2rem; overflow:hidden; padding:clamp(2.5rem,6vw,4.5rem); text-align:center; color:#fff;
  background:linear-gradient(120deg,var(--berry-deep),var(--berry) 55%,#E7568F)}
.cta-band h2{color:#fff}
.cta-band .lead{color:rgba(255,255,255,.9); margin-inline:auto}
.cta-band::after{content:""; position:absolute; inset:0; background:radial-gradient(40% 60% at 80% 20%,rgba(255,255,255,.25),transparent 70%); pointer-events:none}

/* ---------- Contact ---------- */
.contact-card{background:var(--surface); border:1px solid var(--border); border-radius:1.3rem; padding:1.5rem; display:flex; gap:1rem; align-items:flex-start; box-shadow:var(--shadow-sm)}
.map-svg{width:100%; border-radius:1.4rem; box-shadow:var(--shadow-md); border:1px solid var(--border); background:var(--surface)}

/* ---------- Footer ---------- */
.site-footer{position:relative; z-index:2; background:color-mix(in srgb,var(--ink) 96%,#000); color:#F4DCE7; margin-top:4rem; padding-top:3.4rem}
.site-footer a{color:#F4DCE7}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:2rem; max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad) 2.4rem}
@media (max-width:760px){.footer-top{grid-template-columns:1fr; gap:1.6rem}}
.footer-top h4{color:#fff; font-family:"Fraunces",serif; font-size:1rem; letter-spacing:.04em; margin:0 0 .9rem; text-transform:uppercase}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.footer-col a{opacity:.82; transition:opacity .2s,color .2s} .footer-col a:hover{opacity:1; color:var(--rose)}
.footer-brand p{opacity:.8; max-width:34ch}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14); margin-top:1rem; padding:1.3rem var(--pad); max-width:var(--maxw); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; color:#E9C9D7}
.footer-bottom .legal{display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.9rem}
.footer-bottom .legal a{opacity:.8} .footer-bottom .legal a:hover{opacity:1}
.demo-hint{font-size:.78rem; opacity:.55; text-align:center; padding:.4rem var(--pad) 1.4rem; max-width:var(--maxw); margin-inline:auto}

/* ---------- Preloader ---------- */
#preloader{position:fixed; inset:0; z-index:200; background:var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem}
#preloader .pl-cake{width:96px;height:96px}
#preloader .pl-cake path,#preloader .pl-cake rect,#preloader .pl-cake ellipse{}
#preloader .pl-word{font-family:"Fraunces",serif; font-size:1.1rem; letter-spacing:.18em; text-transform:uppercase; color:var(--berry-deep)}

/* ---------- Reveal base (failsafe: visible if no JS/GSAP) ---------- */
.no-anim [data-reveal]>*,.no-anim [data-split],.no-anim [data-depth],.no-anim [data-fade]{opacity:1 !important; transform:none !important}
@media (prefers-reduced-motion:reduce){
  .bg-scene,.bg-scene::before{animation:none !important}
  [data-reveal]>*,[data-split],[data-depth],[data-fade]{opacity:1 !important; transform:none !important}
}
[data-tilt]{transform-style:preserve-3d}
.section-dark{background:color-mix(in srgb,var(--ink) 97%,#000); color:#F6E4EC}
.section-dark .h2,.section-dark h2,.section-dark h3{color:#fff}
.section-dark .lead,.section-dark .muted{color:#E7C9D6}
.section-dark .stat{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}
.section-dark .stat .num{color:var(--rose)}

/* pill chips */
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{font-size:.85rem; font-weight:600; padding:.4rem .85rem; border-radius:999px; background:var(--rose-soft); color:var(--berry-deep)}

/* ---------- Sub-page hero ---------- */
.subhero{position:relative; min-height:60svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; padding:9rem 0 3.2rem}
.subhero .hero-media{position:absolute; inset:0; z-index:-1}
.subhero .hero-media img{width:100%;height:100%;object-fit:cover}
.subhero .hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, color-mix(in srgb,var(--cream) 92%,transparent), color-mix(in srgb,var(--cream) 45%,transparent) 55%, color-mix(in srgb,var(--cream) 30%,transparent))}
.subhero h1{font-size:clamp(2.3rem,6vw,4.2rem); margin:.4rem 0 .8rem}
.subhero .lead{max-width:54ch}
.breadcrumb{font-size:.85rem; color:var(--ink-soft); margin-bottom:.4rem}
.breadcrumb a{color:var(--berry-deep)}

/* ---------- Prose ---------- */
.prose{max-width:68ch}
.prose p{margin:0 0 1.1rem; color:var(--ink-soft); font-size:1.06rem}
.prose p strong{color:var(--ink)}

/* ---------- Story timeline ---------- */
.timeline{position:relative; max-width:780px; margin-inline:auto; padding-left:2.2rem}
.timeline::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--berry),var(--gold))}
.tl-item{position:relative; margin-bottom:2rem}
.tl-item::before{content:""; position:absolute; left:-2.2rem; top:4px; width:16px; height:16px; border-radius:50%; background:var(--berry); border:3px solid var(--cream); box-shadow:0 0 0 2px var(--berry)}
.tl-item h3{font-size:1.25rem; margin:0 0 .3rem}

/* ---------- Value cards ---------- */
.value{background:var(--surface); border:1px solid var(--border); border-radius:1.3rem; padding:1.7rem 1.5rem; box-shadow:var(--shadow-sm); height:100%}
.value .icon-chip{margin-bottom:1rem}
.value h3{font-size:1.2rem; margin:0 0 .5rem}

/* ---------- Sortiment alt sections ---------- */
.cat-sec{padding-block:clamp(2.5rem,5vw,4.5rem)}

/* ---------- Firmen-Identität ---------- */
.fi-tabs{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.4rem}
.fi-tab{padding:.7rem 1.3rem; border-radius:999px; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; font-weight:600; color:var(--ink); transition:all .25s; text-align:center}
.fi-tab b{display:block; font-family:"Fraunces",serif; font-size:1.05rem}
.fi-tab small{color:var(--ink-soft); font-weight:500}
.fi-tab.active{background:var(--berry); color:#fff; border-color:var(--berry)}
.fi-tab.active small{color:rgba(255,255,255,.85)}
.fi-panel{display:none} .fi-panel.active{display:block}
.fi-desc{text-align:center; max-width:60ch; margin:0 auto 2rem; color:var(--ink-soft)}
.fi-card{background:var(--surface); border:1px solid var(--border); border-radius:1.4rem; padding:1.4rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:1rem}
.fi-prev{height:240px; border-radius:1rem; background:var(--surface-soft); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:1rem}
.fi-prev svg, .fi-prev img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:.5rem}
.fi-card h3{font-size:1.2rem; margin:0}
.fi-dl{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:auto}
.fi-dl a{display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.92rem; padding:.55rem 1rem; border-radius:.7rem; border:1.5px solid var(--border); color:var(--berry-deep); transition:all .2s}
.fi-dl a:hover{background:var(--rose-soft); border-color:var(--berry)}
.fi-dl a.solid{background:var(--berry); color:#fff; border-color:var(--berry)}
.swatches{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem}
.swatch{border:1px solid var(--border); border-radius:1rem; overflow:hidden; background:var(--surface)}
.swatch .col{height:70px}
.swatch .meta{padding:.7rem .9rem; font-size:.82rem; color:var(--ink-soft)}
.swatch .meta b{color:var(--ink); display:block; margin-bottom:.2rem; font-size:.92rem}
.fi-box{background:var(--surface); border:1px solid var(--border); border-radius:1.6rem; padding:clamp(1.5rem,4vw,2.4rem); box-shadow:var(--shadow-sm)}
.dom-table{width:100%; border-collapse:collapse; font-size:.95rem}
.dom-table th,.dom-table td{text-align:left; padding:.7rem .6rem; border-bottom:1px solid var(--border)}
.dom-table th{font-family:"Fraunces",serif; color:var(--ink)}
.st-ok{color:var(--pistazie); font-weight:700} .st-no{color:var(--berry); font-weight:700} .st-q{color:var(--gold); font-weight:700}
.pkg{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem}
@media(max-width:600px){.pkg{grid-template-columns:1fr}}
.pkg li{display:flex; gap:.7rem; align-items:flex-start}
.pkg svg{width:22px;height:22px;flex:none;color:var(--pistazie);margin-top:2px}