/* hermann-abpumpservice.de — Nachbau der Wix-Startseite, 1:1 nach Messung
   der Live-Seite (Desktop 1265 px Inhaltsbreite, Mobil 320 px Basis).
   Keine Scroll-Animationen, keine Fremdskripte, Schriften liegen lokal. */

:root{
  --dunkel:#28292B; --gelb:#FFE473; --gelb-rand:#6E672E; --grau:#C7C7C7;
  --nav-aktiv:#807239; --bild-grau:#545557;
  --f-kopf:'Barlow', 'Barlow Fallback', Arial, sans-serif;
  --f-text:'Lato', 'Lato Fallback', Arial, sans-serif;
  --f-knopf:'Sora', 'Lato', Arial, sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:#fff; color:var(--dunkel); font-family:var(--f-text);
  font-weight:300; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ display:block; }
h1,h2,p,ul{ margin:0; padding:0; }
ul{ list-style:none; }
b,strong{ font-weight:700; }
.karte{ background:url(../img/karte-norddeutschland.jpg) center/cover no-repeat; }
.oben{ position:relative; background-position:center top; }

/* ======================================================= Desktop (ab 750 px) */
@media (min-width:750px){
  body{ min-width:1000px; }
  .m{ display:none !important; }
  /* Absolute Bühne: alle Maße stammen aus der Live-Messung bei 1265 px.
     left = 50% - 632.5px + x, damit die Elemente bei jeder Fensterbreite
     mittig auf der 1265er-Bühne bleiben; Farbstreifen laufen volle Breite. */
  .abs{ position:absolute; left:calc(50% - 632.5px + var(--x) * 1px); top:calc(var(--y) * 1px); width:calc(var(--w) * 1px); }
  .strip{ position:relative; width:100%; }

  /* Kopfzeile: 127 px dunkel + 60 px gelbe Menüleiste, klebt oben */
  .kopf{ position:sticky; top:0; z-index:50; height:187px; background:var(--dunkel); }
  .kopf__in{ position:relative; width:1105px; margin:0 auto; height:127px; }
  .kopf__logo{ position:absolute; left:14px; top:29px; width:45px; height:50px; }
  .kopf__name{ position:absolute; left:63px; top:35px; font:600 16px/19px var(--f-kopf); color:var(--gelb); white-space:nowrap; }
  .kopf__sub{ position:absolute; left:63px; top:60px; font:300 14px/17px var(--f-text); color:var(--gelb); white-space:nowrap; }
  .kopf__ruf{ position:absolute; right:203px; top:42px; font:300 18px/22px var(--f-text); color:var(--gelb); white-space:nowrap; }
  .kopf__tel{ position:absolute; right:28px; top:29px; width:168px; height:50px; background:var(--gelb);
    border:1px solid var(--gelb); display:flex; align-items:center; justify-content:center;
    font:300 18px/25px var(--f-text); color:var(--dunkel); }
  .nav{ height:60px; background:var(--gelb); }
  .nav__ul{ display:flex; width:1105px; margin:0 auto; padding:15px 0 0 14px; height:60px; }
  .nav__ul > li{ position:relative; height:29px; }
  .nav__ul > li > a, .nav__mehr{ display:block; padding:0 10px; font:300 16px/22px var(--f-text); color:var(--dunkel); white-space:nowrap; cursor:pointer; }
  .nav__ul > li > a[aria-current]{ color:var(--nav-aktiv); }
  .nav__ul > li > a:hover, .nav__mehr:hover{ color:var(--nav-aktiv); }
  .nav__ul > li.nur-mehr{ display:none; }
  .nav__drop{ display:none; position:absolute; left:0; top:29px; min-width:260px; padding:8px 0;
    background:var(--gelb); box-shadow:0 6px 14px rgba(0,0,0,.18); }
  .nav__drop a{ display:block; padding:6px 16px; font:300 16px/22px var(--f-text); color:var(--dunkel); white-space:nowrap; }
  .nav__drop a:hover{ color:var(--nav-aktiv); }
  li:hover > .nav__drop, li:focus-within > .nav__drop{ display:block; }

  /* Hero */
  .hero{ height:314px; }
  .hero::before{ content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(255,228,115,.10) 62.34%, rgba(40,41,43,.50) 99.52%), rgba(200,190,110,.30); }
  .hero__box{ --x:333; --y:21; --w:600; height:280px; background:rgba(40,41,43,.77); text-align:center; }
  .hero__h1{ position:absolute; left:0; right:0; top:72px; font:600 56px/67px var(--f-kopf); color:#fff; }
  .hero__sub{ position:absolute; left:100px; right:100px; top:145px; font:300 16px/19.5px var(--f-text); color:#fff; }
  .hero__btn{ position:absolute; left:173px; top:207px; width:254px; height:40px; background:var(--gelb);
    display:flex; align-items:center; justify-content:center; font:300 14px/17px var(--f-text); color:var(--dunkel); }

  /* Einstieg + gelbe Schrittkarte (ragt in den nächsten Abschnitt hinein) */
  .einstieg{ height:380px; z-index:2; }
  .einstieg::before{ content:""; position:absolute; inset:0; background:rgba(190,180,105,.42); }
  .einstieg__p{ --x:230; --y:20; --w:735; font:700 22px/30.8px var(--f-text); color:var(--dunkel); }
  .karte3{ --x:173; --y:93; --w:920; height:470px; background:var(--gelb); }
  .schritt{ position:absolute; top:0; width:294px; height:420px; text-align:center; }
  .schritt:nth-child(1){ left:18px; } .schritt:nth-child(2){ left:312px; } .schritt:nth-child(3){ left:606px; }
  .schritt__ico{ position:absolute; top:57px; left:50%; transform:translateX(-50%); height:49px; width:49px; fill:#000; }
  .schritt__punkt{ position:absolute; top:123px; left:50%; width:20px; height:20px; margin-left:-10px; }
  .schritt__linie{ position:absolute; top:133px; left:157px; width:274px; border-top:1px solid var(--dunkel); }
  .schritt__h{ position:absolute; top:164px; left:0; right:0; font:700 20px/24px var(--f-text); color:var(--dunkel); }
  .schritt__h a{ color:inherit; }
  .schritt__p{ position:absolute; top:252px; left:40px; right:40px; font:300 16px/22.4px var(--f-text); color:var(--dunkel); }
  .schritt__tel{ position:absolute; top:320px; left:50%; width:168px; height:39px; margin-left:-84px;
    background:var(--gelb); border:1px solid var(--dunkel); display:flex; align-items:center; justify-content:center;
    font:700 18px/25px var(--f-text); color:var(--dunkel); }
  .karte3__bar{ position:absolute; left:0; right:0; bottom:0; height:50px; background:var(--dunkel); border:1px solid var(--dunkel);
    display:flex; align-items:center; justify-content:center; font:300 18px/25px var(--f-text); color:#fff; }

  /* Warum-Abschnitt: 40 % Foto, 60 % weiß */
  .warum{ height:674px; display:flex; }
  .warum__bild{ width:40%; background:var(--bild-grau); overflow:hidden; }
  .warum__bild img{ width:100%; height:100%; object-fit:cover; }
  .warum__txt{ width:60%; position:relative; background:#fff; }
  .warum__h2{ position:absolute; left:149px; top:229px; width:470px; font:600 34px/41px var(--f-kopf); color:var(--dunkel); }
  .warum__ul{ position:absolute; left:181px; top:328px; width:410px; list-style:disc; font:300 18px/25.2px var(--f-text); color:var(--dunkel); }
  .warum__btn{ position:absolute; left:149px; top:554px; width:165px; height:50px; background:var(--dunkel); border:1px solid var(--dunkel);
    display:flex; align-items:center; justify-content:center; font:300 18px/25px var(--f-text); color:#fff; }

  /* Dunkler Ratgeber-Abschnitt (absolut gesetzte Textblöcke wie im Original) */
  .rat{ height:1427px; background:var(--dunkel); color:#fff; }
  .rat h2{ font:700 34px/47.6px var(--f-kopf); color:var(--gelb); }
  .rat p, .rat li{ font:300 16px/28.8px var(--f-text); }
  .rat__h1{ --x:172; --y:61; --w:400; }
  .rat__empf{ --x:203; --y:165; --w:300; font-style:italic; font-size:18px !important; line-height:32.4px !important; }
  .rat__liste{ --x:203; --y:203; --w:340; }
  .rat__liste li{ line-height:32.4px; }
  .rat__h2{ --x:529; --y:323; --w:460; }
  .rat__p2{ --x:576; --y:444; --w:443; }
  .rat__klapp{ --x:576; --y:683; --w:495; }
  .rat__h3{ --x:303; --y:753; --w:400; }
  .rat__p3{ --x:330; --y:916; --w:528; }
  .rat__h4{ --x:646; --y:1092; --w:380; }
  .rat__p4{ --x:678; --y:1198; --w:392; }

  /* Kundenstimmen über dem Foto */
  .stimmen{ height:923px; background:var(--dunkel); }
  .stimmen__bild{ position:absolute; left:0; top:0; width:100%; height:911px; object-fit:cover; opacity:.88; }
  .stimmen__h2{ position:absolute; left:0; right:0; top:155px; text-align:center; font:500 34px/41px var(--f-kopf); color:var(--gelb); }
  .stimmen__sub{ position:absolute; left:0; right:0; top:213px; text-align:center; font:300 18px/22px var(--f-text); color:#fff; }
  .stimmen__strip{ position:absolute; left:80px; right:80px; top:341px; height:582px; background:var(--gelb); display:flex; padding:1px; }
  .stimmen__q{ width:200px; position:relative; flex:none; }
  .stimmen__kreis{ position:absolute; left:55px; top:162px; width:90px; height:90px; }
  .stimme{ position:relative; background:var(--dunkel); flex:1 1 0; margin-left:1px; min-width:0; }
  .stimme p{ position:absolute; left:48px; top:61px; width:210px; font:300 18px/28.8px var(--f-text); color:#fff; }
  .stimme p + p{ position:static; }
  .stimme__name{ display:block; margin-top:71px; font:300 16px/20px var(--f-text); color:var(--gelb); }
  .stimme__in{ position:absolute; left:48px; top:61px; width:212px; }
  .stimme__in p{ position:static; width:auto; }

  /* Einsatzgebiete auf der Karte */
  .gebiete{ height:209px; }
  .gebiete::before{ content:""; position:absolute; inset:0; background:rgba(200,192,140,.12); }
  .gebiete__h{ --x:0; --y:30; --w:1265; text-align:center; font:700 20px/24px var(--f-text); color:var(--dunkel); }
  .gb{ height:40px; background:var(--gelb); border:1px solid var(--gelb-rand); display:flex; align-items:center; justify-content:center;
    gap:4px; font:700 16px/20px var(--f-text); letter-spacing:1.6px; color:var(--dunkel); }
  .gb svg{ width:12px; height:12px; fill:var(--gelb-rand); flex:none; }
  .gb:hover{ background:#fff0b8; }

  /* Fußzeile */
  .fuss{ height:444px; background:var(--dunkel); color:#fff; }
  .fuss__logo{ --x:81; --y:76; --w:20; height:24px; }
  .fuss__name{ --x:112; --y:76; --w:400; font:600 19px/23px var(--f-kopf); color:#fff; }
  .fuss__txt{ --x:112; --y:140; --w:872; font:300 18px/25.2px var(--f-text); }
  .fuss__btn{ --x:112; --y:309; --w:354; height:50px; background:var(--gelb); border:1px solid var(--gelb);
    display:flex; align-items:center; justify-content:center; font:300 18px/25px var(--f-text); color:var(--dunkel); }
  .fuss__links{ --x:112; --y:387; --w:600; font:300 16px/20px var(--f-text); color:var(--grau); }
  .fuss__links a{ text-decoration:underline; }
  .fuss__copy{ --x:112; --y:415; --w:600; font:300 16px/20px var(--f-text); color:var(--grau); }
}

/* ======================================================= Mobil (unter 750 px) */
@media (max-width:749.98px){
  /* Wix zeichnet das Handy-Layout auf 320 px und skaliert es auf die
     Bildschirmbreite. --u ist ein 320stel der Breite; alle Maße in u. */
  :root{ --u:calc(100vw / 320); }
  .d{ display:none !important; }
  .abs{ position:absolute; left:calc(var(--x) * var(--u)); top:calc(var(--y) * var(--u)); width:calc(var(--w) * var(--u)); }
  .strip{ position:relative; width:100%; }
  body{ font-size:calc(16 * var(--u)); }

  .kopf{ position:relative; height:calc(91 * var(--u)); background:var(--dunkel); }
  .kopf__logo{ position:absolute; left:calc(20 * var(--u)); top:calc(28 * var(--u)); width:calc(40 * var(--u)); height:calc(42 * var(--u)); }
  .kopf__name{ position:absolute; left:calc(68 * var(--u)); top:calc(26 * var(--u)); font:700 calc(12 * var(--u))/calc(15 * var(--u)) var(--f-kopf); color:var(--gelb); white-space:nowrap; }
  .kopf__sub{ position:absolute; left:calc(68 * var(--u)); top:calc(43 * var(--u)); width:calc(70 * var(--u)); font:300 calc(11 * var(--u))/calc(15.4 * var(--u)) var(--f-text); color:var(--gelb); }
  .kopf__ruf, .kopf__tel{ display:none; }
  .menu-k{ position:absolute; right:calc(20 * var(--u)); top:calc(26 * var(--u)); width:calc(50 * var(--u)); height:calc(50 * var(--u));
    background:none; border:0; padding:0; cursor:pointer; }
  .menu-k span{ position:absolute; right:calc(13 * var(--u)); height:calc(2 * var(--u)); background:var(--gelb); }
  .menu-k span:nth-child(1){ top:calc(19 * var(--u)); width:calc(16 * var(--u)); } .menu-k span:nth-child(2){ top:calc(28 * var(--u)); width:calc(24 * var(--u)); }
  .nav{ display:none; position:absolute; left:0; right:0; top:100%; z-index:60; background:var(--gelb); padding:calc(10 * var(--u)) 0; }
  .nav.offen{ display:block; }
  .nav__ul > li > a, .nav__mehr, .nav__drop a{ display:block; padding:calc(9 * var(--u)) calc(20 * var(--u)); font:300 calc(16 * var(--u))/calc(22 * var(--u)) var(--f-text); color:var(--dunkel); }
  .nav__mehr{ display:none; }
  .nav__ul > li > a[aria-current]{ color:var(--nav-aktiv); }

  .hero{ height:calc(236 * var(--u)); }
  .hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(255,228,115,.10) 62.34%, rgba(40,41,43,.50) 99.52%), rgba(200,190,110,.30); }
  .hero__box{ --x:17; --y:20; --w:285; height:calc(196 * var(--u)); background:rgba(40,41,43,.77); text-align:center; }
  .hero__h1{ position:absolute; left:0; right:0; top:calc(29 * var(--u)); font:600 calc(30 * var(--u))/calc(36 * var(--u)) var(--f-kopf); color:#fff; }
  .hero__sub{ position:absolute; left:calc(35 * var(--u)); right:calc(35 * var(--u)); top:calc(68 * var(--u)); font:300 calc(16 * var(--u))/calc(19.5 * var(--u)) var(--f-text); color:#fff; }
  .hero__btn{ position:absolute; left:calc(21 * var(--u)); top:calc(135 * var(--u)); width:calc(237 * var(--u)); height:calc(42 * var(--u)); background:var(--gelb);
    display:flex; align-items:center; justify-content:center; font:300 calc(14 * var(--u))/calc(17 * var(--u)) var(--f-text); color:var(--dunkel); }

  .einstieg{ height:calc(922 * var(--u)); }
  .einstieg::before{ content:""; position:absolute; inset:0; background:rgba(190,180,105,.42); }
  .einstieg__p{ --x:25; --y:10; --w:262; font:700 calc(16 * var(--u))/calc(22.4 * var(--u)) var(--f-text); color:var(--dunkel); }
  .karte3{ --x:20; --y:119; --w:280; height:calc(773 * var(--u)); background:var(--gelb); }
  .schritt{ position:absolute; left:0; right:0; text-align:center; }
  .schritt:nth-child(1){ top:calc(24 * var(--u)); } .schritt:nth-child(2){ top:calc(254 * var(--u)); } .schritt:nth-child(3){ top:calc(513 * var(--u)); }
  .schritt__ico{ display:block; margin:0 auto; width:calc(40 * var(--u)); height:calc(48 * var(--u)); fill:#000; }
  .schritt__punkt{ display:block; margin:calc(11 * var(--u)) auto 0; width:calc(20 * var(--u)); height:calc(20 * var(--u)); position:relative; }
  .schritt__linie{ position:absolute; left:calc(24 * var(--u)); right:calc(24 * var(--u)); top:calc(69 * var(--u)); border-top:1px solid var(--dunkel); z-index:0; }
  .schritt__punkt{ z-index:1; }
  .schritt__h{ margin-top:calc(11 * var(--u)); font:700 calc(19 * var(--u))/calc(23 * var(--u)) var(--f-text); color:var(--dunkel); }
  .schritt__p{ margin:calc(22 * var(--u)) auto 0; width:calc(232 * var(--u)); font:300 calc(16 * var(--u))/calc(22.4 * var(--u)) var(--f-text); color:var(--dunkel); }
  .schritt__tel{ display:flex; align-items:center; justify-content:center; margin:calc(9 * var(--u)) auto 0; width:calc(160 * var(--u)); height:calc(30 * var(--u));
    background:var(--gelb); border:1px solid var(--dunkel); font:700 calc(16 * var(--u))/calc(22 * var(--u)) var(--f-text); color:var(--dunkel); }
  .karte3__bar{ position:absolute; left:0; right:0; bottom:0; height:calc(41 * var(--u)); background:var(--dunkel); border:1px solid var(--dunkel);
    display:flex; align-items:center; justify-content:center; font:300 calc(16.8 * var(--u))/calc(23.5 * var(--u)) var(--f-text); color:#fff; }

  .warum{ display:block; }
  .warum__bild{ height:calc(338 * var(--u)); background:var(--bild-grau); }
  .warum__bild img{ width:100%; height:100%; object-fit:cover; }
  .warum__txt{ position:relative; height:calc(454 * var(--u)); background:#fff; }
  .warum__h2{ position:absolute; left:calc(20 * var(--u)); top:calc(32 * var(--u)); width:calc(275 * var(--u)); font:600 calc(20 * var(--u))/calc(24 * var(--u)) var(--f-kopf); color:var(--dunkel); }
  .warum__ul{ position:absolute; left:calc(43 * var(--u)); top:calc(104 * var(--u)); width:calc(262 * var(--u)); list-style:disc; font:300 calc(16 * var(--u))/calc(22.4 * var(--u)) var(--f-text); color:var(--dunkel); }
  .warum__btn{ position:absolute; left:calc(95 * var(--u)); top:calc(381 * var(--u)); width:calc(130 * var(--u)); height:calc(40 * var(--u)); background:var(--dunkel); border:1px solid var(--dunkel);
    display:flex; align-items:center; justify-content:center; font:300 calc(14.8 * var(--u))/calc(20.7 * var(--u)) var(--f-text); color:#fff; }

  .rat{ height:calc(1662 * var(--u)); margin-top:calc(20 * var(--u)); background:var(--dunkel); color:#fff; }
  .rat h2{ font:700 calc(26 * var(--u))/calc(36.4 * var(--u)) var(--f-kopf); color:var(--gelb); }
  .rat p, .rat li{ font:300 calc(16 * var(--u))/calc(28.8 * var(--u)) var(--f-text); }
  .rat__h1{ --x:25; --y:50; --w:270; }
  .rat__empf{ --x:25; --y:172; --w:200; font-style:italic; font-size:calc(18 * var(--u)) !important; line-height:calc(32.4 * var(--u)) !important; }
  .rat__liste{ --x:31; --y:203; --w:260; }
  .rat__liste li{ line-height:calc(32.4 * var(--u)); }
  .rat__liste li:first-child{ line-height:calc(28.8 * var(--u)); margin-bottom:calc(4 * var(--u)); }
  .rat__h2{ --x:25; --y:354; --w:275; }
  .rat__p2{ --x:31; --y:482; --w:264; }
  .rat__klapp{ --x:31; --y:852; --w:265; }
  .rat__h3{ --x:25; --y:913; --w:275; }
  .rat__p3{ --x:30; --y:1035; --w:257; }
  .rat__h4{ --x:25; --y:1322; --w:285; }
  .rat__p4{ --x:30; --y:1412; --w:244; }

  .stimmen{ height:calc(1127 * var(--u)); background:var(--gelb); }
  .stimmen__bild{ position:absolute; left:0; top:0; width:100%; height:calc(227 * var(--u)); object-fit:cover; }
  .stimmen__foto{ position:absolute; left:0; top:0; width:100%; height:calc(227 * var(--u)); background:var(--dunkel); }
  .stimmen__foto img{ width:100%; height:100%; object-fit:cover; opacity:.88; }
  .stimmen__h2{ position:absolute; left:calc(30 * var(--u)); right:calc(30 * var(--u)); top:calc(67 * var(--u)); text-align:center; font:500 calc(23 * var(--u))/calc(27.5 * var(--u)) var(--f-kopf); color:var(--gelb); }
  .stimmen__sub{ position:absolute; left:calc(30 * var(--u)); right:calc(30 * var(--u)); top:calc(125 * var(--u)); text-align:center; font:300 calc(16 * var(--u))/calc(25.6 * var(--u)) var(--f-text); color:#fff; }
  .stimmen__strip{ position:absolute; left:0; right:0; top:calc(201 * var(--u)); display:block; }
  .stimmen__q{ position:relative; height:calc(54 * var(--u)); }
  .stimmen__kreis{ position:absolute; left:calc(144 * var(--u)); top:calc(12 * var(--u)); width:calc(31 * var(--u)); height:calc(31 * var(--u)); }
  .stimme{ position:relative; background:var(--dunkel); margin-top:1px; }
  .stimme:nth-child(2){ height:calc(198 * var(--u)); } .stimme:nth-child(3){ height:calc(307 * var(--u)); } .stimme:nth-child(4){ height:calc(362 * var(--u)); }
  .stimme__in{ position:absolute; left:calc(20 * var(--u)); top:calc(33 * var(--u)); width:calc(280 * var(--u)); }
  .stimme p{ font:300 calc(17 * var(--u))/calc(27.2 * var(--u)) var(--f-text); color:#fff; }
  .stimme__name{ display:block; margin-top:calc(13 * var(--u)); font:300 calc(16 * var(--u))/calc(20 * var(--u)) var(--f-text); color:var(--gelb); }

  .gebiete{ height:calc(464 * var(--u)); }
  .gebiete__h{ --x:0; --y:21; --w:320; text-align:center; font:700 calc(19 * var(--u))/calc(23 * var(--u)) var(--f-text); color:var(--dunkel); }
  .gb{ --x:72 !important; --w:186 !important; height:calc(33 * var(--u)); background:var(--gelb); border:1px solid var(--gelb-rand); display:flex; align-items:center; justify-content:center;
    gap:calc(5 * var(--u)); font:700 calc(12 * var(--u))/calc(15 * var(--u)) var(--f-knopf); color:var(--dunkel); }
  .gb svg{ width:calc(12 * var(--u)); height:calc(12 * var(--u)); fill:var(--gelb-rand); flex:none; }
  .gb:nth-of-type(1){ --y:66 !important; } .gb:nth-of-type(2){ --y:109 !important; } .gb:nth-of-type(3){ --y:152 !important; } .gb:nth-of-type(4){ --y:195 !important; } .gb:nth-of-type(5){ --y:238 !important; }
  .gb:nth-of-type(6){ --y:282 !important; } .gb:nth-of-type(7){ --y:325 !important; } .gb:nth-of-type(8){ --y:368 !important; } .gb:nth-of-type(9){ --y:411 !important; }

  .fuss{ height:calc(370 * var(--u)); background:var(--dunkel); color:#fff; }
  .fuss__logo{ --x:20; --y:21; --w:20; height:calc(20 * var(--u)); }
  .fuss__name{ --x:45; --y:22; --w:250; font:700 calc(15 * var(--u))/calc(18 * var(--u)) var(--f-kopf); color:#fff; }
  .fuss__txt{ --x:20; --y:55; --w:280; font:300 calc(14 * var(--u))/calc(19.6 * var(--u)) var(--f-text); }
  .fuss__btn{ --x:17; --y:266; --w:285; height:calc(40 * var(--u)); background:var(--gelb); border:1px solid var(--gelb);
    display:flex; align-items:center; justify-content:center; font:300 calc(16 * var(--u))/calc(22.4 * var(--u)) var(--f-text); color:var(--dunkel); }
  .fuss__links{ --x:20; --y:319; --w:280; font:300 calc(14 * var(--u))/calc(17 * var(--u)) var(--f-text); color:var(--grau); }
  .fuss__links a{ text-decoration:underline; }
  .fuss__copy{ --x:20; --y:346; --w:200; font:300 calc(12 * var(--u))/calc(15 * var(--u)) var(--f-text); color:var(--grau); }
}

/* Aufklapptext „Mehr lesen“ (beide Layouts) */
.klapp__kurz{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.klapp__lang{ display:none; white-space:pre-line; }
.klapp.offen .klapp__kurz{ display:none; }
.klapp.offen .klapp__lang{ display:block; }
.klapp__mehr{ background:none; border:0; padding:0; margin-top:2px; color:#fff; text-decoration:underline;
  font:300 16px/24px var(--f-text); cursor:pointer; }
@media (max-width:749.98px){ .klapp__mehr{ font-size:calc(16 * var(--u)); line-height:calc(24 * var(--u)); } }

/* Kundenname = Link zur Google-Rezension (Hermann, 20.09.2026: kein Zusatztext) */
.stimme__name{ text-decoration:underline; text-decoration-color:rgba(255,228,115,.45); text-underline-offset:3px; }
.stimme__name:hover{ text-decoration-color:var(--gelb); }

/* Feste Leiste unten auf dem Handy: „Anrufen" und „WhatsApp" als zwei Tasten,
   im Stil der Hamburg-Seite (Hermann, 20.09.2026), Farben der Marke. Nur unter 750 px. */
.anruf-fest{ display:none; }
@media (max-width:749.98px){
  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(40,41,43,.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,#FFE473,#F2CE45); color:var(--dunkel); box-shadow:0 4px 18px rgba(255,228,115,.28); }
  .af--wa{ background:#128C7E; color:#fff; }
  .af:focus-visible{ outline:3px solid #fff; outline-offset:-5px; }
}