/* falschgetankt-abpump-service-berlin.de — Nachbau der Wix-Seite, 1:1 nach Messung.
   Alles liegt absolut auf einer Bühne: Desktop-Lage aus --x/--y/--w/--h (Messbreite
   1300 px, Inhalt 980 px mittig, --halb = 650 px), Handy-Lage aus --mx/--my/--mw/--mh
   in 320stel der Bildschirmbreite (--u). Klassen d/m: nur Desktop bzw. nur Handy.
   Keine Scroll-Animationen, keine Fremdskripte, Schriften liegen lokal. */
:root{
  --e:1px; --u:1px; --halb:calc(650 * var(--e));
  --rot:#CE2026; --gelb:#FFEFA9; --gelb2:#FFEFC6; --dunkel:#2F2E2E; --grau:#605E5E;
  --f-text:Arial,Helvetica,sans-serif; --f-kopf:'Rubik',Arial,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{ margin:0; background:var(--gelb); color:var(--dunkel); font-family:var(--f-text); overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ display:block; }
h1,h2,h3,h4,p,ul{ margin:0; padding:0; }
ul{ list-style:none; }
b,strong{ font-weight:700; }
.m{ display:none; }

/* ── Bühne */
.pg{ position:relative; overflow:hidden; }
.pg > *{ position:absolute; box-sizing:border-box; margin:0; }
.tb{ padding:0; }
.tb a{ text-decoration:none; }
.tb u a, .tb a u{ text-decoration:underline; }
.li-ul{ display:list-item; list-style:disc outside; }
.li-ol{ display:list-item; list-style:decimal outside; }
.im{ overflow:hidden; }
/* Kennzeichnung von KI-Bildern (Art. 50 KI-VO): kleine Marke in der Bildecke */
.im.ki{ position:absolute; }
.ki-marke{ position:absolute; right:0; bottom:0; z-index:2; padding:.25em .5em;
  font:400 11px/1.3 var(--f-text); letter-spacing:.2px; color:#fff;
  background:rgba(47,46,46,.72); pointer-events:none; }
.im img{ width:100%; height:100%; object-fit:cover; display:block; }
.sv svg{ width:100%; height:100%; display:block; fill:currentColor; }
.bt{ display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; padding:0 6px; line-height:1.15; cursor:pointer; font-family:inherit; }
.bt:hover{ filter:brightness(.94); }
.fd{ padding:0 12px; font-family:inherit; outline:none; }
.fd:focus{ box-shadow:0 0 0 2px var(--rot); }
textarea.fd{ padding:10px 12px; resize:vertical; }
.lb{ font:14px/20px var(--f-text); color:var(--dunkel); }
.formular-ok{ display:none; }
.ok .formular-ok{ display:block; position:fixed; left:50%; top:16px; transform:translateX(-50%); z-index:60; max-width:90vw; padding:14px 20px; background:#fff; color:var(--dunkel); border-left:4px solid var(--rot); box-shadow:0 8px 24px rgba(0,0,0,.18); font:15px/1.4 var(--f-text); }
.honig{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* Kopf- und Fußzeile: eigene Bühnen mit ihrer gemessenen Höhe, volle Breite */
.pg-kopf{ background:var(--gelb); z-index:20; }
.pg-fuss{ background:var(--dunkel); }

/* Seitenhintergrund: Karte fest hinter der Seite (Wix: fixed, cover) */
.pg.karte::before{ content:""; position:fixed; inset:0; z-index:-1;
  background:var(--gelb) url(../img/karte-berlin.jpg) center/cover no-repeat; }

/* ── Menü (handgebaut; Lage nach Messung: erste Position 525 px, oben 33 px, 34 px hoch) */
.nav{ position:absolute; top:calc(33 * var(--e)); left:calc(50% - var(--halb) + 525 * var(--e)); height:calc(34 * var(--e)); z-index:5; }
.nav__ul{ display:flex; height:calc(34 * var(--e)); }
.nav__ul > li{ position:relative; }
.nav__ul > li > a, .nav__mehrknopf{ display:block; padding:0 calc(18 * var(--e)); font:300 calc(14 * var(--e))/calc(34 * var(--e)) 'Lato',Arial,sans-serif; color:var(--dunkel);
  letter-spacing:0; white-space:nowrap; background:none; border:0; cursor:pointer; }
.nav__ul > li > a[aria-current="page"]{ color:var(--rot); }
.nav__ul > li > a:hover, .nav__mehrknopf:hover{ color:var(--rot); }
.nav__sub{ display:none; position:absolute; top:calc(34 * var(--e)); right:0; min-width:calc(300 * var(--e)); padding:calc(6 * var(--e)) 0; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.nav__mehr.offen .nav__sub, .nav__mehr:hover .nav__sub{ display:block; }
.nav__sub a{ display:block; padding:calc(6 * var(--e)) calc(18 * var(--e)); font:300 calc(14 * var(--e))/calc(22 * var(--e)) 'Lato',Arial,sans-serif; color:var(--dunkel); }
.nav__sub a:hover, .nav__sub a[aria-current="page"]{ color:var(--rot); }
.menu-k{ display:none; }
.menu-m{ display:none; }

/* ── Diashow (3 Folien auf den Kraftstoff-Seiten) */
.sl{ overflow:hidden; }
.sl__track{ display:flex; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.sl__track::-webkit-scrollbar{ display:none; }
.sl__s{ position:relative; flex:0 0 100%; height:100%; scroll-snap-align:start; overflow:hidden; }
.sl__s > *{ position:absolute; box-sizing:border-box; margin:0; }
.sl__pfeil{ position:absolute; z-index:2; padding:0; border:0; background:none; color:var(--dunkel); cursor:pointer; }
.sl__pfeil svg{ width:100%; height:100%; display:block; }
.sl__dots{ position:absolute; z-index:2; display:flex; align-items:center; justify-content:space-between; }
.sl__dot{ width:6px; height:6px; padding:0; border:0; border-radius:50%; background:var(--rot); cursor:pointer; }
.sl__dot.aktiv{ width:9px; height:9px; background:transparent; border:2px solid var(--rot); }

/* ── Aufklapptext („Mehr lesen"): zu, bis der Knopf gedrückt wird; das Skript schiebt danach alles darunter */
.klapp__mehr{ white-space:nowrap; padding:0; text-decoration:underline; }
.klapp{ overflow:hidden; }
.klapp p{ margin:0 0 .6em; }
.klapp:not(.offen){ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.klapp:not(.offen) p{ display:inline; margin:0; }
.klapp:not(.offen) p + p::before{ content:" "; }
.klapp:not(.offen) br{ display:none; }

/* ── Feste Leiste unten auf dem Handy: „Anrufen" und „WhatsApp" als Tasten (wie Hamburg-Seite) */
.anruf-fest{ display:none; }

@media (min-width:750px){
  /* Fenster schmaler als die Bühne (1300 px): alles gleichmäßig verkleinern, statt
     den Inhalt links und rechts abzuschneiden. 16 px Abzug für die Bildlaufleiste. */
  :root{ --e:min(1px, (100vw - 16px) / 1300); }
  .pg{ height:calc(var(--hd) * var(--e)); }
  .pg > *{ left:calc(50% - var(--halb) + var(--x) * var(--e)); top:calc(var(--y) * var(--e)); width:calc(var(--w) * var(--e)); }
  .pg > .bx, .pg > .im, .pg > .sv, .pg > .bt, .pg > .fd, .pg > .sl{ height:calc(var(--h) * var(--e)); }
  .pg > .voll{ left:0; width:100%; }
  .sl__s > *{ left:calc(50% - var(--halb) + var(--x) * var(--e)); top:calc(var(--y) * var(--e)); width:calc(var(--w) * var(--e)); }
  .sl__s > .bx, .sl__s > .bt{ height:calc(var(--h) * var(--e)); }
  .sl__s > .voll{ left:0; width:100%; }
  .sl__pfeil, .sl__dots{ left:calc(50% - var(--halb) + var(--x) * var(--e)); top:calc(var(--y) * var(--e)); width:calc(var(--w) * var(--e)); height:calc(var(--h) * var(--e)); }
  .pg > .nav{ left:calc(50% - var(--halb) + 525 * var(--e)); top:calc(33 * var(--e)); width:auto; }
  .ki-marke{ font-size:calc(11 * var(--e)); }
  .bt{ padding:0 calc(6 * var(--e)); }
  .fd{ padding:0 calc(12 * var(--e)); }
  textarea.fd{ padding:calc(10 * var(--e)) calc(12 * var(--e)); }
  .lb{ font-size:calc(14 * var(--e)); line-height:calc(20 * var(--e)); }
}
@media (max-width:749.98px){
  :root{ --u:calc(100vw / 320); }
  .d{ display:none !important; } .m{ display:initial; }
  .pg{ height:calc(var(--hm) * var(--u)); }
  .pg > *{ left:calc(var(--mx) * var(--u)); top:calc(var(--my) * var(--u)); width:calc(var(--mw) * var(--u)); }
  .pg > .bx, .pg > .im, .pg > .sv, .pg > .bt, .pg > .fd, .pg > .sl{ height:calc(var(--mh) * var(--u)); }
  .pg > .voll{ left:0; width:100%; }
  .ki-marke{ font-size:calc(9 * var(--u)); }
  .bt{ padding:0 calc(6 * var(--u)); }
  .fd{ padding:0 calc(12 * var(--u)); }
  .lb{ font-size:calc(14 * var(--u)); line-height:calc(20 * var(--u)); }
  .sl__s > *{ left:calc(var(--mx) * var(--u)); top:calc(var(--my) * var(--u)); width:calc(var(--mw) * var(--u)); }
  .sl__s > .bx, .sl__s > .bt{ height:calc(var(--mh) * var(--u)); }
  .sl__s > .voll{ left:0; width:100%; }
  .sl__pfeil, .sl__dots{ left:calc(var(--mx) * var(--u)); top:calc(var(--my) * var(--u)); width:calc(var(--mw) * var(--u)); height:calc(var(--mh) * var(--u)); }
  .sl__pfeil{ width:calc(var(--mw) * var(--u) + 16px); margin-left:-8px; }
  /* Menü: Burger (Messung: 263/10, 50×50; Balken 22×2 bei 25/34/43) und Vollbild-Liste */
  .nav{ display:none; }
  .pg > .menu-k{ display:block; position:absolute; left:calc(263 * var(--u)); top:calc(10 * var(--u)); width:calc(50 * var(--u)); height:calc(50 * var(--u)); padding:0; border:0; background:none; cursor:pointer; z-index:30; }
  .menu-k span{ position:absolute; left:calc(14 * var(--u)); width:calc(22 * var(--u)); height:2px; background:var(--dunkel); }
  .menu-k span:nth-child(1){ top:calc(15 * var(--u)); } .menu-k span:nth-child(2){ top:calc(24 * var(--u)); } .menu-k span:nth-child(3){ top:calc(33 * var(--u)); }
  .pg > .menu-m{ position:fixed; left:0; top:0; width:100%; height:100%; z-index:25; background:var(--gelb); overflow-y:auto; padding:calc(70 * var(--u)) 0 calc(90 * var(--u)); }
  .pg > .menu-m[hidden]{ display:none; } .pg > .menu-m:not([hidden]){ display:block; }
  .menu-m a{ display:block; padding:calc(11 * var(--u)) calc(24 * var(--u)); font:300 calc(17 * var(--u))/1.3 'Lato',Arial,sans-serif; color:var(--dunkel); border-bottom:1px solid rgba(0,0,0,.08); }
  .menu-m a[aria-current="page"]{ color:var(--rot); }
  .pg-kopf{ position:sticky; top:0; }
  body{ padding-bottom:calc(5.1rem + env(safe-area-inset-bottom,0px)); }
  .anruf-fest{ display:flex; gap:.6rem; position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:.65rem .9rem calc(.65rem + env(safe-area-inset-bottom,0px));
    background:rgba(47,46,46,.88); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid rgba(255,255,255,.12); }
  .af{ flex:1 1 0; min-height:56px; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.85rem .6rem; border-radius:14px; text-decoration:none; font:600 1.1rem/1 var(--f-text); letter-spacing:-.01em; }
  .af:active{ transform:scale(.985); }
  .af svg{ width:1.25rem; height:1.25rem; flex:none; }
  .af--tel{ background:linear-gradient(135deg,#E2262C,#B81A1F); color:#fff; box-shadow:0 4px 18px rgba(206,32,38,.3); }
  .af--wa{ background:#128C7E; color:#fff; }
  .af:focus-visible{ outline:3px solid #fff; outline-offset:-5px; }
}
@media (prefers-reduced-motion:reduce){ .sl__track{ scroll-behavior:auto; } }

/* ── Linkblock unter jeder Seite: Orte, Themen, Partnerbetriebe (22.09.2026) */
.vl{ background:var(--gelb2); border-top:3px solid var(--rot); padding:34px 20px 30px; }
.vl__in{ max-width:980px; margin:0 auto; display:flex; gap:28px; flex-wrap:wrap; }
.vl__sp{ flex:1 1 260px; min-width:240px; }
.vl h2{ font:700 17px/1.3 var(--f-kopf); color:var(--dunkel); margin:0 0 12px; text-transform:uppercase; letter-spacing:.4px; }
.vl ul{ margin:0; padding:0; list-style:none; }
.vl li{ font:15px/1.5 var(--f-text); color:var(--dunkel); padding:3px 0; }
.vl a{ color:var(--rot); text-decoration:none; }
.vl a:hover{ text-decoration:underline; }
.vl__tel{ display:block; font-size:13px; color:var(--grau); }
.vl__hinweis{ margin-top:14px; font:14px/1.5 var(--f-text); color:var(--grau); }
.dsg-hinweis{ max-width:980px; margin:0 auto; padding:16px 20px 0; font:14px/1.6 var(--f-text); color:var(--grau); }
.dsg-hinweis a{ color:var(--rot); }
@media (max-width:749.98px){
  .vl{ padding:26px 20px 24px; }
  .vl__in{ gap:22px; }
  .vl__sp{ flex:1 1 100%; }
}
/* aktuelle Seite im Linkblock: nicht verlinkt, deshalb grau statt schwarz */
.vl li{ color:var(--grau); }
.vl a{ color:var(--rot); }