/* =========================================================
   JOHN TORNADO · Hülle 2026
   Gemeinsame Schicht für alle Seiten: Schriften, Maßstab,
   Kopf, Fuß, Menü, Sturm, Leben (Hover), Aufkleber.
   Auf den Unterseiten (body.unter) legt sie sich zusätzlich
   über das alte Seiten-CSS und zieht es auf die neue Linie.
   ========================================================= */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700 900;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/manrope-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/manrope-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600 900;font-display:swap;src:url(/fonts/manrope-latin-700-normal.woff2) format("woff2")}

:root{
  /* Maßstab */
  --f12:12px; --f13:13px; --f15:15px; --f17:17px; --f19:19px;
  --f24:24px; --f32:32px; --f44:44px; --f60:60px; --f80:80px; --f112:112px;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:104px; --s8:168px;
  --r1:4px; --r2:8px; --r3:14px;
  --bg:#0D0C0B; --sur:#161514; --t1:#F5F3EF; --t2:#B4B0A8; --t3:#726E66; --line:#232120; --acc:#F26522;
  --disp:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --txt:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --kopfh:68px;
}

/* ---------- Kopf ---------- */
.jt-kopf{position:fixed;top:0;left:0;right:0;z-index:80;padding-top:env(safe-area-inset-top,0px);
  transition:background-color .3s ease,border-color .3s ease,backdrop-filter .3s ease;border-bottom:1px solid transparent}
.jt-kopf.fest{background:rgba(13,12,11,.82);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line)}
.jt-kopf__in{max-width:1240px;margin-inline:auto;padding-inline:16px;height:var(--kopfh);display:flex;align-items:center;gap:var(--s4)}
@media (min-width:900px){ .jt-kopf__in{padding-inline:40px} }
.jt-marke{display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--t1);flex:none}
.jt-marke svg{width:20px;height:20px;fill:var(--acc)}
.jt-marke b{font:800 var(--f12)/1 var(--txt);letter-spacing:.2em;text-transform:uppercase}
.jt-nav{display:none;align-items:center;gap:var(--s5);margin-left:auto}
.jt-nav__g,.jt-nav__a{position:relative;background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:none;
  font:500 var(--f15)/1 var(--txt);color:var(--t2);transition:color .2s}
.jt-nav__g::after,.jt-nav__a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--acc);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.jt-nav__g:hover,.jt-nav__a:hover,.jt-nav__g[aria-expanded="true"],.jt-nav__a[aria-current="page"],.jt-nav__g.ist-hier{color:var(--t1)}
.jt-nav__g:hover::after,.jt-nav__a:hover::after,.jt-nav__g[aria-expanded="true"]::after,.jt-nav__a[aria-current="page"]::after,.jt-nav__g.ist-hier::after{transform:scaleX(1)}
.jt-nav__g:focus-visible,.jt-nav__a:focus-visible{outline:2px solid var(--acc);outline-offset:4px}

/* ---------- Desktop: flaches Band unter der Leiste ---------- */
.jt-mega{position:absolute;left:0;right:0;top:100%;pointer-events:none}
.jt-kopf.mega-offen{background:rgba(13,12,11,.94);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.jt-band{pointer-events:auto;background:#121110;border-bottom:1px solid var(--line);
  clip-path:inset(0 0 100% 0);animation:jtBand .45s cubic-bezier(.16,1,.3,1) forwards}
.jt-band[hidden]{display:none}
@keyframes jtBand{to{clip-path:inset(0 0 0 0)}}
.jt-band__in{max-width:1240px;margin-inline:auto;padding-inline:40px;display:grid;grid-template-columns:repeat(4,1fr)}
.jt-band__z{display:grid;gap:var(--s1);align-content:start;padding:var(--s4) var(--s4) var(--s5) 0;text-decoration:none;color:var(--t1);
  border-right:1px solid var(--line);transition:background-color .25s}
.jt-band__z:first-child{padding-left:0}
.jt-band__z:not(:first-child){padding-left:var(--s4)}
.jt-band__z:last-child{border-right:0}
.jt-band__z:hover{background:rgba(242,101,34,.06)}
.jt-band__z em{font:700 var(--f12)/1 var(--txt);font-style:normal;letter-spacing:.06em;color:var(--acc)}
.jt-band__z b{font:800 var(--f24)/1.05 var(--disp);letter-spacing:-.02em}
.jt-band__z small{font-size:var(--f13);color:var(--t3)}
.jt-band__z[aria-current="page"] b{color:var(--acc)}
@media (max-width:1079px){ .jt-mega{display:none} }
@media (prefers-reduced-motion:reduce){ .jt-band{animation:none;clip-path:none} }

.jt-kopf .jt-kopf__cta{display:none}
@media (min-width:1080px){ .jt-nav{display:flex} .jt-kopf .jt-kopf__cta{display:inline-flex} }
/* ---------- Handy: Kopf schwebt als Pille ---------- */
@media (max-width:1079px){
  .jt-kopf{background:none!important;border-bottom:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    padding-top:calc(env(safe-area-inset-top,0px) + 12px)}
  .jt-kopf__in{height:52px;margin-inline:12px;padding:6px 6px 6px 16px;width:auto;max-width:none;border-radius:999px;
    background:rgba(22,21,20,.76);border:1px solid rgba(245,243,239,.08);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
    box-shadow:0 18px 40px -20px rgba(0,0,0,.9);transition:background-color .3s,box-shadow .3s}
  .jt-kopf.fest .jt-kopf__in{background:rgba(22,21,20,.92)}
  .jt-burger{width:40px;height:40px;border:0;background:rgba(245,243,239,.07)}
}
.jt-burger{margin-left:auto;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(13,12,11,.6);
  display:grid;place-content:center;gap:5px;cursor:pointer;padding:0}
.jt-burger span{display:block;width:18px;height:1.5px;background:var(--t1);transition:transform .3s,opacity .2s}
.jt-burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.jt-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (min-width:1080px){ .jt-burger{display:none} }

.jt-menue{position:fixed;inset:0;z-index:79;display:block}
.jt-menue[hidden]{display:none}
.jt-menue__blende{position:absolute;inset:0;background:rgba(5,4,3,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .35s}
.jt-menue.auf .jt-menue__blende{opacity:1}
.jt-sheet{position:absolute;left:8px;right:8px;bottom:8px;max-height:calc(100% - var(--kopfh) - env(safe-area-inset-top,0px) - 28px);overflow-y:auto;
  border-radius:30px;background:#171615;border:1px solid rgba(245,243,239,.09);box-shadow:0 -24px 70px -24px #000;
  padding:12px 14px calc(16px + env(safe-area-inset-bottom,0px));display:grid;gap:var(--s2);
  transform:translateY(106%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.jt-menue.auf .jt-sheet{transform:none}
.jt-sheet__griff{width:40px;height:4px;border-radius:2px;background:#3A3630;margin:0 auto var(--s2);display:block}
.jt-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.jt-kachel{display:grid;gap:var(--s2);padding:12px;border-radius:16px;background:#1D1B19;border:1px solid var(--line);
  text-decoration:none;color:var(--t1);transition:border-color .2s,background-color .2s}
.jt-kachel:active,.jt-kachel[aria-current="page"]{border-color:rgba(242,101,34,.55);background:rgba(242,101,34,.08)}
.jt-ic{width:36px;height:36px;border-radius:10px;background:#141312;border:1px solid var(--line);display:grid;place-items:center}
.jt-ic svg{width:18px;height:18px;fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.jt-kachel b{display:block;font:700 var(--f15)/1.15 var(--disp);letter-spacing:-.01em}
.jt-kachel em{display:block;font:700 var(--f12)/1 var(--txt);font-style:normal;color:var(--acc);margin-top:3px}
.jt-zeilen{display:grid;margin-top:var(--s1)}
.jt-zeilen a{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:44px;padding:6px 4px;
  border-bottom:1px solid var(--line);text-decoration:none;font:600 var(--f15)/1.25 var(--txt);color:var(--t2)}
.jt-zeilen a:last-child{border-bottom:0}
.jt-zeilen a span{font:600 var(--f12)/1 var(--txt);color:var(--t3)}
.jt-zeilen a[aria-current="page"]{color:var(--acc)}
.jt-sheet__cta{width:100%;height:50px;margin-top:var(--s1)}
.jt-menue__wa{text-align:center;font:600 var(--f13)/1.4 var(--txt);color:var(--t3);text-decoration:none;padding-block:4px;min-height:44px;display:flex;align-items:center;justify-content:center}
body.menue-offen{overflow:hidden}

/* ---------- Knöpfe (gemeinsam) ---------- */
.jt-knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font:700 var(--f15)/1 var(--txt);
  padding:0 var(--s4);height:48px;border-radius:var(--r1);text-decoration:none;cursor:pointer;white-space:nowrap;border:1px solid transparent}
.jt-knopf--haupt{background:var(--acc);color:#140A04}
.jt-knopf--neben{border-color:var(--line);color:var(--t1);background:transparent}

/* ---------- Fuß ---------- */
.jt-fuss{position:relative;z-index:2;border-top:1px solid var(--line);background:rgba(13,12,11,.9);color:var(--t2);margin-top:var(--s6)}
.jt-fuss__in{max-width:1240px;margin-inline:auto;padding:var(--s6) 16px var(--s5);display:grid;gap:var(--s5)}
@media (min-width:900px){ .jt-fuss__in{padding-inline:40px;grid-template-columns:5fr 7fr} }
.jt-fuss p{margin:0}
.jt-fuss__satz{margin-top:var(--s3)!important;font-size:var(--f15);line-height:1.55;max-width:38ch}
.jt-fuss__wege{margin-top:var(--s3)!important;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font:600 var(--f15)/1.4 var(--txt)}
.jt-fuss__wege a{color:var(--t1);text-decoration:none;border-bottom:1px solid var(--line)}
.jt-fuss__wege a:hover{border-color:var(--acc)}
.jt-fuss__nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s4)}
.jt-fuss__nav div{display:grid;gap:var(--s2);align-content:start}
.jt-fuss__nav b{font:700 var(--f12)/1.3 var(--txt);letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-bottom:var(--s1)}
.jt-fuss__nav a{font-size:var(--f15);color:var(--t2);text-decoration:none;transition:color .2s}
.jt-fuss__nav a:hover,.jt-fuss__nav a[aria-current="page"]{color:var(--t1)}
.jt-fuss__recht{grid-column:1/-1;padding-top:var(--s4);border-top:1px solid var(--line);font-size:var(--f13);color:var(--t3);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.jt-fuss__recht a{color:var(--t2)}

/* ---------- Sturm ---------- */
#feld{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ---------- Leben: Licht folgt dem Zeiger, Rand wird dicker ---------- */
@property --gl{syntax:"<number>";inherits:false;initial-value:0}
[data-lebt],[data-knopf]{position:relative;
  background-image:radial-gradient(var(--glr,300px) circle at var(--mx,50%) var(--my,50%),rgba(242,101,34,var(--gl)),rgba(242,101,34,0) 62%);
  background-repeat:no-repeat;
  transition:--gl 320ms ease-out,transform 420ms cubic-bezier(.16,1,.3,1),translate 240ms cubic-bezier(.2,.8,.2,1),
             box-shadow 340ms cubic-bezier(.16,1,.3,1),border-color 240ms ease-out,color 200ms ease-out}
[data-lebt]{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}
[data-lebt]:hover,[data-lebt]:focus-within{--gl:.15;--ty:-4px;box-shadow:inset 0 0 0 1.5px rgba(242,101,34,.38),0 30px 64px -34px rgba(0,0,0,.95)}
[data-lebt].flach:hover,[data-lebt].flach:focus-within{--ty:0px}
[data-knopf]{--glr:170px;translate:var(--mgx,0px) var(--mgy,0px)}
[data-knopf]:hover,[data-knopf]:focus-visible{--gl:.26}
.jt-knopf--haupt[data-knopf],.btn--p[data-knopf],.btn--live[data-knopf],.takt__a[data-knopf]{
  background-image:radial-gradient(170px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,var(--gl)),rgba(255,255,255,0) 64%)}
.jt-knopf--haupt:hover,.unter .btn--p:hover,.unter .btn--live:hover,.unter .takt__a:hover{--gl:.3;box-shadow:0 16px 38px -16px rgba(242,101,34,.85),inset 0 0 0 1.5px rgba(255,255,255,.3)}
.jt-knopf--neben:hover,.unter .btn--g:hover,.unter .takt__b:hover{border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--acc)}
@media (prefers-reduced-motion:reduce){ [data-lebt],[data-knopf]{transform:none!important;translate:none!important;background-image:none!important} }

/* ---------- Aufkleber ---------- */
.kleber{display:inline-block;position:relative;font:800 var(--f24)/1 var(--disp);letter-spacing:-.01em;
  padding:.28em .5em .34em;border-radius:var(--r1);white-space:nowrap;vertical-align:middle;
  transform:rotate(var(--dreh,-4deg));box-shadow:5px 5px 0 rgba(0,0,0,.92);
  transition:transform 540ms cubic-bezier(.34,1.56,.64,1),opacity 220ms ease-out}
.kleber--orange{background:var(--acc);color:#140A04}
.kleber--hell{background:var(--t1);color:#140A04;--dreh:3deg}
.kleber--schwarz{background:#000;color:var(--acc);box-shadow:5px 5px 0 var(--acc);--dreh:-2deg}
.js-kleber .kleber[data-kleber]:not(.klebt){opacity:0;transform:scale(1.8) rotate(calc(var(--dreh,-4deg) * -4))}
.kleber:hover{transform:rotate(0deg) scale(1.05)}
@media (prefers-reduced-motion:reduce){ .js-kleber .kleber[data-kleber]:not(.klebt){opacity:1;transform:rotate(var(--dreh,-4deg))} }

/* ---------- WhatsApp-Knopf ---------- */
.wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:inline-flex;align-items:center;gap:var(--s2);
  height:52px;padding:0 var(--s4) 0 var(--s3);border-radius:999px;background:#1FA855;color:#fff;text-decoration:none;
  font:700 var(--f15)/1 var(--txt);box-shadow:0 16px 40px -16px rgba(0,0,0,.9);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.wa svg{width:24px;height:24px;fill:currentColor}
.wa:hover{transform:translateY(-2px)}
/* Handy: WhatsApp als Leiste in der Daumenzone, blendet sich aus, wo sie stört */
.wa{transition:opacity .3s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.wa.wa--weg{opacity:0;transform:translateY(24px);pointer-events:none}
@media (max-width:640px){
  .wa{left:16px;right:16px;width:auto;height:52px;padding:0 var(--s4);justify-content:center;border-radius:999px;gap:var(--s3)}
  .wa span{display:inline-flex;align-items:baseline;gap:var(--s2);font:700 var(--f15)/1 var(--txt)}
  .wa span small{font:500 var(--f12)/1 var(--txt);opacity:.8}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* =========================================================
   UNTERSEITEN: die alte Seite auf die neue Linie ziehen
   ========================================================= */
.unter{
  --ink:#0D0C0B; --steel:#161514; --card:#161514; --edge:#232120; --bone:#F5F3EF; --dim:#726E66; --haze:#B4B0A8;
  --amber:#F26522; --volt:#F26522; --go:#3DD68C;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --mono:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --body:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --wrap:1240px;
}
html:has(body.unter){background:var(--bg)}
body.unter{background:transparent!important;color:var(--t1);font:400 var(--f17)/1.6 var(--txt)!important;cursor:auto!important;
  padding-top:calc(var(--kopfh) + env(safe-area-inset-top,0px))}
.unter a,.unter button,.unter summary,.unter label{cursor:pointer!important}
.unter *{cursor:inherit}
@media (max-width:899px){ body.unter{font-size:var(--f15)!important} }
.unter #sky,.unter #wetter,.unter #curCanvas,.unter #cur,.unter #bolt,.unter #fortschritt,.unter .bolt-mid,.unter .bolt-glow,
.unter .strahl,.unter .adern,.unter .ader-glow,.unter #skyveil,.unter #skyflash{display:none!important}
/* 03.10.2026: Gewicht null (:where). Vorher schlug diese Regel jedes position:fixed der Seite:
   Ratenleiste, Befund-Leiste, Abschiedsdialog, Villa-Flug und Rettungsleine lagen im Seitenfluss. */
:where(.unter) > :where(*:not(#feld):not(.jt-kopf):not(.jt-menue):not(.wa):not(script)){position:relative;z-index:2}
.unter .wrap{width:auto;max-width:1240px;margin-inline:auto;padding-inline:16px}
@media (min-width:900px){ .unter .wrap{padding-inline:40px} }
.unter section{padding-block:var(--s6)}
@media (min-width:900px){ .unter section{padding-block:var(--s7)} }
.unter .band{border-top:0!important;background:none!important}

/* Schrift */
.unter h1,.unter h2,.unter h3{font-family:var(--disp)!important;text-transform:none!important;letter-spacing:-.02em!important;font-weight:800;text-wrap:balance}
.unter h1{font-size:var(--f44)!important;line-height:1.02!important}
@media (min-width:700px){ .unter h1{font-size:var(--f60)!important} }
.unter h2{font-size:var(--f32)!important;line-height:1.06!important}
@media (min-width:900px){ .unter h2{font-size:var(--f44)!important} }
.unter h3{font-size:var(--f24)!important;line-height:1.12!important}
.unter h1 .hot,.unter h2 .hot,.unter h3 .hot{color:var(--acc)!important}
.unter p{line-height:1.6}
.unter .eyebrow{font:700 var(--f12)/1.3 var(--txt)!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--t3)!important;
  display:flex;align-items:center;gap:var(--s2)}
.unter .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none}
.unter .eyebrow > *{display:none}
.unter .kopf{max-width:64ch}
.unter .kopf p,.unter .held__sub{color:var(--t2)!important;font-size:var(--f17)!important;line-height:1.55}
@media (min-width:900px){ .unter .kopf p,.unter .held__sub{font-size:var(--f19)!important} }
.unter .krume{margin:var(--s4) 0 0;font:600 var(--f12)/1.4 var(--txt);letter-spacing:.06em;color:var(--t3)}
.unter .krume a{color:var(--t2);text-decoration:none}
.unter .krume i{font-style:normal;margin:0 var(--s2);color:var(--acc)}

/* Held */
.unter .held{padding-top:var(--s5)}
.unter .held::before{background:radial-gradient(58% 70% at 18% 0%,rgba(242,101,34,.12),transparent 70%)!important}

/* Knöpfe */
.unter .btn{font:700 var(--f15)/1 var(--txt)!important;height:52px;padding:0 var(--s4)!important;border-radius:var(--r1)!important;
  display:inline-flex;align-items:center;justify-content:center;letter-spacing:0!important;text-transform:none!important}
.unter .btn--p,.unter .btn--live,.unter .btn.btn--p{background:var(--acc)!important;border-color:var(--acc)!important;color:#140A04!important;box-shadow:none}
.unter .btn--g{background:transparent!important;border:1px solid var(--line)!important;color:var(--t1)!important}
.unter .btn--strom::before,.unter .btn--strom::after,.unter .btn--live::before,.unter .btn--live::after{display:none!important}
.unter .knopfreihe{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* Flächen: alles, was Karte ist, wird eine ruhige, dunkle Fläche */
.unter .antwort{border:1px solid rgba(242,101,34,.34)!important;border-radius:var(--r3)!important;
  background:linear-gradient(180deg,rgba(242,101,34,.08),var(--sur) 62%)!important;box-shadow:0 30px 70px -44px rgba(242,101,34,.5)!important}
.unter .antwort__t{font:700 var(--f12)/1.3 var(--txt)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)!important}
.unter .antwort em{color:var(--acc);font-style:normal;font-weight:700}
.unter .pos,.unter .sch,.unter .f,.unter .nachbar a,.unter .spanne,.unter .tag,.unter .pf,.unter .preis,.unter .fuer > *,
.unter .warum > *,.unter .kost,.unter .risiko,.unter .stimme,.unter .beleg,.unter .ende,.unter .gf-drei > *,.unter .gf-pakete > *,
.unter .treppe > *,.unter .gf-treppe > *,.unter .wen > *,.unter .tage > *,.unter .kosten > *{
  background-color:var(--sur)!important;border:1px solid var(--line)!important;border-radius:var(--r3)!important}
.unter .schritte,.unter .umfang,.unter .faq,.unter .nachbar,.unter .spannen,.unter .fuer,.unter .warum,.unter .tage,.unter .kosten,
.unter .wen,.unter .treppe,.unter .gf-treppe,.unter .gf-drei,.unter .gf-pakete{gap:var(--s3)!important;background:none!important;border:0!important}
.unter .pos__n,.unter .sch__n{-webkit-text-stroke:0!important;color:var(--acc)!important;font:800 var(--f24)/1 var(--disp)!important}
.unter .pos b,.unter .sch b,.unter .nachbar b{font:700 var(--f19)/1.25 var(--disp)!important;letter-spacing:-.01em;color:var(--t1)}
.unter .pos span,.unter .sch span,.unter .nachbar span{color:var(--t2)!important;font-size:var(--f15)!important;line-height:1.55}
.unter .nachbar a{padding:var(--s4)!important}

/* Fragen */
.unter .f summary{font:700 var(--f17)/1.35 var(--txt)!important;padding:var(--s4)!important;color:var(--t1)}
@media (min-width:900px){ .unter .f summary{font-size:var(--f19)!important} }
.unter .f summary:hover{color:var(--acc)}
.unter .f__a{padding:0 var(--s4) var(--s4)!important;color:var(--t2)}
.unter .f__a a,.unter .pos a,.unter .kopf a,.unter p a{color:var(--t1);text-decoration-color:var(--acc);text-underline-offset:3px}

/* Takt-Leiste zwischen den Abschnitten */
.unter .takt{border:0!important;background:none!important}
.unter .takt__in{max-width:1240px;width:auto!important;margin-inline:auto;padding:var(--s4) 16px!important}
@media (min-width:900px){ .unter .takt__in{padding-inline:40px!important} }
.unter .takt__in{border-radius:var(--r3)}
.unter .takt__satz{font:700 var(--f19)/1.3 var(--disp)!important;color:var(--t1)!important;letter-spacing:-.01em}
.unter .takt__a,.unter .takt__b{border-radius:var(--r1)!important;font:700 var(--f15)/1 var(--txt)!important;height:48px;display:inline-flex;align-items:center;padding:0 var(--s4)!important;text-decoration:none}
.unter .takt__a{background:var(--acc)!important;color:#140A04!important;border:0!important}
.unter .takt__b{border:1px solid var(--line)!important;color:var(--t1)!important;background:transparent!important}
.unter .takt__zusage{color:var(--t3)!important;font-size:var(--f13)!important}

/* Aufklapper "Warum das zählt" */
.unter .ruhe{margin-top:var(--s4);border-top:1px solid var(--line)}
.unter .ruhe summary{font:700 var(--f13)/1 var(--txt);letter-spacing:.06em;color:var(--t2);padding:var(--s3) 0;cursor:pointer}
.unter .ruhe summary:hover{color:var(--acc)}

/* Tabellen */
.unter .verg{border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;background:var(--sur)}
.unter .verg th,.unter .verg td{border-color:var(--line)!important}
.unter .verg .ich{background:rgba(242,101,34,.07)!important}
.unter .verg caption{color:var(--t3);font-size:var(--f13)}

/* Spannen (Preisbalken) */
.unter .spanne__bar{background:var(--line)!important;border-radius:999px;overflow:hidden}
.unter .spanne__bar i{background:var(--acc)!important;border-radius:999px}
.unter .spanne--ich{border-color:rgba(242,101,34,.45)!important}

/* Formular */
.unter .anf{background:var(--sur);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s4)}
@media (min-width:900px){ .unter .anf{padding:var(--s5)} }
.unter .anf input,.unter .anf textarea{background:var(--bg)!important;border:1px solid var(--line)!important;border-radius:var(--r1)!important;
  color:var(--t1)!important;font:400 var(--f15)/1.4 var(--txt)!important}
.unter .anf input:focus,.unter .anf textarea:focus{border-color:var(--acc)!important;outline:none}
.unter .anf label{font:700 var(--f12)/1.3 var(--txt)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)!important}
.unter .anf h3{font-size:var(--f24)!important}

/* Randnotizen */
.unter .rl{background:rgba(13,12,11,.95)!important;border-top:1px solid var(--line)!important}
.unter .rl__cta{background:var(--acc)!important;color:#140A04!important;border-radius:var(--r1)!important}
.unter ::selection{background:var(--acc);color:#140A04}
.unter :focus-visible{outline:2px solid var(--acc)!important;outline-offset:3px}

/* Seiten ohne alte Kopfzeile (Recht, 404, Stilfinder): alte Marke weg, die neue steht oben */
.unter > .wrap > .marke,.unter main > .logo,.unter .kopfzeile .mark,.unter .kopfzeile .heim{display:none!important}
.jt-fuss__nav span{font-size:var(--f15);color:var(--t1)}
.unter .ende{background:linear-gradient(180deg,rgba(242,101,34,.07),var(--sur) 55%)!important;box-shadow:none!important}
.unter .beleg{background:none!important;border:0!important}
.unter .beleg__in{background:var(--sur);border:1px solid var(--line);border-radius:var(--r3)}
#handymenu.jt-menue{z-index:79!important;inset:0!important;background:none!important;animation:none!important;padding:0!important;display:block!important}
#handymenu .jt-sheet{animation:none!important}
#handymenu.jt-menue[hidden]{display:none!important}

/* =========================================================
   HANDY-ANSICHT UNTERSEITEN — nur unter 900 px
   Weniger Block unter Block: kleinere Stufen, Wischleisten.
   ========================================================= */
@media (max-width:899px){
  .unter section{padding-block:var(--s5)}
  .unter h1{font-size:var(--f32)!important}
  .unter h2{font-size:var(--f24)!important}
  .unter h3{font-size:var(--f19)!important}
  .unter .kopf p,.unter .held__sub{font-size:var(--f15)!important}
  .unter p,.unter li,.unter td,.unter th{font-size:var(--f15)}
  .unter .kopf{margin-bottom:var(--s4)!important}
  /* Wischleisten: Karten-Reihen statt Stapel */
  .unter .umfang,.unter .spannen,.unter .fall__raster,.unter .wen,.unter .verg tbody,.unter table.preis tbody{
    display:flex!important;gap:var(--s2)!important;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-inline:-16px;padding:4px 16px var(--s3)!important;scrollbar-width:none;grid-template-columns:none!important}
  .unter .umfang::-webkit-scrollbar,.unter .spannen::-webkit-scrollbar,.unter .fall__raster::-webkit-scrollbar,.unter .wen::-webkit-scrollbar,
  .unter .verg tbody::-webkit-scrollbar,.unter table.preis tbody::-webkit-scrollbar{display:none}
  .unter .umfang>*,.unter .spannen>*,.unter .fall__raster>*,.unter .wen>*,.unter .verg tbody>tr,.unter table.preis tbody>tr{
    flex:0 0 80%!important;scroll-snap-align:start;scroll-margin-inline:16px;margin:0!important}
  .unter .verg,.unter table.preis{display:block!important;overflow:visible!important}
  .unter .verg thead,.unter table.preis thead{display:none!important}
  .unter .verg tbody>tr,.unter table.preis tbody>tr{display:block!important;border:1px solid var(--line);border-radius:var(--r3);background:var(--sur);padding:var(--s3)}
  .unter .verg td,.unter .verg th,.unter table.preis td,.unter table.preis th{display:block;border:0!important;padding:var(--s1) 0!important}
  .unter .tab-scroll{overflow:visible!important}
  .unter .umf{display:grid!important;grid-template-columns:1fr 1fr!important;gap:var(--s2)!important}
  .unter .umf>*{margin:0!important}
  .unter .punkte{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3)}
  .unter .f summary{font-size:var(--f15)!important}
}

/* ---------- Touch: statt Hover leuchtet, was gerade in der Bildmitte liegt ---------- */
@media (hover:none){
  [data-lebt].mitte{--gl:.15;--ty:-4px;box-shadow:inset 0 0 0 1.5px rgba(242,101,34,.38),0 30px 64px -34px rgba(0,0,0,.95)}
  [data-lebt].flach.mitte{--ty:0px}
  .laufend li[data-lebt].mitte{--ty:0px;box-shadow:inset 3px 0 0 var(--acc);padding-left:var(--s3)}
}
@media (max-width:899px){
  :root{--t3:#8E897F}
  .unter details.ruhe{display:none!important}
  .unter .takt--handy-weg{display:none!important}
  .unter table.preis tbody{display:grid!important;overflow:visible!important;margin-inline:0!important;padding:0!important}
  .unter table.preis tbody>tr{flex:none!important}
  .unter table.preis td,.unter table.preis th{background:none!important;box-shadow:none!important}
  .unter table.preis tbody>tr.mid{border-color:rgba(242,101,34,.55)!important;background:linear-gradient(180deg,rgba(242,101,34,.08),var(--sur) 60%)!important}
  .unter .tab-scroll{border:0!important;background:none!important;box-shadow:none!important;padding:0!important}
  .unter .sprung>span,.unter .sprung a,.unter .klein,.unter .held dl dt,.unter .beleg__leiste span,.unter .fuer__z i{font-size:var(--f12)!important}
  .unter .sprung a{display:inline-block;padding-block:var(--s2)}
  .jt-fuss__nav a{padding-block:6px}
}




/* ================= NEU113: Der Massstab beginnt bei 12 px, auf jedem Geraet =================
   Die Unterseiten hatten am Rechner noch Etiketten in 11 px. Gemessen bei 1440 px. */
.anf__opt,.nachbar a>i,.punkte li>b,.fuer__z .such em,.fuer__z i,.such em,.fall__leiste b,.fall__leiste em,.stufe__n,.stufe__p small,
.gf-e__was,.gf-t__n,.gf-t__preis small,.fall__nr,.fall__tag,.kost u,.echt-mark,.beweis__t cite,.gf-v__z,
.gf-bots summary,.unter blockquote cite,.unter blockquote cite a,.gf-t__link,.gf-ab__z,.gf-ab__z b,.gf-ab__preis small,.gf-vgl__u,
.gf-karte__klein,.gf-karte__k,.gf-abo__zahl,.gf-drin__k,.gf-vgl__k,
.vgl__marke,.unter th,.unter dl dt,.unter td .klein,.unter .sprung a,.unter .sprung>span,.unter .beleg__leiste span,
.zaehlt,.kopf-rechts .stand,.wa small{font-size:12px!important}

/* ================= Handy-Durchgang 03.10.2026 =================
   Gemessen auf 360, 390 und 430 px: Tippziele, Schriftgroessen, Eingabefelder.
   Seit NEU113 auch fuer Tablets (bis 899 px) und jedes Geraet, das mit dem Finger bedient wird. */
@media (max-width:899px), (hover:none) and (pointer:coarse){
  /* Tippziele: mindestens 44 px hoch */
  .jt-marke{min-height:44px}
  .jt-fuss__wege a,.jt-fuss__recht a{display:inline-flex;align-items:center;min-height:44px}
  .beleg__weg,.gf-t__link,.fall__link,.kopf__mehr a,a.zurueck,.krume a,a.pdf,.bwk__mehr,.sprung a{display:inline-flex;align-items:center;min-height:44px}
  .unter dl dd a{display:inline-block;padding-block:10px}
  /* Schrift: der Massstab beginnt bei 12 px */
  .anf__opt,.nachbar a>i,.punkte li>b,.fuer__z .such em,.fall__leiste b,.fall__leiste em,.stufe__n,.stufe__p small,
  .gf-e__was,.gf-t__n,.gf-t__preis small,.fall__nr,.fall__tag,.kost u,.echt-mark,.beweis__t cite,.gf-v__z,
  .gf-bots summary,.unter blockquote cite a,.gf-t__link,.gf-ab__z,.gf-ab__z b,.gf-ab__preis small,.gf-vgl__u,
  .vgl__marke,.unter thead th{font-size:12px!important}
  /* Eingaben: unter 16 px zoomt das iPhone beim Antippen in die Seite */
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea,select,
  .unter .anf input,.unter .anf textarea,.unter .anf select{font-size:16px!important}
  /* NEU113: Finger an breiten Geräten (Tablet quer): Fußlinks und Punkte der App-Ansichten */
  .jt-fuss__nav a{display:inline-block;padding-block:6px}
  .jt-nav__g,.jt-nav__a{min-height:44px;display:inline-flex;align-items:center}
  .karuzone .karu__dots button{position:relative;overflow:visible}
  .karuzone .karu__dots button::after{content:"";position:absolute}
  /* NEU113: Zeilenköpfe in Tabellen, Quellenzeilen, Zusatz am WhatsApp-Knopf */
  .unter th,.unter blockquote cite,.wa small{font-size:12px!important}
  /* Startseite: Stimmen-Knopf und Punkte der App-Ansichten */
  a.bwk__l{display:inline-flex;align-items:center;min-height:44px}
  .karuzone .karu__dots{gap:17px}
  .karuzone .karu__dots button::after{inset:-20px -9px!important}
}