/* ============================================================
   Copyright ONLINE NETWORK VISION S.L. — FCN24 GmbH Webseite — 15.10.2026, Stand 20.10.2026 — Kennung dnw-wz-fcn24-20261015
   Gestaltung, Programmcode und Logo nur nach Auftrag nutzbar.

   GESTALTUNGSPRINZIP „Lagerhalle & Etikett":
   Der Auftakt ist ein Förderband, auf dem echte Kisten mit „Waren aller Art" durchlaufen. Am Scanner öffnet
   sich die Kiste und zeigt, was drin ist. Anfassen: ziehen, antippen, Pfeiltasten. Die Seite selbst ist wie
   ein Versandetikett gebaut: kantige Etiketten (kleiner Radius), Stempelschrift, orange Signalmarke.

   FARBEN — gemessen, nicht ausgedacht:
   --signal #FF7800  = Menüfarbe der bisherigen fcn24.de (custom_1397124541583.css: #ff7800)
   --marke  #12171C  = häufigste dunkle Farbe im Lagerhallen-Auftakt (Quantisierung, 13 %)
   --stahl  #939DA5  = Stahlgrau im Auftakt (12 %), --karton #AB8058 = Kartonbraun der Kisten
   KONTRASTE (gerechnet): Tinte #12171C auf #EEF0F1 16,1:1 · Nebentext #4A545E auf #EEF0F1 6,9:1 ·
   Signal-Text #A84E00 auf #EEF0F1 4,9:1 · Tinte auf Orange #FF7800 6,8:1 (Anrufknopf: dunkle Schrift auf Orange) ·
   #E3E7EA auf #12171C 15,2:1 · Orange #FF9A3D auf #12171C 8,4:1
   SCHRIFTEN: Big Shoulders Display (Anzeige, Stempel-/Lagercharakter) + Hanken Grotesk (Text), selbst gehostet.
   ============================================================ */
@font-face{font-family:"Big Shoulders";src:url(fonts/big-shoulders.woff2) format("woff2");font-weight:100 900;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Big Shoulders";src:url(fonts/big-shoulders-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken";src:url(fonts/hanken.woff2) format("woff2");font-weight:100 900;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken";src:url(fonts/hanken-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}

:root{
  --marke:#12171C; --marke-tief:#0B0E11; --marke-2:#1A222B;
  --signal:#FF7800; --signal-tief:#A84E00; --signal-hell:#FF9A3D;
  --stahl:#939DA5; --karton:#AB8058; --karton-hell:#E5D3C1;
  --grund:#EEF0F1; --tinte:#12171C; --tinte-2:#4A545E; --hell:#E3E7EA; --hell-2:#B9C1C8;
  --linie:rgba(18,23,28,.12);
  --glas:rgba(255,255,255,.66); --glasrand:rgba(255,255,255,.8); --glaskante:rgba(255,255,255,.95);
  --licht-1:rgba(147,157,165,.45); --licht-2:rgba(255,120,0,.10); --licht-3:rgba(229,211,193,.55);
  --r:14px; --rk:10px;
  --kopf-h:72px; --ruf-h:64px;
  --schrift-anzeige:"Big Shoulders",Impact,"Arial Narrow",sans-serif;
  --schrift-text:"Hanken",system-ui,sans-serif;
  --fs:clamp(17px,1.05vw + 12px,19px);
}
*{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--grund);color:var(--tinte);font:400 var(--fs)/1.6 var(--schrift-text);overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:-3;background:
 radial-gradient(60vw 50vh at 85% 10%,var(--licht-1),transparent 60%),
 radial-gradient(50vw 45vh at 10% 70%,var(--licht-2),transparent 60%),
 radial-gradient(45vw 40vh at 70% 95%,var(--licht-3),transparent 60%),var(--grund)}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.35;
 background-image:radial-gradient(rgba(18,23,28,.09) .5px,transparent .6px);background-size:3px 3px}
img{max-width:100%;height:auto;display:block} a{color:var(--signal-tief)}
h1,h2,h3{font-family:var(--schrift-anzeige);font-weight:800;line-height:.95;margin:0;color:var(--marke);text-transform:uppercase;letter-spacing:.005em}
h1{font-size:clamp(46px,min(7vw + 14px,11vh),118px)}
h2{font-size:clamp(2.4rem,4.6vw + .8rem,4.6rem)}
h3{font-size:1.6rem;line-height:1}
h1 em,h2 em{font-style:normal;color:var(--signal-tief)}
p{margin:0 0 1em}
.kicker{font:700 .82rem/1.3 var(--schrift-text);letter-spacing:.16em;text-transform:uppercase;color:var(--signal-tief);margin:0 0 .9rem;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:3px;background:var(--signal);flex:none}
.lead{font-size:1.12em;color:var(--tinte-2);max-width:40em}
.abschnitt{padding:clamp(64px,9vw,120px) clamp(16px,5vw,64px);max-width:1220px;margin:0 auto}
.zweispalt{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
.zweispalt>*{min-width:0}
@media (min-width:880px){.zweispalt{grid-template-columns:1.05fr .95fr}}

/* GLAS: Weichzeichner auf ::before, Text bleibt Vektor */
.glas{position:relative;isolation:isolate;border-radius:var(--r)}
.glas::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--glas);
 -webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25);
 border:1px solid var(--glasrand);box-shadow:0 1px 0 var(--glaskante) inset,0 24px 60px -28px rgba(11,14,17,.5)}
.glas::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
 background:linear-gradient(115deg,rgba(255,255,255,.5),transparent 42%,transparent 70%,rgba(255,255,255,.16))}
.glas.-dunkel::before{background:rgba(14,18,22,.72);border-color:rgba(255,255,255,.16);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 30px 70px -30px rgba(0,0,0,.85)}
.glas.-dunkel::after{background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 40%,transparent 72%,rgba(255,255,255,.05))}

/* KNÖPFE: Etiketten-Glas, kleiner Radius (Form folgt dem Etikett im Logo). Signal nur auf .-ruf */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:.8em 1.4em;border-radius:var(--rk);
 font:700 1rem/1.15 var(--schrift-text);text-decoration:none;cursor:pointer;border:0;background:transparent;text-align:center;
 position:relative;isolation:isolate;color:var(--marke);max-width:100%;
 box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 -1px 0 rgba(18,23,28,.08) inset,0 12px 30px -14px rgba(11,14,17,.45)}
.knopf::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(246,247,248,.7));
 -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(18,23,28,.1)}
.knopf.-ruf{color:var(--marke);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -2px 0 rgba(0,0,0,.14) inset,0 16px 36px -12px rgba(255,120,0,.9),0 0 0 1px rgba(168,78,0,.3)}
.knopf.-ruf::before{background:linear-gradient(135deg,#FFA04A,var(--signal) 55%,#F06A00);border-color:rgba(255,255,255,.45);box-shadow:none}
.knopf.-dunkel{color:#F3F4F5;box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 -1px 0 rgba(0,0,0,.3) inset,0 12px 30px -14px rgba(0,0,0,.7)}
.knopf.-dunkel::before{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));border-color:rgba(255,255,255,.26);box-shadow:none}
.knopf svg{width:1.2em;height:1.2em;flex:none}
.knopf small{display:block;font:600 .74rem/1.1 var(--schrift-text);opacity:.85;letter-spacing:.02em}
.knopf .zwei{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
@media (hover:hover) and (pointer:fine){.knopf:hover{transform:translateY(-1px)}}
.knopf:active{transform:translateY(1px)}
:is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}

/* KOPF */
.kopf{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--kopf-h);display:flex;align-items:center;justify-content:space-between;gap:12px;
 padding:0 clamp(14px,3vw,32px);background:rgba(18,23,28,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08);
 box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px;flex:0 1 auto;min-width:0}
.marke .logo-h{position:relative;display:block;flex:none}
.marke img{height:40px;width:auto}
.marke .wort{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.marke .wort b{font:700 .95rem var(--schrift-text);color:#F3F4F5;letter-spacing:.02em}
.marke .wort small{font:500 .8rem var(--schrift-text);color:var(--hell-2)}
.entwurf{position:absolute;left:-8px;top:-12px;font:700 12px/1 var(--schrift-text);letter-spacing:.12em;color:var(--marke);background:#F3F4F5;padding:3px 6px;border-radius:4px}
.menue{display:flex;gap:2px;align-items:center}
.menue a{text-decoration:none;color:#E3E7EA;font:600 .95rem var(--schrift-text);padding:.55em .85em;border-radius:8px;min-height:44px;display:inline-flex;align-items:center}
@media (hover:hover) and (pointer:fine){.menue a:not(.knopf):hover{background:rgba(255,255,255,.08)}}
.menue .knopf{min-height:46px;padding:.55em 1.05em;margin-left:8px;color:var(--marke)}
.menue-knopf{display:none;min-height:44px;min-width:44px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);border-radius:8px;font:700 .95rem var(--schrift-text);color:#F3F4F5;cursor:pointer;padding:0 14px;flex:none}
@media (max-width:75em){
  .menue{position:fixed;top:var(--kopf-h);left:0;right:0;flex-direction:column;align-items:stretch;padding:12px 14px 18px;background:rgba(18,23,28,.97);border-bottom:1px solid rgba(255,255,255,.1);display:none}
  .menue.-offen{display:flex}.menue a{padding:.9em 1em;font-size:1.05rem}.menue .knopf{margin:8px 0 0}
  .menue-knopf{display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:420px){.marke .wort{display:none}}

/* ANRUFLEISTE (Telefon) */
.rufleiste{position:fixed;left:0;right:0;bottom:0;z-index:60;height:calc(var(--ruf-h) + env(safe-area-inset-bottom));padding:8px 10px calc(8px + env(safe-area-inset-bottom));
 display:grid;grid-template-columns:1.3fr 1fr;gap:8px;background:var(--marke);border-top:1px solid rgba(255,255,255,.12)}
.rufleiste a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:var(--rk);text-decoration:none;font:700 1rem var(--schrift-text);color:#F3F4F5}
.rufleiste a svg{width:20px;height:20px;flex:none}
.rufleiste .tel{background:linear-gradient(135deg,#FFA04A,var(--signal) 60%,#F06A00);color:var(--marke)}
.rufleiste .mail{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22)}
@media (min-width:60.0625em){.rufleiste{display:none}:root{--ruf-h:0px}}

/* ===== AUFTAKT mit Förderband ===== */
.auftakt{position:relative;min-height:100svh;padding:calc(var(--kopf-h) + clamp(24px,5vh,64px)) clamp(16px,5vw,64px) 0;display:flex;flex-direction:column;
 background:var(--marke);color:var(--hell);overflow:hidden;isolation:isolate}
.auftakt-bild{position:absolute;inset:0;z-index:-2;background:url(bilder/lager-quer.webp) center 40%/cover no-repeat;animation:fahrt 26s ease-in-out infinite alternate}
@media (max-aspect-ratio:4/5){.auftakt-bild{background-image:url(bilder/lager-hoch.webp);background-position:center top}}
@keyframes fahrt{from{transform:scale(1.1) translate3d(-1.5%,0,0)}to{transform:scale(1.02) translate3d(1%,-1%,0)}}
@media (prefers-reduced-motion:reduce){.auftakt-bild{animation:none}}
.auftakt::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
 linear-gradient(90deg,rgba(12,15,19,.92) 0%,rgba(12,15,19,.62) 42%,rgba(12,15,19,.15) 75%),
 linear-gradient(0deg,rgba(12,15,19,.98) 0%,rgba(12,15,19,.75) 26%,rgba(12,15,19,0) 55%)}
.auftakt-text{max-width:min(760px,100%);position:relative;z-index:2}
.auftakt h1{color:#F7F8F9}
.auftakt h1 em{color:var(--signal-hell)}
.auftakt .kicker{color:var(--signal-hell)}
.auftakt .kicker::before{background:var(--signal-hell)}
.auftakt p.lead{color:#D6DCE1;max-width:34em;margin-top:18px}
.auftakt .knoepfe{margin-top:22px}

/* Förderband */
.foerder{--s:.46;--kiste:clamp(118px,13vw,190px);position:relative;margin:auto calc(-1*clamp(16px,5vw,64px)) 0;padding-top:clamp(70px,9vh,110px);
 height:calc(var(--kiste) + 150px*var(--s)*2.2 + clamp(70px,9vh,110px));touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;z-index:1}
.foerder.-zieht{cursor:grabbing}
.f-gurt,.f-gestell{position:absolute;left:0;right:0;background-repeat:repeat-x;pointer-events:none}
.f-gurt{bottom:calc(262px*var(--s) - 6px*var(--s));height:calc(66px*var(--s));background-image:url(bilder/band-gurt.webp);background-size:calc(423px*var(--s)) 100%}
.f-gestell{bottom:0;height:calc(262px*var(--s));background-image:url(bilder/band-gestell.webp);background-size:calc(423px*var(--s)) 100%}
.f-spur{position:absolute;left:0;right:0;bottom:calc(262px*var(--s) + 54px*var(--s));height:var(--kiste)}
.f-kiste{position:absolute;bottom:0;left:0;width:var(--kiste);height:var(--kiste);will-change:transform;border:0;padding:0;background:none;cursor:pointer}
.f-kiste img{position:absolute;left:0;right:0;bottom:0;margin:0 auto;width:100%;height:auto;max-height:100%;object-fit:contain;object-position:bottom;
 filter:drop-shadow(0 14px 14px rgba(0,0,0,.45));transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.6,.5,1)}
.f-kiste .zu{width:82%}
.f-kiste .auf{opacity:0;transform:translateY(8px) scale(.94)}
.f-kiste.-offen .zu{opacity:0;transform:translateY(-6px) scale(.97)}
.f-kiste.-offen .auf{opacity:1;transform:none}
.f-kiste .nr{position:absolute;left:0;right:0;bottom:calc(35% - .5em);text-align:center;font:800 clamp(.95rem,1.6vw,1.3rem)/1 var(--schrift-anzeige);color:#12171C;letter-spacing:.06em;transition:opacity .3s}
.f-kiste.-offen .nr{opacity:0}
.f-scanner{position:absolute;left:50%;bottom:calc(262px*var(--s) + 40px*var(--s));width:4px;margin-left:-2px;height:calc(var(--kiste) + 40px);pointer-events:none;
 background:linear-gradient(180deg,rgba(255,154,61,0),rgba(255,154,61,.95) 30%,rgba(255,120,0,1));box-shadow:0 0 18px 4px rgba(255,120,0,.55);border-radius:2px}
.f-scanner::before{content:"";position:absolute;left:50%;bottom:0;width:calc(var(--kiste)*1.2);height:14px;margin-left:calc(var(--kiste)*-.6);border-radius:50%;
 background:radial-gradient(closest-side,rgba(255,120,0,.55),rgba(255,120,0,0))}
.f-etikett{position:absolute;left:50%;top:0;width:min(330px,calc(100% - 32px));margin-left:max(-165px,calc(-50% + 16px));padding:12px 16px;
 display:flex;gap:12px;align-items:center;z-index:3}
.f-etikett .f-nr{flex:none;width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:var(--signal);color:var(--marke);font:800 1.35rem/1 var(--schrift-anzeige)}
.f-etikett b{display:block;font:800 1.35rem/1 var(--schrift-anzeige);text-transform:uppercase;color:#F7F8F9;letter-spacing:.01em}
.f-etikett span{display:block;font-size:.84rem;color:#C9D0D6;line-height:1.35;margin-top:3px}
.f-steuer{position:absolute;right:clamp(16px,5vw,64px);top:0;display:flex;gap:8px;z-index:3}
.f-steuer button{width:48px;height:48px;border-radius:var(--rk);border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#F3F4F5;cursor:pointer;display:grid;place-items:center}
.f-steuer button svg{width:22px;height:22px}
.f-steuer .zurueck svg{transform:scaleX(-1)}
.f-hinweis{position:absolute;left:clamp(16px,5vw,64px);top:12px;font:700 .78rem/1.2 var(--schrift-text);letter-spacing:.14em;text-transform:uppercase;color:#C9D0D6;display:flex;align-items:center;gap:8px;z-index:3}
.f-hinweis::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px rgba(255,120,0,.25)}
@media (max-width:760px){
  .foerder{--s:.36;--kiste:clamp(104px,30vw,132px);padding-top:84px}
  .f-hinweis{display:none}
  .f-steuer{right:auto;left:clamp(16px,5vw,64px);top:auto;bottom:calc(262px*var(--s) + 54px*var(--s) + var(--kiste) + 12px)}
  .f-steuer{display:none}
  .f-etikett{top:0}
}
@media (max-height:700px) and (max-width:760px){.auftakt p.lead{display:none}}
@media (max-height:600px){.auftakt p.lead{display:none}.foerder{--kiste:96px;padding-top:76px}}

/* ===== SORTIMENT ===== */
.sorten{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:34px}
.sorte{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px}
.sorte img{width:100%;aspect-ratio:4/3;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(18,23,28,.25));margin-bottom:6px}
.sorte .etk{display:flex;align-items:baseline;gap:10px}
.sorte .etk i{font:800 1rem/1 var(--schrift-anzeige);font-style:normal;color:var(--signal-tief);letter-spacing:.06em}
.sorte h3{font-size:1.55rem}
.sorte p{margin:0;font-size:.95rem;color:var(--tinte-2)}
.sorte.-hinweis{justify-content:center;background:none}
.sorte.-hinweis::before{background:var(--marke);border-color:var(--marke)}
.sorte.-hinweis::after{display:none}
.sorte.-hinweis h3{color:#F7F8F9}.sorte.-hinweis p{color:#C9D0D6}
.sorte.-hinweis .knopf{margin-top:12px;align-self:flex-start}

/* ===== ONLINE / ZAHLEN (dunkel) ===== */
.dunkel{background:var(--marke);color:var(--hell);position:relative;isolation:isolate;overflow:hidden}
.dunkel::before{content:"";position:absolute;inset:0;z-index:-1;background:
 radial-gradient(50vw 40vh at 85% 15%,rgba(255,120,0,.16),transparent 60%),
 radial-gradient(60vw 50vh at 10% 90%,rgba(147,157,165,.18),transparent 60%)}
.dunkel h2{color:#F7F8F9}.dunkel h2 em{color:var(--signal-hell)}
.dunkel .kicker{color:var(--signal-hell)}.dunkel .kicker::before{background:var(--signal-hell)}
.dunkel .lead{color:#C9D0D6}
.zahlen{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:34px 0 30px}
.zahl{padding:22px 22px 20px}
.zahl b{display:block;font:800 clamp(3rem,6vw,4.6rem)/.9 var(--schrift-anzeige);color:#F7F8F9;letter-spacing:.01em}
.zahl b .z{color:var(--signal-hell);font:inherit;display:inline}
.zahl>span{display:block;margin-top:8px;color:#C9D0D6;font-size:.95rem;line-height:1.4}
.stand{font-size:.82rem;color:#AEB7BF;margin-top:14px}
.shops{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.shop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;text-decoration:none;color:#F7F8F9;min-height:96px}
.shop b{display:block;font:800 1.9rem/1 var(--schrift-anzeige);text-transform:uppercase}
.shop span{display:block;color:#C9D0D6;font-size:.92rem;margin-top:4px}
.shop .pf{flex:none;width:48px;height:48px;border-radius:var(--rk);background:var(--signal);color:var(--marke);display:grid;place-items:center}
.shop .pf svg{width:22px;height:22px}
@media (hover:hover) and (pointer:fine){.shop:hover .pf{transform:translateX(3px)}}

/* ===== ANKAUF ===== */
.ankauf-bild{position:relative;min-height:340px}
.ankauf-bild img{position:absolute;filter:drop-shadow(0 22px 22px rgba(18,23,28,.35))}
.ankauf-bild .a1{width:58%;left:2%;bottom:0}
.ankauf-bild .a2{width:46%;right:0;bottom:12%}
.ankauf-bild .a3{width:40%;left:30%;bottom:42%}
.liste{list-style:none;padding:0;margin:18px 0 24px;display:grid;gap:10px}
.liste li{display:flex;gap:12px;align-items:flex-start}
.liste li::before{content:"";flex:none;width:12px;height:12px;margin-top:.45em;background:var(--signal);border-radius:3px}

/* ===== ÜBER UNS ===== */
.stempel{display:inline-flex;flex-direction:column;align-items:flex-start;padding:18px 22px;border:3px solid var(--signal-tief);border-radius:var(--rk);color:var(--signal-tief);margin-bottom:10px;box-shadow:4px 4px 0 rgba(168,78,0,.18)}
.stempel b{font:800 3.4rem/.9 var(--schrift-anzeige);text-transform:uppercase}
.stempel span{font:700 .82rem var(--schrift-text);letter-spacing:.14em;text-transform:uppercase}
.fakten{display:grid;gap:0;margin:0;padding:0}
.fakten div{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--linie)}
.fakten dt{font:700 .82rem var(--schrift-text);letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-2);padding-top:.2em}
.fakten dd{margin:0;font-weight:600}
.zitat{margin:26px 0 0;padding:22px 24px;font:800 clamp(1.6rem,2.6vw,2.2rem)/1.05 var(--schrift-anzeige);text-transform:uppercase;color:var(--marke)}
.zitat small{display:block;font:600 .85rem var(--schrift-text);text-transform:none;color:var(--tinte-2);margin-top:10px;letter-spacing:0}

/* ===== FRAGEN ===== */
details{border-top:1px solid var(--linie)} details:last-of-type{border-bottom:1px solid var(--linie)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px;font:800 1.45rem/1.05 var(--schrift-anzeige);text-transform:uppercase;color:var(--marke);min-height:56px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;width:40px;height:40px;border-radius:var(--rk);display:grid;place-items:center;background:var(--marke);color:#F3F4F5;font:700 1.3rem/1 var(--schrift-text)}
details[open] summary::after{content:"−";background:var(--signal);color:var(--marke)}
details .inhalt{padding:0 4px 20px;color:var(--tinte-2)}
.antipp{font-size:.85rem;color:var(--tinte-2);margin:10px 0 0}

/* ===== KONTAKT ===== */
.tel-gross{display:inline-flex;flex-direction:column;text-decoration:none;color:var(--marke);margin:6px 0 18px}
.tel-gross b{font:800 clamp(2.6rem,5.4vw,4.4rem)/.95 var(--schrift-anzeige);letter-spacing:.01em}
.tel-gross span{font:700 .85rem var(--schrift-text);letter-spacing:.12em;text-transform:uppercase;color:var(--signal-tief)}
.adresse{font-style:normal;line-height:1.7}
.adresse a{color:var(--marke);font-weight:600;text-decoration:none;border-bottom:2px solid var(--signal);display:inline-block;padding:6px 0}
.adresse p{margin:0 0 .6em}
.klein{font-size:.9rem;color:var(--tinte-2)}
.formular{padding:clamp(20px,3vw,32px);display:grid;gap:14px;min-width:0}
.feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.feld label{font:700 .9rem var(--schrift-text);color:var(--marke)}
.feld select,.feld input,.feld textarea{width:100%;min-width:0;max-width:100%;font:inherit;font-size:1rem;padding:.75em .9em;border-radius:var(--rk);border:1px solid rgba(18,23,28,.2);background:rgba(255,255,255,.9);color:var(--tinte);min-height:50px}
.feld textarea{min-height:120px;resize:vertical}
.feld-paar{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--tinte-2)}
.zustimmung input{width:24px;height:24px;flex:none;margin-top:2px;accent-color:var(--signal-tief)}
.zustimmung span{min-width:0}
.zustimmung a{white-space:nowrap}
.formular .knopf{justify-self:start}
.versteckt{display:none}

/* EINBLENDEN */
.ein{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.ein.-da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ein{opacity:1;transform:none;transition:none}}

/* FUSS */
.fuss{padding:40px clamp(16px,5vw,64px) calc(var(--ruf-h) + 28px);background:var(--marke);color:#C9D0D6;font-size:.9rem}
.fuss .innen{max-width:1220px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
.fuss img{height:30px;width:auto}
.fuss nav a{color:#F3F4F5;text-decoration:none;font-weight:600;padding:12px 2px;display:inline-flex;align-items:center;min-height:44px}
.schutz{width:100%;font-size:.8rem;color:#AEB7BF;margin:4px 0 0}

/* UNTERSEITEN */
.unterseite{padding:calc(var(--kopf-h) + 40px) clamp(16px,5vw,64px) 60px;max-width:860px;margin:0 auto}
.unterseite h1{font-size:clamp(2.6rem,6vw,4.2rem);margin-bottom:24px}
.unterseite h2{font-size:1.8rem;margin:30px 0 10px}
.unterseite .platz{background:#FFE7D1;color:#6B3200;padding:1px 6px;border-radius:4px;font-weight:600}

section[id],main[id]{scroll-margin-top:var(--kopf-h)}
body.f-sicht .as-knopf:not(.-offen){opacity:0;pointer-events:none}
/* Nachtrag Prüfkette: Trefferflächen für Links im Fliesstext, Mindestschrift */
.adresse a{padding:11px 0 9px;min-height:44px}
.inhalt a{display:inline-block;padding:11px 0;margin:-11px 0;line-height:1.6}
.knopf small{font-size:.78rem}
/* Telefon: Sortiment zweispaltig, Fakten untereinander, Ankauf-Bild flacher */
@media (max-width:620px){
  .sorten{grid-template-columns:1fr 1fr;gap:10px}
  .sorte{padding:12px 12px 14px}
  .sorte h3{font-size:1.25rem}
  .sorte p{font-size:.9rem}
  .sorte.-hinweis{grid-column:1/-1}
  .fakten div{grid-template-columns:1fr;gap:2px}
  .ankauf-bild{min-height:240px}
}
.sorte{min-width:0}
.sorte h3,.sorte p{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;min-width:0}
@media (max-width:620px){.sorten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:340px){.sorten{grid-template-columns:minmax(0,1fr)}}

/* Nachtrag 15.10. (Matze am iPhone): ENTWURF-Schild neben das Logo statt darüber, Knöpfe im Auftakt nebeneinander und kleiner, Abstand zum Förderband */
.marke .logo-h{display:flex;align-items:center;gap:10px}
.entwurf{position:static;font-size:12px;line-height:1;padding:4px 7px;flex:none}
.auftakt-text{padding-bottom:18px}
@media (max-width:760px){
  .auftakt{padding-top:calc(var(--kopf-h) + 20px)}
  .auftakt h1{font-size:clamp(38px,11vw,52px)}
  .auftakt .knoepfe{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px;max-width:420px}
  .auftakt .knoepfe .knopf{min-height:52px;padding:.5em 1em;font-size:.95rem;gap:.5em;width:100%;justify-content:flex-start}
  .auftakt .knoepfe .knopf svg{width:1.05em;height:1.05em}
  .auftakt .knoepfe .knopf small{font-size:.78rem}
}

/* 17.10.2026 Kundenbereich-Link (Wunsch Dirk Schmitz) */
.menue a.-extern svg{width:14px;height:14px;margin-left:5px;opacity:.7}
@media (max-width:75em){.menue a.-extern svg{display:none}}
@media (max-width:60em){.fuss{padding-bottom:calc(var(--ruf-h) + 92px)}}