/* Schriften (lokal in assets/fonts) */

/* Chakra Petch 500 · latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/chakra-petch-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chakra Petch 500 · latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/chakra-petch-500-latin.woff2') format('woff2');
  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;
}
/* Chakra Petch 600 · latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/chakra-petch-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chakra Petch 600 · latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/chakra-petch-600-latin.woff2') format('woff2');
  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;
}
/* Chakra Petch 700 · latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/chakra-petch-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chakra Petch 700 · latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/chakra-petch-700-latin.woff2') format('woff2');
  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;
}
/* Variable Schriften: eine Datei für alle Stärken */
/* JetBrains Mono 400–500 · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 400–500 · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  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;
}
/* Lexend 300–600 · latin-ext */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/lexend-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lexend 300–600 · latin */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/lexend-latin.woff2') format('woff2');
  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;
}

/* Nur für den Hero auf Home */
/* Instrument Serif · latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Serif · latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-latin.woff2') format('woff2');
  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;
}
/* Instrument Serif kursiv · latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Serif kursiv · latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  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;
}
/* Geist Mono 100–900 · latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist Mono 100–900 · latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/geist-mono-latin.woff2') format('woff2');
  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;
}

/* Kamo Cards – Stile. Durchgehend dunkel. */

:root{
  --ink:#070b16;          /* Seitengrund */
  --ink-2:#0a0f1e;        /* leicht gehoben */
  --ink-3:#101728;        /* Karten, Tabellen */
  --paper:#eef2fa;
  --muted:#93a7cc;
  --cyan:#22e0f2;
  --blue:#2b5bf0;
  --violet:#5b3fd6;
  --magenta:#d62be8;
  --warn:#ff6b9d;
  --line:rgba(199,212,236,.10);
  --line-2:rgba(199,212,236,.20);

  --display:"Chakra Petch",system-ui,sans-serif;
  --body:"Lexend",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Satzspiegel */
  --breite:1180px;
  --rand:clamp(16px,3vw,64px);
  --kopf-h:70px;
  --luft:clamp(3.5rem,7vw,8rem);

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --t-druck:160ms;
  --t-ui:200ms;
  --t-panel:480ms;
  --r-pille:999px;
}

/* Breitenstufen */
@media (min-width:1600px){:root{--breite:1400px;--kopf-h:76px}}
@media (min-width:2000px){:root{--breite:1620px;--kopf-h:82px}}
@media (min-width:2400px){:root{--breite:1840px;--kopf-h:88px}}
@media (min-width:3000px){:root{--breite:2100px;--kopf-h:94px}}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--body);font-weight:300;
  font-size:clamp(16px,.88vw,20px);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* clip statt hidden, damit die Kopfzeile kleben bleibt */
  overflow-x:hidden;
  overflow-x:clip;
}
::selection{background:var(--blue);color:#fff}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.05;
  letter-spacing:-.02em;text-wrap:balance;hyphens:manual}
h1{font-size:clamp(34px,3.2vw,72px)}
h2,.pg-kopf h1{font-size:clamp(28px,2.7vw,58px)}
h3{font-size:clamp(17px,1.4vw,27px);line-height:1.2}
p{text-wrap:pretty}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
ol,ul{list-style:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* Scrollbalken ausblenden, Scrollen bleibt möglich */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none;width:0;height:0}

.lede{color:var(--muted);font-size:clamp(15px,1.02vw,21px);line-height:1.64;
  max-width:52ch;hyphens:auto}
.kicker{font-family:var(--body);font-weight:400;font-size:clamp(14px,.9vw,18px);
  color:var(--muted)}
.offen{font-size:clamp(14px,.9vw,18px);color:var(--muted)}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--paper);
  color:var(--ink);padding:12px 18px;font-family:var(--mono);font-size:12px}
.skip:focus{left:0}

/* Intro */
#kc-intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;cursor:pointer;
  background:radial-gradient(120% 90% at 50% 42%,#0B1024 0%,#05060D 55%,#000 100%);
  overflow:hidden;animation:kc-out .55s cubic-bezier(.6,0,.9,.3) 2.05s forwards}
#kc-intro::before{content:"";position:absolute;inset:-2px;
  background:
    linear-gradient(rgba(34,224,242,.055) 1px,transparent 1px) 0 0/100% 3px,
    linear-gradient(90deg,rgba(43,91,240,.05) 1px,transparent 1px) 0 0/44px 100%,
    linear-gradient(rgba(43,91,240,.05) 1px,transparent 1px) 0 0/100% 44px;
  opacity:0;animation:kc-grid .5s ease .05s forwards;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 20%,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 45%,#000 20%,transparent 78%)}
#kc-intro::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(45% 40% at 50% 40%,#fff,rgba(214,43,232,.35) 45%,transparent 72%);
  opacity:0;animation:kc-flash .5s ease-out .78s}
.kc-stage{position:relative;width:min(70vw,300px);text-align:center;
  animation:kc-lift .55s cubic-bezier(.6,0,.9,.3) 2.05s forwards}
.kc-badge{position:relative}
.kc-badge img{width:100%}
.kc-wipe{--m:linear-gradient(to bottom,transparent 0 40%,#000 60% 100%);
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-size:100% 200%;mask-size:100% 200%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0;mask-position:0 0;
  animation:kc-wipe .85s cubic-bezier(.32,.9,.3,1) .1s forwards}
/* Leuchten auf der Hülle: an der Maske des Bilds würde es rechteckig abgeschnitten */
.kc-badge .kc-schein{filter:drop-shadow(0 0 14px rgba(34,224,242,.35))}
.kc-scan{position:absolute;left:-6%;right:-6%;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan) 18%,#fff 50%,var(--magenta) 82%,transparent);
  box-shadow:0 0 18px 3px rgba(34,224,242,.55);
  opacity:0;animation:kc-scan .85s cubic-bezier(.32,.9,.3,1) .1s forwards}
.kc-sheen{position:absolute;inset:0;pointer-events:none;overflow:hidden;visibility:hidden;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.kc-sheen-wappen{-webkit-mask-image:url(assets/logo-wappen.svg);mask-image:url(assets/logo-wappen.svg)}
.kc-sheen-wort{-webkit-mask-image:url(assets/logo-schriftzug.svg);mask-image:url(assets/logo-schriftzug.svg)}
.kc-sheen i{position:absolute;top:-50%;bottom:-50%;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);
  transform:translateX(-160%) skewX(-16deg)}
.kc-badge .kc-sheen{animation:kc-sheenon .01s linear .8s forwards}
.kc-badge .kc-sheen i{animation:kc-sweep .6s cubic-bezier(.4,0,.3,1) .8s}
.kc-word{position:relative;margin-top:6%}
.kc-word img{width:78%;margin:0 auto}
.kc-word .kc-wipe2{--m2:linear-gradient(to right,transparent 0 42%,#000 58% 100%);
  -webkit-mask-image:var(--m2);mask-image:var(--m2);
  -webkit-mask-size:200% 100%;mask-size:200% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0;mask-position:0 0;
  animation:kc-wipe2 .6s cubic-bezier(.25,.9,.3,1) .82s forwards}
.kc-word .kc-schein{filter:drop-shadow(0 0 12px rgba(214,43,232,.3))}
.kc-word .kc-sheen{left:11%;right:11%;animation:kc-sheenon .01s linear 1.15s forwards}
.kc-word .kc-sheen i{animation:kc-sweep .55s cubic-bezier(.4,0,.3,1) 1.15s}
.kc-tag{margin-top:14px;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.42em;text-indent:.42em;color:var(--muted);
  opacity:0;animation:kc-tag .5s ease 1.35s forwards}
.kc-skip{position:absolute;bottom:26px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:rgba(147,167,204,.62);
  opacity:0;animation:kc-tag .4s ease 1.1s forwards}
@keyframes kc-grid{to{opacity:1}}
@keyframes kc-wipe{to{-webkit-mask-position:0 100%;mask-position:0 100%}}
@keyframes kc-wipe2{to{-webkit-mask-position:100% 0;mask-position:100% 0}}
@keyframes kc-scan{0%{opacity:0;top:0}12%{opacity:1}86%{opacity:1}100%{opacity:0;top:100%}}
@keyframes kc-flash{0%{opacity:0}22%{opacity:.85}100%{opacity:0}}
@keyframes kc-sheenon{to{visibility:visible}}
@keyframes kc-sweep{from{transform:translateX(-160%) skewX(-16deg)}
  to{transform:translateX(420%) skewX(-16deg)}}
@keyframes kc-tag{to{opacity:1}}
@keyframes kc-lift{to{transform:scale(1.06);filter:blur(3px);opacity:0}}
@keyframes kc-out{to{opacity:0;visibility:hidden}}
#kc-intro.kc-done{animation:kc-out .3s ease forwards}
#kc-intro.kc-done .kc-stage{animation:kc-lift .3s ease forwards}
html.kc-lock,html.kc-lock body{overflow:hidden}
/* Seite sperren, solange das Menü offen ist */
html.nav-lock,html.nav-lock body{overflow:hidden;overscroll-behavior:none}
html.nav-lock body{position:fixed;left:0;right:0;width:100%}
@media (prefers-reduced-motion:reduce){
  #kc-intro,#kc-intro *{animation-duration:.01ms!important;animation-delay:0ms!important}
  #kc-intro{animation:kc-out .4s ease 1s forwards}
  .kc-wipe,.kc-word .kc-wipe2{-webkit-mask-image:none;mask-image:none}
  .kc-scan,.kc-sheen{display:none}
}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:40;height:var(--kopf-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:0 var(--rand);
  /* Deckender Grund ohne Weichzeichner */
  background:rgba(7,11,22,.92);
  border-bottom:1px solid var(--line)}
.marke{justify-self:start;display:flex;align-items:center;gap:11px;text-decoration:none;
  transition:transform var(--t-druck) var(--ease-out)}
.marke img{width:clamp(32px,2vw,42px);height:clamp(32px,2vw,42px)}
.marke span{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.1vw,24px);
  letter-spacing:-.02em}
.marke:active{transform:scale(.98)}

/* Menü mit wandernder Markierung */
.hauptnav{justify-self:center;position:relative;display:flex;align-items:center;gap:2px;
  padding:4px;border:1px solid var(--line);border-radius:var(--r-pille);
  background:rgba(199,212,236,.03)}
/* Nur im Handymenü */
.nav-fuss{display:none}
.blase{position:absolute;top:4px;left:0;width:0;height:calc(100% - 8px);
  border-radius:var(--r-pille);
  background:linear-gradient(100deg,var(--blue),var(--violet) 55%,var(--magenta));
  box-shadow:0 4px 18px -4px rgba(91,63,214,.7);opacity:0;z-index:0}
.blase.sichtbar{opacity:1}
.hauptnav a{position:relative;z-index:1;font-size:clamp(14px,.86vw,18px);font-weight:500;
  text-decoration:none;color:#b9bed4;padding:clamp(8px,.5vw,12px) clamp(15px,1vw,22px);
  border-radius:var(--r-pille);white-space:nowrap;transition:color .3s ease}
.hauptnav a[aria-current="page"]{color:#fff}
@media (hover:hover) and (pointer:fine){
  .hauptnav a:hover:not([aria-current="page"]){color:var(--paper)}
}
/* Menüknopf (unter 768 px) */
/* Striche absolut positioniert (Safari) */
.burger{display:none;position:relative;
  -webkit-appearance:none;appearance:none;
  background:none;border:1px solid var(--line);border-radius:8px;
  width:42px;height:42px;cursor:pointer;padding:0;
  justify-self:end;z-index:52;
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-ui) ease}
.burger span{position:absolute;left:9px;right:9px;height:2px;
  border-radius:2px;background:var(--paper);
  transition:transform .3s var(--ease-out),opacity .2s ease}
.burger span:nth-child(1){top:10px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:28px}
.burger.offen span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger.offen span:nth-child(2){opacity:0}
.burger.offen span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.nav-overlay{display:none}

/* Sprachwahl */
.lang-toggle{grid-column:3;justify-self:end;position:relative;
  display:flex;align-items:center;gap:0;
  -webkit-appearance:none;appearance:none;
  border:1px solid var(--line-2);border-radius:8px;
  background:rgba(199,212,236,.03);
  padding:2px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-ui) ease,transform var(--t-druck) var(--ease-out)}
.lang-toggle:active{transform:scale(.97)}
.lang-opt{display:flex;align-items:center;height:100%;
  font-family:var(--display);font-weight:600;
  font-size:clamp(11px,.76vw,14px);letter-spacing:.5px;
  padding:clamp(4px,.35vw,7px) clamp(10px,.9vw,15px);
  border-radius:6px;color:var(--muted);
  transition:background-color var(--t-ui) ease,color var(--t-ui) ease,box-shadow var(--t-ui) ease}
.lang-opt.aktiv{background:rgba(34,224,242,.1);color:var(--cyan)}
@media (hover:hover) and (pointer:fine){
  .lang-toggle:hover{border-color:rgba(199,212,236,.25)}
}
/* Ohne Skript ausblenden */
html:not(.js) .lang-toggle{display:none}

@media (max-width:1024px){
  .kopf{height:auto;grid-template-columns:1fr auto;grid-template-rows:auto auto;
    row-gap:10px;padding-block:12px}
  .marke{grid-area:1/1}
  .lang-toggle{grid-area:1/2}
  .hauptnav{grid-area:2/1/3/3;justify-self:stretch;justify-content:flex-start;
    overflow-x:auto;scrollbar-width:none}
  .hauptnav::-webkit-scrollbar{display:none}
}
@media (max-width:768px){
  .burger{display:block;grid-area:1/3}
  /* Sprachwahl neben dem Menüknopf */
  .lang-toggle{grid-area:1/2;height:42px;z-index:52}
  .lang-opt{padding:0 12px;font-size:13px}
  /* Marke über dem Menü */
  .marke{position:relative;z-index:52}
  /* Kein backdrop-filter, sonst wird das Menü abgeschnitten */
  .kopf{grid-template-columns:1fr auto auto;grid-template-rows:auto;
    height:auto;padding-block:12px;row-gap:0;column-gap:10px;
    background:rgba(7,11,22,.97);
    -webkit-backdrop-filter:none;backdrop-filter:none}
  /* display statt visibility, darum Keyframes */
  .hauptnav{position:fixed;inset:0;z-index:51;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:calc(var(--kopf-h) + 8px) 0 0;
    background:rgba(7,11,22,.96);
    border:none;border-radius:0;
    display:none;overflow-y:auto;overscroll-behavior:contain}
  .hauptnav.nav-offen{display:flex;
    animation:nav-ein .3s var(--ease-out) both}
  .hauptnav .blase{display:none}

  /* Menüeinträge */
  .hauptnav a{position:relative;
    display:flex;align-items:center;justify-content:space-between;
    font-family:var(--display);font-weight:600;
    font-size:clamp(19px,5.4vw,26px);letter-spacing:-.01em;
    padding:clamp(16px,2.4vh,22px) var(--rand);
    border-radius:0;border-bottom:1px solid var(--line);
    color:var(--muted);width:100%;max-width:none;text-align:left;
    background:none;
    transition:color .2s ease,background .2s ease,padding-left .2s var(--ease-out)}
  .hauptnav a::before{content:'';position:absolute;left:0;top:0;bottom:0;
    width:3px;background:var(--cyan);
    transform:scaleY(0);transform-origin:center;
    transition:transform .25s var(--ease-out)}
  /* Pfeil */
  .hauptnav a::after{content:'›';
    font-family:var(--display);font-weight:400;
    font-size:1.15em;line-height:1;color:var(--line-2);
    transition:transform .25s var(--ease-out),color .2s ease}
  .hauptnav a:active{background:rgba(199,212,236,.04)}
  .hauptnav a[aria-current="page"]{color:#fff;background:rgba(34,224,242,.05)}
  .hauptnav a[aria-current="page"]::before{transform:scaleY(1)}
  .hauptnav a[aria-current="page"]::after{color:var(--cyan);transform:translateX(3px)}

  /* Einträge gestaffelt einblenden */
  .hauptnav.nav-offen a{animation:nav-eintrag .32s var(--ease-out) both}
  .hauptnav.nav-offen a:nth-of-type(1){animation-delay:40ms}
  .hauptnav.nav-offen a:nth-of-type(2){animation-delay:75ms}
  .hauptnav.nav-offen a:nth-of-type(3){animation-delay:110ms}
  .hauptnav.nav-offen a:nth-of-type(4){animation-delay:145ms}
  .hauptnav.nav-offen a:nth-of-type(5){animation-delay:180ms}
  .hauptnav.nav-offen a:nth-of-type(6){animation-delay:215ms}

  /* Menüfuß */
  .nav-fuss{display:flex;flex-direction:column;gap:6px;
    margin-top:auto;padding:clamp(20px,3vh,28px) var(--rand)
      calc(clamp(20px,3vh,28px) + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    font-family:var(--mono);font-size:12px;letter-spacing:.06em;
    color:var(--muted);
    animation:nav-eintrag .32s var(--ease-out) both;animation-delay:250ms}
  .nav-fuss-zeile{display:flex;align-items:center;gap:8px}
  .nav-fuss-punkt{width:5px;height:5px;border-radius:50%;
    background:var(--cyan);flex-shrink:0}
  .nav-fuss a{display:inline;padding:0;border:none;width:auto;
    font-family:var(--mono);font-size:12px;font-weight:400;
    letter-spacing:.06em;color:var(--cyan);animation:none}
  .nav-fuss a::before,.nav-fuss a::after{content:none}

  .nav-overlay{display:none;position:fixed;inset:0;z-index:50;background:transparent}
  .nav-overlay.nav-offen{display:block}
}
/* Kopfzeile fixieren, solange gesperrt */
html.nav-lock .kopf{z-index:100;position:fixed;top:0;left:0;right:0}
html.nav-lock .nach-oben{opacity:0;pointer-events:none}
@keyframes nav-eintrag{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hauptnav.nav-offen a,.nav-fuss{animation:none}
}

/* Bereichswechsel */
.blaetterer{position:relative;overflow:hidden;overflow:clip}
.panel[hidden]{display:none;content-visibility:hidden;contain:strict}
/* Unsichtbar aufbauen, nie gemalt */
.panel[hidden].vorwaermen{display:block;content-visibility:visible;contain:none;
  position:absolute;top:0;left:0;width:100%;visibility:hidden;pointer-events:none}
.panel.geht{position:absolute;top:0;left:0;width:100%}

/* Während des Wechsels */

/* 1 Hintergrund der alten Seite aus */
.panel.geht .atmos{display:none}

/* 2 Hintergrund der neuen Seite ruhig */
html.wechselt .atmos-flaeche{position:absolute;top:0}

/* 3 Eigene Ebenen */
html.wechselt .panel{will-change:transform,opacity}

/* 4 Zeichnungen aus */
html.wechselt .zeichnung{opacity:0}
.zeichnung{transition:opacity .4s var(--ease-out)}

/* 5 Walze pausiert (app.js) */

/* 6 Nur den sichtbaren Teil schieben */
html.wechselt .panel{max-height:100vh;overflow:clip}
.panel:focus{outline:none}
.js .stagger>*{opacity:0;transform:translateY(10px)}
.js .panel.zeigen .stagger>*{animation:hoch 420ms var(--ease-out) forwards}
.js .panel.zeigen .stagger>*:nth-child(1){animation-delay:30ms}
.js .panel.zeigen .stagger>*:nth-child(2){animation-delay:80ms}
.js .panel.zeigen .stagger>*:nth-child(3){animation-delay:130ms}
.js .panel.zeigen .stagger>*:nth-child(4){animation-delay:180ms}
.js .panel.zeigen .stagger>*:nth-child(n+5){animation-delay:230ms}
@keyframes hoch{to{opacity:1;transform:none}}

/* Scroll-Einblendung */
.js .scroll-ein{opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.js .scroll-ein.sichtbar{opacity:1;transform:none}
.js .scroll-ein:nth-child(2){transition-delay:70ms}
.js .scroll-ein:nth-child(3){transition-delay:140ms}
.js .scroll-ein:nth-child(4){transition-delay:210ms}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:clamp(50px,3.2vw,64px);padding:0 clamp(26px,1.7vw,38px);
  border-radius:12px;border:0;cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:clamp(15px,.94vw,19px);
  text-decoration:none;
  transition:transform var(--t-ui) var(--ease-out),background var(--t-ui) ease,
             border-color var(--t-ui) ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--paper);color:var(--ink)}
.btn-ghost{border:1px solid var(--line);color:var(--paper);background:rgba(199,212,236,.02)}
.btn svg{transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:#fff}
  .btn-ghost:hover{border-color:var(--line-2)}
  .kk-refresh:hover{transform:none;
    border-color:var(--rang-farbe);
    box-shadow:0 0 12px rgba(34,224,242,.25),0 0 4px rgba(34,224,242,.15)}
  .btn:hover svg{transform:translateX(3px)}
  .kk-refresh:hover svg{transform:none}
}

/* Hintergrund (Kundenkarte, Turniere, Pre-Grading, Kontakt) */
.atmos{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* Ohne filter:blur */
.atmos .pool{position:absolute;right:6%;bottom:2%;
  width:min(70vw,900px);height:min(70vw,900px);
  background:radial-gradient(closest-side,rgba(214,43,232,.22),rgba(43,91,240,.15) 45%,transparent 72%)}
.atmos .rim{position:absolute;left:-20%;top:-30%;width:80vw;height:80vw;
  background:radial-gradient(closest-side,rgba(34,224,242,.09),transparent 70%)}
.atmos .raster{position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(199,212,236,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(199,212,236,.05) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(115% 80% at 66% 40%,#000 10%,transparent 76%);
  mask-image:radial-gradient(115% 80% at 66% 40%,#000 10%,transparent 76%)}
@keyframes nav-ein{from{opacity:0}to{opacity:1}}

/* Home: Walze (Präfix .kh) */
.kh{
  --kh-bg:#070b16;
  --kh-ink:#eef0f5;
  --kh-muted:#aab2c3;
  --kh-dim:#717b91;
  --kh-line:rgba(238,240,245,.08);
  --kh-gold:#e6c170;
  --kh-cyan:#22e0f2;            /* Hauptknopf */
  /* Eigene Schriften des Heros */
  --kh-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --kh-sans:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --kh-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --kh-lh:1.06em;               /* Zeilenhöhe – muss zum Wert in app.js passen */
  --kh-header-h:var(--kopf-echt,var(--kopf-h));
  --kh-u:max(1px,min(100vw / 1920,(100vh - var(--kh-header-h)) / 1004));

  position:relative;overflow:hidden;
  min-height:calc(100vh - var(--kh-header-h));
  min-height:calc(100svh - var(--kh-header-h));
  display:flex;flex-direction:column;
  background:var(--kh-bg);color:var(--kh-ink);
  font-family:var(--kh-sans);-webkit-font-smoothing:antialiased;
  font-synthesis-weight:none}          /* Nur Stärke 400 */
@supports (height:100svh){
  .kh{--kh-u:max(1px,min(100vw / 1920,(100svh - var(--kh-header-h)) / 1004))}
}

/* Farbschein: je Farbe eine feste Ebene, gewechselt wird nur die Deckkraft */
.kh__glow{
  position:absolute;right:-10%;top:-10%;
  width:70vw;height:70vw;max-width:calc(1000 * var(--kh-u));max-height:calc(1000 * var(--kh-u));border-radius:50%;
  pointer-events:none}
.kh__glow::before,.kh__glow i{position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle,oklch(0.5 0.1 var(--h,85) / .28) 0%,rgba(7,11,22,0) 62%)}
.kh__glow::before{content:""}
.kh__glow.mit-ebenen::before{content:none}
.kh__glow i{opacity:0;transition:opacity 1s}
.kh__glow i.an{opacity:1}

.kh__inner{
  position:relative;flex:1;width:100%;max-width:calc(1440 * var(--kh-u));margin:0 auto;
  padding:clamp(48px,8vh,calc(110 * var(--kh-u))) clamp(20px,4vw,calc(56 * var(--kh-u))) calc(40 * var(--kh-u));
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:calc(56 * var(--kh-u));align-items:center}

.kh__copy{display:flex;flex-direction:column;gap:clamp(24px,4vh,calc(40 * var(--kh-u)));min-width:0;
  container-type:inline-size}
.kh__eyebrow{font:500 calc(12 * var(--kh-u))/1.4 var(--kh-mono);letter-spacing:.16em;color:var(--kh-dim);
  text-transform:uppercase;margin:0}

/* Überschrift nie breiter als ihre Spalte */
.kh__title{
  --kh-k:5.45;
  margin:0;font-family:var(--kh-serif);font-weight:400;
  font-size:clamp(44px,min(8.4vw,100cqw / var(--kh-k)),calc(128 * var(--kh-u)));
  line-height:var(--kh-lh);letter-spacing:-.03em;text-wrap:wrap;hyphens:manual}
.kh__row{display:flex;gap:.26em;align-items:flex-start}
.kh__reel{position:relative;display:block;height:var(--kh-lh);overflow:hidden;flex:1;min-width:0}
.kh__track{display:flex;flex-direction:column;transition:transform .75s cubic-bezier(.75,0,.2,1);will-change:transform}
.kh__word{display:flex;align-items:baseline;gap:.18em;height:var(--kh-lh);white-space:nowrap;font-style:italic}
/* Mindestgröße am Handy */
.kh__word small{font:500 max(.2em,11px)/1 var(--kh-mono);font-style:normal;opacity:.85;letter-spacing:.04em}

.kh__lead{margin:0;max-width:calc(500 * var(--kh-u));font:400 clamp(16px,1.3vw,calc(19 * var(--kh-u)))/1.55 var(--kh-sans);
  color:var(--kh-muted);text-wrap:pretty}

.kh__ctas{display:flex;flex-wrap:wrap;gap:calc(16 * var(--kh-u)) calc(28 * var(--kh-u));align-items:center}
.kh__btn{display:inline-flex;align-items:center;gap:calc(10 * var(--kh-u));padding:calc(17 * var(--kh-u)) calc(28 * var(--kh-u));
  background:var(--kh-cyan);color:var(--kh-bg);border-radius:999px;font:600 calc(15 * var(--kh-u))/1 var(--kh-sans);
  text-decoration:none;white-space:nowrap;
  transition:transform var(--t-druck) var(--ease-out),background-color .2s ease}
.kh__btn svg{width:1em;height:1em;flex-shrink:0}
.kh__btn:active{transform:scale(.97)}
.kh__link{padding:calc(8 * var(--kh-u)) 0;color:var(--kh-ink);font:500 calc(15 * var(--kh-u))/1 var(--kh-sans);
  text-decoration:none;white-space:nowrap;border-bottom:1px solid rgba(238,240,245,.35);transition:border-color .2s ease}
@media (hover:hover) and (pointer:fine){
  .kh__btn:hover{background:#6ae9f6;transform:translateY(-1px)}
  .kh__btn:active{transform:scale(.97)}
  .kh__link:hover{border-color:var(--kh-ink)}
}

.kh__visual{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(28 * var(--kh-u));min-width:0}
/* Kartenbühne */
.kh__stage{position:relative;aspect-ratio:360/560;flex-shrink:0;
  width:min(100%,calc(360 * var(--kh-u)),76vw,max(160px,(100vh - var(--kh-header-h) - 48px) * 360 / 560))}
@supports (height:100svh){
  .kh__stage{width:min(100%,calc(360 * var(--kh-u)),76vw,max(160px,(100svh - var(--kh-header-h) - 48px) * 360 / 560))}
}
.kh__slide{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:rotate(-7deg) scale(.9);
  transition:opacity .6s,transform .9s cubic-bezier(.2,1,.3,1);pointer-events:none}
.kh__slide.is-active{opacity:1;transform:rotate(3deg) scale(1)}
.kh__card{width:100%;aspect-ratio:63/88;border-radius:4.5%/3.2%;display:block;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.06)}
/* Schatten unter der Karte, steht still */
.kh__stage::before{content:"";position:absolute;left:0;right:0;top:50%;aspect-ratio:63/88;translate:0 -50%;rotate:3deg;
  border-radius:4.5%/3.2%;box-shadow:0 calc(50 * var(--kh-u)) calc(100 * var(--kh-u)) rgba(0,0,0,.6);pointer-events:none}

/* Slab: richtet sich nach der Höhe */
.kh__card--slab{width:auto;height:100%;max-width:100%;aspect-ratio:720/1221;border-radius:4.5%/2.65%}

.kh__dots{display:flex;gap:calc(8 * var(--kh-u));flex-shrink:0}
/* Tippfläche 44 px */
.kh__dot{all:unset;position:relative;cursor:pointer;padding:calc(8 * var(--kh-u)) 0;-webkit-tap-highlight-color:transparent}
.kh__dot::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;margin-top:-22px}
/* Breite springt, die Bewegung macht das Skript über transform */
.kh__dot span{position:relative;display:block;height:calc(3 * var(--kh-u));width:calc(24 * var(--kh-u));background:rgba(238,240,245,.2);
  border-radius:2px;transform-origin:0 50%}
.kh__dot span::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--kh-gold);opacity:0;transition:opacity .5s ease}
.kh__dot.is-active span{width:calc(56 * var(--kh-u))}
.kh__dot.is-active span::after{opacity:1}
.kh__dot:focus-visible{outline:none}
.kh__dot:focus-visible span{outline:2px solid var(--kh-gold);outline-offset:4px}

.kh__facts{position:relative;border-top:1px solid var(--kh-line)}
.kh__facts-inner{max-width:calc(1440 * var(--kh-u));margin:0 auto;
  padding:calc(22 * var(--kh-u)) clamp(20px,4vw,calc(56 * var(--kh-u)));
  display:flex;flex-wrap:wrap;gap:calc(12 * var(--kh-u)) calc(40 * var(--kh-u));justify-content:space-between;
  font:400 calc(13 * var(--kh-u))/1.4 var(--kh-sans);color:#8a93a6}
.kh__facts b{color:var(--kh-ink);font-weight:500}
.kh__status{display:flex;align-items:center;gap:calc(10 * var(--kh-u))}
.kh__status i{width:calc(8 * var(--kh-u));height:calc(8 * var(--kh-u));border-radius:50%;background:#e07a6f;flex-shrink:0}
.kh__status.is-open i{background:#7ddc97}
/* Ohne Skript kein Status */
html:not(.js) .kh__status{display:none}

.kh-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Gestapelt (Handy, Tablet, flache Bildschirme) */
@media not all and (min-width:1100px) and (min-height:540px){
  .kh__inner{gap:clamp(24px,4vh,calc(40 * var(--kh-u)))}
  .kh__copy{display:contents}
  .kh__eyebrow{order:1}
  .kh__title{order:2}
  .kh__visual{order:3;margin-block:clamp(4px,1.2vh,16px)}
  .kh__lead{order:4}
  .kh__ctas{order:5;flex-direction:column;align-items:flex-start;gap:calc(18 * var(--kh-u))}
  /* Link eingerückt wie der Knopftext */
  .kh__link{margin-left:calc(28 * var(--kh-u))}
}

/* Faktenzeile */
.kh__facts-inner{display:grid;grid-template-columns:minmax(0,1fr);justify-content:start}
@media (min-width:600px){ .kh__facts-inner{grid-template-columns:repeat(2,max-content)} }
@media (min-width:880px){ .kh__facts-inner{grid-template-columns:repeat(3,max-content);justify-content:space-between} }
@media (min-width:1400px){ .kh__facts-inner{display:flex} }

/* Laptop und Desktop: eine Fensterhöhe */
@media (min-width:1100px) and (min-height:540px){
  .kh{height:calc(100vh - var(--kh-header-h));height:calc(100svh - var(--kh-header-h))}
  .kh__inner{grid-template-columns:repeat(2,minmax(0,1fr));min-height:0}
  .kh__visual{align-self:stretch;container-type:size}
  .kh__stage{width:min(100cqw,calc(360 * var(--kh-u)),(100cqh - calc(47 * var(--kh-u))) * 360 / 560)}
  .kh__title{font-size:clamp(44px,min(8.4vw,100cqw / var(--kh-k),var(--kh-t-hoch)),calc(128 * var(--kh-u)))}
  .kh__copy{--kh-t-hoch:calc((100vh - var(--kh-header-h)) * .47 - 205px)}
}
/* Überschrift nach Fensterhöhe begrenzen */
@media (min-width:1100px) and (min-height:540px){
  @supports (height:100svh){ .kh__copy{--kh-t-hoch:calc((100svh - var(--kh-header-h)) * .47 - 205px)} }
}
/* Sehr flache Fenster */
@media (min-width:1100px) and (min-height:540px) and (max-height:640px){
  .kh__inner{padding-top:clamp(24px,6vh,48px);padding-bottom:clamp(16px,3vh,40px)}
}

@media (prefers-reduced-motion:reduce){
  .kh,.kh__track,.kh__slide,.kh__dot span::after,.kh__glow i{transition:none}
}
/* Ohne Skript keine Punkte */
html:not(.js) .kh__dots{visibility:hidden}

/* Inhaltsabschnitte */
.inhalt-sektion{width:100%;max-width:var(--breite);margin-inline:auto;
  padding:var(--luft) var(--rand)}

/* Zeichnungen */
.zeichnung{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  z-index:-1;overflow:hidden;pointer-events:none;color:rgba(199,212,236,.21)}
.zeichnung::before{content:"";position:absolute;inset:0;opacity:.06;
  background-image:radial-gradient(rgba(255,255,255,.9) .5px,transparent .5px);
  background-size:3px 3px}
.zeichnung svg{position:absolute;display:block;height:auto;overflow:visible}
.zeichnung svg *{vector-effect:non-scaling-stroke}
.zeichnung .akzent{stroke:rgba(34,224,242,.46)}
.zeichnung text{font-family:var(--mono);font-size:20px;fill:currentColor;stroke:none}
.zeichnung text.akzent{fill:rgba(34,224,242,.52);stroke:none}

/* Hintergrund der Unterbereiche */
.atmos-seite{left:calc(50% - 50vw);right:auto;width:100vw;z-index:-2}
.atmos-flaeche{position:sticky;top:var(--kopf-h);overflow:hidden;
  height:calc(100vh - var(--kopf-h));height:calc(100svh - var(--kopf-h))}
.kk-sektion{position:relative}

/* Messblatt */
.z-messblatt{width:clamp(360px,30vw,620px);left:56%;top:clamp(60px,9vw,150px);translate:-50% 0}
/* Gedreht wird innen im SVG */
.z-messblatt .z-dreh{transform-origin:380px 500px;rotate:-7deg}
/* Turniertisch */
.z-tisch{width:clamp(1100px,112vw,3600px);left:50%;top:50%;translate:-50% -50%}
.z-tisch .z-dreh{transform-origin:800px 700px;rotate:-7deg}
.z-turniere{-webkit-mask-image:linear-gradient(90deg,#000 14%,rgba(0,0,0,.12) 33%,rgba(0,0,0,.12) 67%,#000 86%);
  mask-image:linear-gradient(90deg,#000 14%,rgba(0,0,0,.12) 33%,rgba(0,0,0,.12) 67%,#000 86%)}

@media (max-width:720px){
  .zeichnung{color:rgba(199,212,236,.2)}
  .z-messblatt{width:84vw;left:50%;top:24px}
}

/* Kundenkarte */
.kk-sektion{display:flex;flex-direction:column;
  padding:0;max-width:none}
.kk-sektion [hidden]{display:none !important}

/* Status */
.kk-status{display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:clamp(12px,.78vw,15px);font-family:var(--mono);font-weight:500;
  letter-spacing:.04em;margin-top:clamp(6px,.4vw,8px)}
.kk-status::before{content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0}
.kk-status--online{color:var(--muted)}
.kk-status--online::before{background:#34d399;box-shadow:0 0 6px #34d39966}
.kk-status--offline{color:var(--warn)}
.kk-status--offline::before{background:var(--warn);box-shadow:0 0 6px rgba(255,107,157,.4)}
.kk-status--prueft{color:var(--muted)}
.kk-status--prueft::before{background:var(--muted);animation:kkPulse 1.4s ease-in-out infinite}
@keyframes kkPulse{0%,100%{opacity:.4}50%{opacity:1}}

/* Kundenkarte: Rad
   Skaliert über --e (Entwurfspixel). */
.kk-rad-seite{--weich:#c7d4ec;
  /* Tablet und Handy */
  --e:calc(min(100vw - 2 * var(--rand), 640px) / 600);
  --d:calc(600 * var(--e));--m:calc(42 * var(--e));--s:calc(62 * var(--e));
  --sel1:calc(4 * var(--e));--sel2:calc(6 * var(--e));
  --ring2:calc(102 * var(--e));--rl:calc(65 * var(--e));
  --name-fs:max(11px,calc(12 * var(--e)));--ab-fs:max(10px,calc(10 * var(--e)));
  --innen:calc(300 * var(--e));--meld-w:calc(220 * var(--e));--mitte-gap:calc(10 * var(--e));--feld-gap:calc(10 * var(--e));
  --rfid:calc(26 * var(--e));--login-titel-fs:max(16px,calc(18 * var(--e)));
  --feld-h:max(44px,calc(50 * var(--e)));--feld-fs:max(14px,calc(15 * var(--e)));
  --sub-fs:max(11.5px,calc(12 * var(--e)));
  --spalte-gap:calc(14 * var(--e));
  --titel-fs:max(28px,calc(34 * var(--e)));--text-fs:max(14px,calc(14.5 * var(--e)));
  --panel-r:calc(18 * var(--e));--panel-pad:calc(22 * var(--e));
  --detail-gap:calc(12 * var(--e));--detail-abz:calc(56 * var(--e));--detail-kopf-gap:calc(16 * var(--e));
  --detail-name-fs:max(24px,calc(30 * var(--e)));--detail-ab-fs:max(12.5px,calc(13.5 * var(--e)));
  --wert-label-fs:max(11.5px,calc(12.5 * var(--e)));--wert-fs:max(17px,calc(19 * var(--e)));
  --werte-gap:calc(20 * var(--e));--praemie-fs:max(12.5px,calc(13.5 * var(--e)));
  --f-fs:max(11.5px,calc(12 * var(--e)));--f-rowgap:calc(12 * var(--e));--f-colgap:calc(20 * var(--e));
  --f-cols:2;--hinweis-fs:max(11.5px,calc(12 * var(--e)));
  --spalten-gap:calc(40 * var(--e));--sek-pad-y:calc(26 * var(--e));
  --breite-k:calc(1180 * var(--e));
  padding:clamp(28px,5vw,48px) var(--rand) clamp(40px,7vw,72px)}
.kk-rad-seite *{min-width:0}

.kk-rad-buehne{display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"kopf" "rad" "detail" "funk" "hinweis";
  width:100%;max-width:var(--d);margin-inline:auto;justify-items:stretch}

/* Rad */
.kk-rad{grid-area:rad;position:relative;width:var(--d);height:var(--d);
  justify-self:center;align-self:center;margin-block:clamp(10px,3vw,24px);
  pointer-events:none}
.kk-rad-ring{position:absolute;inset:calc(var(--m) - 1px);border-radius:50%;
  border:1px solid var(--line-2)}
.kk-rad-ring--innen{inset:var(--ring2);border:1px dashed var(--line)}
.kk-rad-rang{--r:calc(var(--d) / 2 - var(--m));
  position:absolute;left:calc(50% - var(--s) / 2);top:calc(50% - var(--s) / 2);
  width:var(--s);height:var(--s);padding:0;border:0;border-radius:50%;
  background:none;color:inherit;font:inherit;cursor:pointer;pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
  transform:rotate(var(--w)) translateY(calc(var(--r) * -1)) rotate(calc(var(--w) * -1))}
/* Tippfläche mindestens 46 px */
.kk-rad-rang::before{content:"";position:absolute;inset:min(0px,calc((var(--s) - 46px) / 2));border-radius:50%}
.kk-rad-abz{display:block;width:100%;height:100%;border-radius:50%;
  transition:transform var(--t-druck) var(--ease-out),box-shadow var(--t-ui) ease}
.kk-rad-abz svg,.kk-rad-abz img{display:block;width:100%;height:100%}
/* Ersatz ohne Abzeichen */
.kk-rad-abz:empty{background:var(--ink-3);border:2px solid var(--ton)}
.kk-rad-rang[aria-pressed="true"] .kk-rad-abz{
  box-shadow:0 0 0 var(--sel1) var(--ink),0 0 0 var(--sel2) var(--ton)}
.kk-rad-rang:active .kk-rad-abz{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .kk-rad-rang:hover .kk-rad-abz{transform:scale(1.06)}
}
.kk-rad-rang:focus-visible{outline:none}
.kk-rad-rang:focus-visible .kk-rad-abz{outline:2px solid var(--cyan);outline-offset:calc(var(--sel2) + 3px)}
/* Name */
.kk-rad-marke{position:absolute;left:50%;top:50%;display:grid;justify-items:center;gap:1px;
  white-space:nowrap;text-align:center;line-height:1.25;
  transform:translate(-50%,-50%) rotate(var(--w)) translateY(var(--rl)) rotate(calc(var(--w) * -1))}
.kk-rad-marke b{font-family:var(--display);font-weight:600;font-size:var(--name-fs);color:var(--paper)}
.kk-rad-rang[aria-pressed="true"] .kk-rad-marke b{color:var(--ton)}
/* Mitte nur am Handy */
.kk-rad-mitte{display:none}

/* Anmeldung */
.kk-rad-login{grid-area:rad;place-self:center;position:relative;z-index:1;
  width:var(--innen);display:flex;flex-direction:column;align-items:center;
  gap:var(--mitte-gap);text-align:center}
.kk-rad-rfid{width:var(--rfid);height:var(--rfid);color:var(--cyan)}
.kk-rad-login-titel{font-family:var(--display);font-weight:600;font-size:var(--login-titel-fs);
  line-height:1.3;color:var(--paper)}
.kk-rad-eingabe{width:100%;height:var(--feld-h);padding:0 18px;
  border:1px solid var(--line-2);border-radius:12px;background:rgba(7,11,22,.7);
  color:var(--paper);font-family:var(--mono);font-size:var(--feld-fs);letter-spacing:.12em;
  text-transform:uppercase;outline:none;
  transition:border-color var(--t-ui) ease,box-shadow var(--t-ui) ease}
.kk-rad-eingabe::placeholder{color:#5a6784;text-transform:none}
.kk-rad-eingabe:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,91,240,.18)}
.kk-rad-knopf{width:100%;height:var(--feld-h);margin-top:calc(var(--feld-gap) - var(--mitte-gap));
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--paper);border-radius:12px;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:600;font-size:var(--feld-fs);white-space:nowrap;cursor:pointer;
  transition:background var(--t-ui) ease,transform var(--t-druck) var(--ease-out)}
.kk-rad-knopf svg{width:calc(var(--feld-fs) + 1px);height:calc(var(--feld-fs) + 1px);flex-shrink:0}
.kk-rad-knopf:active{transform:scale(.97)}
.kk-rad-knopf:disabled{opacity:.55;cursor:default;transform:none}
@media (hover:hover) and (pointer:fine){ .kk-rad-knopf:hover{background:#fff} }
.kk-rad-sub{font-size:var(--sub-fs);line-height:1.4;color:var(--muted)}
/* Meldungen unter der Anmeldung */
.kk-rad-meldungen{position:absolute;top:100%;left:50%;width:var(--meld-w);margin:calc(var(--mitte-gap) * .6) 0 0 calc(var(--meld-w) / -2);
  display:grid;justify-items:center;gap:calc(var(--mitte-gap) * .5)}
.kk-rad-fehler{font-size:var(--sub-fs);line-height:1.4;color:var(--warn);text-wrap:balance}
.kk-rad-fehler:empty{display:none}
/* Fehler statt Status */
.kk-rad-fehler:not(:empty)+.kk-status{display:none}
.kk-rad-login .kk-status{margin:0;font-size:var(--ab-fs)}
/* Ohne Skript keine Eingabe */
html:not(.js) .kk-rad-eingabe,html:not(.js) .kk-rad-knopf,html:not(.js) .kk-rad-meldungen{display:none}

/* Titel, Rang, Funktionen */
.kk-rad-kopf{grid-area:kopf;display:grid;gap:var(--spalte-gap)}
.kk-rad-titel{margin:0;font-family:var(--display);font-weight:600;font-size:var(--titel-fs);
  line-height:1.06;letter-spacing:-.02em;color:var(--paper);text-wrap:balance}
.kk-rad-beschreibung{font-size:var(--text-fs);line-height:1.55;color:var(--weich);max-width:30em}
.kk-rad-detail{grid-area:detail;margin-top:var(--spalte-gap);display:grid;gap:var(--detail-gap);
  padding:var(--panel-pad);border-radius:var(--panel-r);background:var(--ink-3);border:1px solid var(--line)}
.kk-rad-detail-kopf{display:flex;align-items:center;gap:var(--detail-kopf-gap)}
.kk-rad-detail-kopf>div{display:grid;gap:4px}
.kk-rad-detail-abz{width:var(--detail-abz);height:var(--detail-abz);flex-shrink:0}
.kk-rad-detail-abz svg,.kk-rad-detail-abz img{display:block;width:100%;height:100%}
.kk-rad-detail-name{font-family:var(--display);font-weight:700;font-size:var(--detail-name-fs);line-height:1}
.kk-rad-detail-ab{font-size:var(--detail-ab-fs);line-height:1.4;color:var(--weich)}
.kk-rad-werte{display:flex;flex-wrap:wrap;gap:var(--detail-gap) var(--werte-gap)}
.kk-rad-werte>div{display:grid;gap:2px}
.kk-rad-werte dt{font-size:var(--wert-label-fs);line-height:1.35;color:var(--muted)}
.kk-rad-werte dd{font-family:var(--display);font-weight:600;font-size:var(--wert-fs);line-height:1.15;
  color:var(--paper);white-space:nowrap}
.kk-rad-praemie{display:flex;align-items:center;gap:10px;font-size:var(--praemie-fs);line-height:1.4;color:var(--weich)}
.kk-rad-praemie svg{width:calc(var(--praemie-fs) + 3px);height:calc(var(--praemie-fs) + 3px);flex-shrink:0;
  color:var(--ton,var(--cyan))}
.kk-rad-praemie b{font-weight:500;color:var(--paper)}
.kk-rad-funktionen{grid-area:funk;margin-top:var(--spalte-gap);display:grid;
  grid-template-columns:repeat(var(--f-cols),minmax(0,1fr));gap:var(--f-rowgap) var(--f-colgap)}
.kk-rad-funktionen li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.kk-rad-funktionen svg{width:calc(var(--f-fs) + 5px);height:calc(var(--f-fs) + 5px);color:var(--cyan)}
.kk-rad-funktionen div{display:grid;gap:2px}
.kk-rad-funktionen b{font-weight:500;font-size:calc(var(--f-fs) + 1px);line-height:1.3;color:var(--paper)}
.kk-rad-funktionen span{font-size:calc(var(--f-fs) - .5px);line-height:1.4;color:var(--muted)}
/* Fünfter Eintrag nur auf Desktop */
.kk-rad-funktionen li:nth-child(5){display:none}
.kk-rad-hinweis{grid-area:hinweis;margin-top:var(--spalte-gap);font-size:var(--hinweis-fs);
  line-height:1.4;color:var(--muted)}

/* Handy */
@media (max-width:599px){
  .kk-rad-seite{--d:min(100vw - 2 * var(--rand),420px);
    --m:calc(var(--d) * .07);--s:calc(var(--d) * .13);--rl:calc(var(--s) * 1.05);
    --ring2:calc(var(--m) + var(--s) * .55 + var(--d) * .043);--sel1:3px;--sel2:5px;
    --name-fs:11px;--ab-fs:10px;--spalte-gap:14px;--titel-fs:clamp(28px,8vw,34px);--text-fs:15px;
    --panel-r:18px;--panel-pad:20px;--detail-gap:12px;--detail-abz:52px;--detail-kopf-gap:14px;
    --detail-name-fs:26px;--detail-ab-fs:13px;--wert-label-fs:12px;--wert-fs:19px;--werte-gap:18px;
    --praemie-fs:13.5px;--f-fs:13px;--f-rowgap:14px;--f-cols:1;--hinweis-fs:13px;
    --innen:100%;--mitte-gap:12px;--feld-gap:10px;--rfid:26px;--login-titel-fs:20px;
    --feld-h:50px;--feld-fs:16px;--sub-fs:13px}
  .kk-rad-buehne{grid-template-areas:"kopf" "login" "rad" "hinweis" "detail" "funk";max-width:none}
  .kk-rad-login{grid-area:login;margin-top:22px;padding:22px 20px;border-radius:18px;
    background:rgba(16,23,40,.72);border:1px solid var(--line-2)}
  .kk-rad-meldungen{position:static;width:auto;margin:0}
  .kk-rad{margin-block:22px 12px}
  .kk-rad-mitte{position:absolute;left:50%;top:50%;width:calc(var(--d) * .4);
    margin:calc(var(--d) * -.14) 0 0 calc(var(--d) * -.2);
    display:grid;justify-items:center;gap:6px;text-align:center}
  .kk-rad-mitte-abz{width:calc(var(--d) * .19);height:calc(var(--d) * .19)}
  .kk-rad-mitte-abz svg,.kk-rad-mitte-abz img{display:block;width:100%;height:100%}
  .kk-rad-mitte b{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.1;color:var(--ton,var(--paper))}
  .kk-rad-hinweis{margin-top:0;text-align:center}
  .kk-rad-detail{margin-top:18px}
  .kk-rad-funktionen{margin-top:22px}
  .kk-rad-funktionen li:nth-child(5){display:grid}
}

/* Laptop und Desktop */
@media (min-width:1100px){
  .kk-rad-seite{
    --e:min(calc((100vh - var(--kopf-h)) / 698),calc(100vw / 1366));
    min-height:calc(100vh - var(--kopf-h));
    display:flex;align-items:center;padding:var(--sek-pad-y) var(--rand)}
  @supports (height:100svh){
    .kk-rad-seite{--e:min(calc((100svh - var(--kopf-h)) / 698),calc(100vw / 1366));
      min-height:calc(100svh - var(--kopf-h))}
  }
  .kk-rad-buehne{max-width:none;width:min(100%,var(--breite-k));
    grid-template-columns:var(--d) minmax(0,1fr);column-gap:var(--spalten-gap);
    grid-template-rows:1fr auto auto auto auto 1fr;
    grid-template-areas:"rad ." "rad kopf" "rad detail" "rad funk" "rad hinweis" "rad .";
    align-items:start}
  .kk-rad{margin:0}
}
/* Sehr flache Laptops */
@media (min-width:1100px) and (max-height:640px){
  .kk-rad-rfid{display:none}
}
@media (min-width:1600px) and (min-height:876px){
  .kk-rad-seite{
    --e:min(calc((100vh - var(--kopf-h)) / 1004),calc(100vw / 1920));
    --d:calc(860 * var(--e));--m:calc(60 * var(--e));--s:calc(88 * var(--e));
    --sel1:calc(6 * var(--e));--sel2:calc(8 * var(--e));
    --ring2:calc(134 * var(--e));--rl:calc(92 * var(--e));
    --name-fs:max(11px,calc(15 * var(--e)));--ab-fs:max(10px,calc(12 * var(--e)));
    --innen:calc(400 * var(--e));--meld-w:calc(320 * var(--e));--mitte-gap:calc(14 * var(--e));--feld-gap:calc(10 * var(--e));
    --rfid:calc(34 * var(--e));--login-titel-fs:max(16px,calc(24 * var(--e)));
    --feld-h:max(44px,calc(58 * var(--e)));--feld-fs:max(14px,calc(17 * var(--e)));
    --sub-fs:max(11.5px,calc(13.5 * var(--e)));
    --spalte-gap:calc(22 * var(--e));
    --titel-fs:max(28px,calc(46 * var(--e)));--text-fs:max(14px,calc(17 * var(--e)));
    --panel-r:calc(24 * var(--e));--panel-pad:calc(32 * var(--e));
    --detail-gap:calc(18 * var(--e));--detail-abz:calc(80 * var(--e));--detail-kopf-gap:calc(22 * var(--e));
    --detail-name-fs:max(24px,calc(38 * var(--e)));--detail-ab-fs:max(12.5px,calc(15 * var(--e)));
    --wert-label-fs:max(11.5px,calc(14 * var(--e)));--wert-fs:max(17px,calc(24 * var(--e)));
    --werte-gap:calc(30 * var(--e));--praemie-fs:max(12.5px,calc(15 * var(--e)));
    --f-fs:max(11.5px,calc(14.5 * var(--e)));--f-rowgap:calc(12 * var(--e));--f-colgap:calc(28 * var(--e));
    --f-cols:1;--hinweis-fs:max(11.5px,calc(14 * var(--e)));
    --spalten-gap:calc(64 * var(--e));--sek-pad-y:calc(40 * var(--e));
    --breite-k:calc(1400 * var(--e))}
  @supports (height:100svh){
    .kk-rad-seite{--e:min(calc((100svh - var(--kopf-h)) / 1004),calc(100vw / 1920))}
  }
  .kk-rad-funktionen li:nth-child(5){display:grid}
}

/* Hinweis Testbetrieb. Ohne das Element entfallen Abstand und Skalierung (:has). */
.kk-test-band{display:flex;justify-content:center;
  margin:calc(-1 * clamp(28px,5vw,48px)) calc(-1 * var(--rand)) clamp(22px,5vw,32px);
  border-bottom:1px solid rgba(34,224,242,.22);background:rgba(34,224,242,.06)}
.kk-test-band p{display:flex;align-items:flex-start;gap:.7em;margin:0;max-width:var(--breite);
  padding:clamp(9px,.75vw,14px) var(--rand);
  font-size:clamp(14px,.95vw,17px);line-height:1.4;color:var(--weich,#c7d4ec)}
.kk-test-band b{font-weight:600;color:var(--paper)}
.kk-test-punkt{flex:none;width:.5em;height:.5em;margin-top:.45em;border-radius:50%;background:var(--cyan)}
@media (min-width:1100px){
  .kk-rad-seite:has(> .kk-test-band){position:relative;
    --e:min(calc((100vh - var(--kopf-h)) / 666),calc((100vw - 2 * var(--rand) - 1.25rem) / 1180));
    padding-top:calc(54 * var(--e));padding-bottom:calc(12 * var(--e))}
  @supports (height:100svh){
    .kk-rad-seite:has(> .kk-test-band){--e:min(calc((100svh - var(--kopf-h)) / 666),calc((100vw - 2 * var(--rand) - 1.25rem) / 1180))}
  }
  .kk-test-band{position:absolute;top:0;left:0;right:0;height:calc(42 * var(--e));margin:0;align-items:center}
  .kk-test-band p{align-items:center;padding-block:0;white-space:nowrap;font-size:max(12.5px,calc(15 * var(--e)))}
  .kk-test-punkt{margin-top:0}
}
@media (min-width:1600px) and (min-height:876px){
  .kk-rad-seite:has(> .kk-test-band){
    --e:min(calc((100vh - var(--kopf-h)) / 926),calc((100vw - 2 * var(--rand) - 1.25rem) / 1400))}
  @supports (height:100svh){
    .kk-rad-seite:has(> .kk-test-band){--e:min(calc((100svh - var(--kopf-h)) / 926),calc((100vw - 2 * var(--rand) - 1.25rem) / 1400))}
  }
}

/* Ladeanzeige */
.kk-skeleton{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);
  width:100%;padding:clamp(32px,4vw,56px) clamp(24px,3vw,48px);
  background:rgba(16,23,40,.45);border:1px solid rgba(199,212,236,.06);
  border-radius:clamp(16px,1.2vw,24px)}
.kks-bone{background:rgba(199,212,236,.06);border-radius:clamp(6px,.4vw,8px);
  position:relative;overflow:hidden}
.kks-bone::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(199,212,236,.06),transparent);
  animation:kks-shimmer 1.6s ease-in-out infinite}
@keyframes kks-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.kks-icon{width:clamp(64px,5.5vw,96px);height:clamp(64px,5.5vw,96px);border-radius:50%;flex-shrink:0}
.kks-name{width:clamp(140px,14vw,220px);height:clamp(26px,2.4vw,38px)}
.kks-rang{width:clamp(80px,8vw,130px);height:clamp(14px,1vw,18px);margin-top:8px}
.kks-btn{width:clamp(90px,7vw,120px);height:clamp(34px,2.6vw,42px);border-radius:999px}
.kks-wert{width:clamp(60px,5vw,90px);height:clamp(22px,1.8vw,34px);margin-inline:auto}
.kks-label{width:clamp(50px,4vw,70px);height:clamp(11px,.7vw,13px);margin-inline:auto;margin-top:6px}
.kks-bar{width:100%;height:clamp(48px,3.4vw,64px)}
.kks-section{display:flex;flex-direction:column;gap:clamp(10px,.8vw,14px)}
.kks-section:nth-child(1){grid-column:1;grid-row:1}
.kks-section:nth-child(2){grid-column:2;grid-row:1}
.kks-section:nth-child(3){grid-column:1;grid-row:2}
.kks-section:nth-child(4){grid-column:2;grid-row:2}
.kks-h3{width:clamp(100px,10vw,160px);height:clamp(16px,1.2vw,20px)}
.kks-card{width:100%;height:clamp(52px,4vw,68px)}
.kks-card-sm{width:100%;height:clamp(44px,3.4vw,56px)}
.kks-reward-grid{width:100%;height:clamp(120px,10vw,180px)}
@media(max-width:720px){
  .kk-skeleton{padding:clamp(20px,5vw,32px) clamp(16px,4vw,24px)}
  .kk-skeleton .kk-profil-grid{grid-template-columns:1fr}
  .kks-section{grid-column:1!important;grid-row:auto!important}
  .kk-skeleton .kk-stats{grid-template-columns:1fr}
}

/* Profil */
.kk-profil{--rang-farbe:var(--cyan);--rang-licht:#ebfdff;--rang-schatten:#063d4e;
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);
  width:100%;padding:clamp(32px,4vw,56px) clamp(24px,3vw,48px);
  border-radius:clamp(16px,1.2vw,24px);
  opacity:0;transform:translateY(16px);
  min-height:60vh;
  min-height:60dvh}
.kk-profil.kk-eingeblendet{opacity:1;transform:none}

.kk-kopfzeile{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,1.5vw,24px);flex-wrap:wrap}
.kk-kopf-links{display:flex;align-items:center;gap:clamp(16px,1.5vw,24px)}
.kk-rang-icon{flex-shrink:0;width:clamp(64px,5.5vw,96px);height:clamp(64px,5.5vw,96px)}
.kk-rang-icon svg{width:100%;height:100%}
.kk-kopfzeile h2{margin:0;font-size:clamp(26px,2.6vw,42px);font-weight:600;
  letter-spacing:-.02em}
.kk-rang-zeile{display:flex;align-items:center;gap:clamp(8px,.6vw,12px);margin-top:4px}
.kk-rang-kanji{font-size:clamp(18px,1.4vw,26px);opacity:.7}
#kkRang{font-family:var(--display);font-weight:600;
  font-size:clamp(15px,1.1vw,20px);color:var(--rang-farbe)}
.kk-vip-badge{font-family:var(--mono);font-size:clamp(10px,.64vw,12px);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:var(--rang-farbe);
  padding:3px clamp(8px,.6vw,12px);border-radius:4px;line-height:1.4}
.kk-aufstieg-badge{font-family:var(--mono);font-size:clamp(10px,.64vw,12px);font-weight:600;
  color:var(--rang-farbe);border:1px solid currentColor;padding:2px clamp(7px,.5vw,10px);border-radius:4px;line-height:1.4}
.kk-aufstieg-badge[hidden]{display:none}
.kk-reward-neu{font-style:normal;font-family:var(--mono);font-size:.82em;font-weight:600;color:var(--cyan)}
/* Einmal beim ersten Anmelden nach einem Aufstieg */
.kk-rang-icon.kk-aufstieg svg{animation:kk-aufstieg .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes kk-aufstieg{
  0%{transform:scale(.6) rotate(-10deg);opacity:0}
  60%{transform:scale(1.06) rotate(2deg);opacity:1}
  100%{transform:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){.kk-rang-icon.kk-aufstieg svg{animation:none}}
.kk-kopf-rechts{display:flex;align-items:center;gap:clamp(8px,.6vw,12px);flex-shrink:0}
.kk-refresh{width:clamp(36px,2.4vw,44px);height:clamp(36px,2.4vw,44px);
  padding:0;display:grid;place-items:center;border-radius:50%;
  transition:border-color .25s,box-shadow .25s}
.kk-refresh-icon{width:clamp(15px,1vw,18px);height:clamp(15px,1vw,18px);
  transition:transform .4s cubic-bezier(.4,0,.2,1)}
.kk-refresh.kk-drehend .kk-refresh-icon{animation:kk-spin .6s cubic-bezier(.4,0,.2,1)}
@keyframes kk-spin{to{transform:rotate(360deg)}}
@keyframes kk-flash{0%,100%{border-color:rgba(199,212,236,.08)}
  50%{border-color:var(--rang-farbe)}}
.kk-logout{flex-shrink:0;height:clamp(36px,2.4vw,44px);
  padding:0 clamp(14px,1vw,22px);font-size:clamp(12px,.78vw,14px)}

.kk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.2vw,20px)}
.kk-stat{display:flex;flex-direction:column;align-items:center;
  gap:clamp(6px,.4vw,10px);padding:clamp(18px,1.6vw,28px);
  /* Deckender Grund ohne backdrop-filter */
  background:rgba(16,23,40,.82);border-radius:clamp(12px,.8vw,16px);
  border:1px solid rgba(199,212,236,.08);
  opacity:0;transform:translateY(20px)}
.kk-stat-wert{font-family:var(--mono);font-weight:500;
  font-size:clamp(22px,1.8vw,34px);color:var(--rang-farbe);
  font-variant-numeric:tabular-nums}
.kk-stat-label{font-size:clamp(13px,.8vw,15px);color:var(--muted)}

.kk-progress{background:rgba(16,23,40,.82);border-radius:clamp(12px,.8vw,16px);
  border:1px solid rgba(199,212,236,.08);
  padding:clamp(16px,1.4vw,24px);display:flex;flex-direction:column;
  gap:clamp(8px,.6vw,12px);opacity:0;transform:translateY(16px)}
.kk-progress-kopf{display:flex;justify-content:space-between;align-items:baseline;
  font-size:clamp(13px,.84vw,15px)}
.kk-progress-label{font-family:var(--display);font-weight:600}
.kk-progress-rest{font-family:var(--mono);font-size:clamp(12px,.74vw,14px);color:var(--muted)}
.kk-bar{height:clamp(8px,.55vw,12px);background:var(--ink-2);border-radius:999px;
  overflow:hidden}
.kk-bar-fill{height:100%;border-radius:999px;width:0;
  background:var(--rang-farbe)}

.kk-profil-grid{display:grid;grid-template-columns:3fr 2fr;
  gap:clamp(20px,2vw,32px);align-items:start}
.kk-rabatte{grid-column:1;grid-row:1}
.kk-gutscheine{grid-column:2;grid-row:1}
.kk-rewards{grid-column:1;grid-row:2}
.kk-history{grid-column:2;grid-row:2}

.kk-rabatte h3,.kk-rewards h3,.kk-gutscheine h3,.kk-reserv h3,.kk-history h3{
  font-size:clamp(15px,1vw,19px);margin-bottom:clamp(10px,.8vw,16px);
  font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.kk-rabatte,.kk-rewards,.kk-gutscheine,.kk-reserv,.kk-history{
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(16px)}

.kk-rabatt-hinweis{font-size:clamp(12px,.76vw,14px);color:var(--muted);
  margin-bottom:clamp(8px,.6vw,12px);font-family:var(--mono)}
.kk-rabatt-liste{display:flex;flex-direction:column;
  gap:clamp(10px,.8vw,14px);max-width:clamp(260px,22vw,360px)}
.kk-rabatt{display:flex;justify-content:space-between;align-items:center;
  padding:clamp(14px,1.1vw,18px) clamp(16px,1.3vw,22px);
  background:rgba(16,23,40,.55);border-radius:clamp(10px,.7vw,14px);
  border:1px solid rgba(199,212,236,.08);font-size:clamp(13px,.84vw,15px)}
.kk-rabatt-cat{display:flex;align-items:center;gap:clamp(6px,.5vw,10px);color:var(--muted)}
.kk-rabatt-icon{width:clamp(14px,.9vw,16px);height:clamp(14px,.9vw,16px);
  flex-shrink:0;opacity:.6}
.kk-rabatt-val{font-family:var(--mono);font-weight:600;color:var(--rang-farbe);
  font-size:clamp(15px,1.1vw,20px)}

.kk-reward-liste{display:grid;grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(4,auto);grid-auto-flow:column;
  gap:clamp(10px,.8vw,14px)}
.kk-reward{display:flex;align-items:center;gap:clamp(10px,.8vw,14px);
  padding:clamp(12px,1vw,16px) clamp(14px,1.1vw,18px);
  background:rgba(16,23,40,.55);border-radius:clamp(10px,.7vw,14px);
  border:1px solid rgba(199,212,236,.08);font-size:clamp(13px,.84vw,15px);
  transition:border-color .3s ease,box-shadow .3s ease}
.kk-reward-icon{flex-shrink:0;width:clamp(36px,2.8vw,48px);height:clamp(36px,2.8vw,48px)}
.kk-reward-icon svg{width:100%;height:100%}
.kk-reward-info{flex:1;display:flex;flex-direction:column;gap:2px}
.kk-reward-rang{font-family:var(--display);font-weight:600;
  font-size:clamp(13px,.9vw,16px);color:var(--paper)}
.kk-reward-text{font-size:clamp(12px,.76vw,14px);color:var(--muted)}
.kk-reward-status{flex-shrink:0;width:clamp(18px,1.2vw,22px);height:clamp(18px,1.2vw,22px)}
.kk-reward-status svg{width:100%;height:100%}
.kk-reward:not(.kk-abgeholt):not(.kk-gesperrt) .kk-reward-status{color:var(--cyan)}
.kk-reward.kk-abgeholt .kk-reward-status{color:var(--muted)}
.kk-reward.kk-gesperrt{opacity:.3}
.kk-reward.kk-gesperrt .kk-reward-rang{color:var(--muted)}
.kk-reward.kk-aktuell{border-color:rgba(34,224,242,.3);
  box-shadow:0 0 clamp(16px,1.5vw,28px) rgba(34,224,242,.08)}

.kk-gutschein-liste,.kk-reserv-liste,.kk-history-liste{display:flex;
  flex-direction:column;gap:clamp(6px,.5vw,10px)}
.kk-kauf,.kk-reserv-item{padding:clamp(12px,.9vw,16px) clamp(14px,1.1vw,18px);
  background:rgba(16,23,40,.55);border-radius:clamp(10px,.7vw,14px);
  border:1px solid rgba(199,212,236,.08);display:flex;align-items:center;
  gap:clamp(8px,.7vw,12px);font-size:clamp(13px,.84vw,15px)}
.kk-kauf-datum{font-family:var(--mono);font-size:clamp(11px,.7vw,13px);
  color:var(--muted);flex-shrink:0}
.kk-kauf-posten{flex:1;color:var(--muted)}
.kk-kauf-betrag{font-family:var(--mono);font-weight:500;color:var(--paper);
  flex-shrink:0;font-variant-numeric:tabular-nums}
.kk-kauf-icon{width:clamp(14px,.9vw,16px);height:clamp(14px,.9vw,16px);
  flex-shrink:0;opacity:.5}
.kk-gutschein-eintrag{border-color:rgba(91,63,214,.25)}
.kk-gutschein-betrag{color:var(--cyan) !important}
.kk-reserv-text{flex:1}
.kk-reserv-frist{font-family:var(--mono);font-size:clamp(11px,.7vw,13px);
  color:var(--muted);flex-shrink:0}

.kk-decay{display:flex;align-items:center;justify-content:center;gap:clamp(8px,.6vw,12px);
  font-size:clamp(13px,.82vw,15px);color:var(--muted);
  padding:clamp(14px,1.2vw,20px);text-align:center;
  background:rgba(16,23,40,.55);border-radius:clamp(10px,.7vw,14px);
  border:1px solid rgba(199,212,236,.08);
  opacity:0;transform:translateY(12px)}
.kk-decay strong{color:var(--paper)}
.kk-decay-icon{width:clamp(16px,1vw,18px);height:clamp(16px,1vw,18px);flex-shrink:0}

.kk-clip{overflow:hidden}

.kk-historie-btn{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:clamp(10px,.8vw,14px);
  padding:clamp(10px,.8vw,14px) clamp(14px,1.1vw,18px);
  background:transparent;border:1px dashed rgba(199,212,236,.18);
  border-radius:clamp(10px,.7vw,14px);color:var(--rang-farbe);
  font-family:var(--mono);font-weight:500;
  font-size:clamp(12px,.76vw,14px);letter-spacing:.04em;
  cursor:pointer;transition:border-color .3s,color .3s,background .3s}
.kk-historie-btn:hover{border-color:var(--rang-farbe);
  background:rgba(34,224,242,.06)}
.kk-historie-btn::before{content:'›';font-size:1.3em;opacity:.6;
  transition:transform .3s}
.kk-historie-btn:hover::before{transform:translateX(3px)}

.kk-modal-overlay{position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,11,22,.88)}
.kk-modal{width:min(90vw,640px);max-height:80vh;max-height:80dvh;
  background:rgba(16,23,40,.95);border-radius:clamp(14px,1vw,20px);
  border:1px solid rgba(199,212,236,.12);display:flex;flex-direction:column;
  box-shadow:0 24px 80px rgba(0,0,0,.5)}
.kk-modal-kopf{display:flex;justify-content:space-between;align-items:center;
  padding:clamp(16px,1.4vw,24px) clamp(20px,1.6vw,28px);
  border-bottom:1px solid rgba(199,212,236,.08)}
.kk-modal-kopf h3{margin:0;font-size:clamp(15px,1vw,19px);
  font-family:var(--display);font-weight:600}
.kk-modal-x{background:none;border:none;color:var(--paper);
  font-size:clamp(22px,1.6vw,28px);cursor:pointer;line-height:1;
  padding:4px;opacity:.6;transition:opacity .2s}
.kk-modal-x:hover{opacity:1}
.kk-modal-body{overflow-y:auto;padding:clamp(16px,1.4vw,24px) clamp(20px,1.6vw,28px);
  display:flex;flex-direction:column;gap:clamp(6px,.5vw,10px)}

/* Gewinn: Hinweis und Fenster */
.kk-gewinn{display:inline-flex;align-items:center;gap:clamp(7px,.5vw,10px);flex-shrink:0;
  height:clamp(36px,2.4vw,44px);padding:0 clamp(12px,.9vw,16px) 0 clamp(10px,.7vw,13px);
  border-radius:999px;border:1px solid color-mix(in srgb,var(--rang-farbe) 50%,transparent);
  background:color-mix(in srgb,var(--rang-farbe) 9%,transparent);color:var(--paper);
  font-family:var(--mono);font-weight:400;font-size:clamp(12px,.76vw,14px);white-space:nowrap;cursor:pointer;
  transition:border-color var(--t-ui) ease}
.kk-gewinn[hidden]{display:none}
.kk-gewinn svg{width:clamp(16px,1vw,19px);height:clamp(16px,1vw,19px);flex:none;color:var(--rang-farbe)}
.kk-gewinn b{font-weight:500;color:var(--rang-farbe)}
.kk-gewinn-pfeil{opacity:.6}
@media (hover:hover) and (pointer:fine){ .kk-gewinn:hover{border-color:var(--rang-farbe)} }
@media (max-width:1180px){ .kk-gewinn-lang{display:none} }

.kk-gewinn-fenster{width:min(92vw,clamp(480px,34vw,640px))}
.kk-gewinn-spiel{font-family:var(--mono);font-size:clamp(12px,.76vw,14px);color:var(--muted)}
.kk-gewinn-body{overflow-y:auto;overscroll-behavior:contain;padding:clamp(20px,1.8vw,32px) clamp(20px,2vw,36px);
  display:flex;flex-direction:column;gap:clamp(12px,.9vw,16px)}
.kk-gewinn-kopf{display:flex;align-items:center;gap:clamp(14px,1vw,18px)}
.kk-gewinn-pokal{width:clamp(52px,3.6vw,66px);height:clamp(52px,3.6vw,66px);border-radius:50%;flex:none;
  display:grid;place-items:center;color:var(--rang-farbe);
  border:1px solid color-mix(in srgb,var(--rang-farbe) 45%,transparent);
  background:color-mix(in srgb,var(--rang-farbe) 7%,transparent)}
.kk-gewinn-pokal svg{width:52%;height:52%}
.kk-gewinn-kopf h3{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(23px,1.9vw,34px);
  line-height:1.1;letter-spacing:-.01em}
.kk-gewinn-gruss{margin:clamp(4px,.4vw,7px) 0 0;color:#c7d4ec;font-size:clamp(14px,.9vw,16px);line-height:1.45}
.kk-gewinn-feld{display:flex;flex-direction:column;gap:clamp(3px,.3vw,6px);min-width:0;
  padding:clamp(11px,.8vw,14px) clamp(14px,1vw,18px);
  background:rgba(16,23,40,.55);border:1px solid rgba(199,212,236,.08);border-radius:clamp(10px,.7vw,14px)}
.kk-gewinn-lbl{font-family:var(--mono);font-size:clamp(11.5px,.72vw,13px);color:var(--muted)}
.kk-gewinn-preis{font-weight:500;font-size:clamp(15px,1vw,18px);color:var(--paper)}
.kk-gewinn-wert{font-family:var(--mono);font-weight:500;font-size:clamp(15px,1vw,18px);color:var(--rang-farbe);white-space:nowrap}
.kk-gewinn-raster{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(8px,.6vw,12px)}
/* Weitere Gewinne */
.kk-gewinn-weitere{display:flex;flex-direction:column;gap:clamp(6px,.5vw,9px)}
.kk-gewinn-weitere[hidden]{display:none}
.kk-gewinn-weitere ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(6px,.5vw,9px)}
.kk-gewinn-zeile{font-size:clamp(13px,.82vw,14.5px);color:#c7d4ec;line-height:1.45}
.kk-gewinn-ort{margin:0;display:flex;align-items:flex-start;gap:clamp(8px,.6vw,11px);
  font-size:clamp(13.5px,.86vw,15px);color:#c7d4ec;line-height:1.5}
.kk-gewinn-ort svg{width:clamp(17px,1.05vw,20px);height:clamp(17px,1.05vw,20px);flex:none;margin-top:.15em;color:var(--cyan)}
.kk-gewinn-ic-credit,.kk-gewinn-credit .kk-gewinn-ic-ort{display:none}
.kk-gewinn-credit .kk-gewinn-ic-credit{display:block}
.kk-gewinn-hinweis{margin:0;font-size:clamp(12.5px,.8vw,14px);color:var(--muted);line-height:1.5}
.kk-gewinn-fuss{display:flex;align-items:center;gap:clamp(12px,1vw,18px);
  padding:clamp(14px,1.1vw,20px) clamp(20px,2vw,36px) clamp(16px,1.3vw,22px);border-top:1px solid rgba(199,212,236,.08)}
.kk-gewinn-haken{flex:1;display:flex;align-items:center;gap:clamp(10px,.7vw,13px);min-height:44px;
  font-size:clamp(13.5px,.84vw,15px);color:#c7d4ec;line-height:1.45;cursor:pointer}
.kk-gewinn-haken input{width:clamp(18px,1.1vw,21px);height:clamp(18px,1.1vw,21px);margin:0;flex:none;accent-color:var(--cyan);cursor:pointer}
.kk-gewinn-ok{height:clamp(44px,2.8vw,52px);padding:0 clamp(20px,1.4vw,26px);font-size:clamp(14px,.9vw,16px);flex:none}
@media (max-width:720px){
  .kk-gewinn-fuss{flex-direction:column;align-items:stretch}
  .kk-gewinn-ok{width:100%}
  .kk-gewinn-raster{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .kk-profil,.kk-stat,.kk-progress,.kk-rabatte,.kk-rewards,.kk-gutscheine,
  .kk-reserv,.kk-history,.kk-decay{opacity:1 !important;transform:none !important}
  .kk-bar-fill{transition:none !important}
  .kk-rad-abz{transition:none !important}
}

@media (max-width:720px){
  .kk-profil{padding:clamp(20px,5vw,32px) clamp(16px,4vw,24px)}
  .kk-profil-grid{grid-template-columns:1fr}
  .kk-rabatte,.kk-gutscheine,.kk-rewards,.kk-history{grid-column:1}
  .kk-rabatte{grid-row:auto}.kk-gutscheine{grid-row:auto}
  .kk-rewards{grid-row:auto}.kk-history{grid-row:auto}
  .kk-stats{grid-template-columns:1fr}
  .kk-reward-liste{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  .kk-kopf-links{gap:12px}
  .kk-rang-icon{width:52px;height:52px}
  .kk-kauf{flex-wrap:wrap;gap:6px}
  .kk-clip{max-height:none !important}
  .kk-historie-btn{display:none}
}

/* Turniere: Termin-Finder */
.turniere{position:relative;isolation:isolate;
  --vh:100vh;
  --tf-soft:#c7d4ec;
  --tf-r:clamp(14px,1.1vw,20px);
  --tf-rk:clamp(10px,.8vw,14px);
  --tf-zh:clamp(52px,calc(var(--vh)*.074),78px)}
@supports (height:100svh){.turniere{--vh:100svh}}
.inhalt-sektion.turniere{max-width:calc(var(--breite) + 2*var(--rand));
  display:flex;flex-direction:column;gap:clamp(14px,calc(var(--vh)*.028),34px)}
:where(.tf-finder) button,:where(.tf-finder) input{font:inherit;color:inherit}
/* hidden im Finder */
.tf-finder [hidden]{display:none!important}

/* Zwei Seiten: Termine und Leaderboards, übereinander */
.tf-buehne{display:grid;align-items:start;min-width:0}
.tf-buehne > .tf-seite{grid-area:1/1;min-width:0;display:flex;flex-direction:column;gap:clamp(14px,calc(var(--vh)*.028),34px)}
/* Verborgene Seite behält ihren Platz: die Bühne ist immer so hoch wie die höhere */
html.js .tf-finder .tf-buehne > .tf-seite[hidden]{display:flex!important;visibility:hidden;pointer-events:none}
.tf-buehne.tf-wechselt{overflow:clip;overflow-clip-margin:24px}

/* Kopf */
.tf-kopf{display:flex;flex-direction:column;gap:clamp(6px,calc(var(--vh)*.012),12px)}
.tf-kopf-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.tf-kopf :is(h1,h2):focus:not(:focus-visible){outline:none}
.tf-lb-knopf{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;height:clamp(40px,calc(var(--vh)*.06),50px);
  padding:0 clamp(16px,1.1vw,22px);border-radius:var(--r-pille);border:1px solid var(--line-2);background:transparent;
  color:var(--paper);cursor:pointer;font-weight:500;font-size:clamp(14px,.9vw,17px);
  transition:border-color var(--t-ui) ease,transform var(--t-druck) var(--ease-out)}
.tf-lb-knopf svg{width:1.15em;height:1.15em;color:var(--cyan);flex-shrink:0;transition:transform var(--t-ui) var(--ease-out)}
.tf-lb-knopf:active{transform:scale(.97)}
.tf-lb-knopf:focus-visible,.tf-info-knopf:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .tf-lb-knopf:hover{border-color:rgba(199,212,236,.4)}
  #tfLbAuf:hover svg{transform:translateX(3px)}
  .tf-lb-zurueck:hover svg{transform:translateX(-3px)}
  .tf-info-knopf:hover{background:rgba(34,224,242,.1)}
}
html:not(.js) .tf-lb-knopf,html:not(.js) .tf-info-knopf{display:none}
/* Handy: Knopf als Pfeil neben der Überschrift */
@media (max-width:599px){
  .tf-kopf-zeile{flex-wrap:nowrap}
  .tf-kopf-zeile :is(h1,h2){min-width:0}
  .tf-lb-knopf{width:44px;height:44px;padding:0;justify-content:center}
  .tf-lb-knopf span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .tf-lb-knopf svg{width:20px;height:20px}
}
.tf-kopf :is(h1,h2){font-size:clamp(28px,min(2.6vw,calc(var(--vh)*.056)),54px)}
.tf-hinweise{display:flex;flex-direction:column;gap:4px}
.tf-hinweise p{display:flex;align-items:center;gap:10px;font-size:clamp(14px,.92vw,18px);color:var(--muted)}
.tf-hinweise > p:first-child{color:var(--tf-soft)}
.tf-hinweise svg{width:1.15em;height:1.15em;color:var(--cyan);flex-shrink:0}
.tf-hinweise a{color:var(--cyan);font-weight:500;text-decoration:none}
.tf-hinweise a:hover{text-decoration:underline;text-underline-offset:3px}
.tf-hinweise p.tf-mw-zeile{align-items:flex-start}
/* Most Wanted: Rahmen in Cyan, Hinweis mittig auf der oberen Kante */
.tf-mw-box{position:relative;display:flex;flex-direction:column;gap:4px;flex-basis:100%;
  margin-top:clamp(17px,calc(var(--vh)*.022),20px);padding:clamp(16px,calc(var(--vh)*.022),20px) clamp(12px,1vw,18px) clamp(10px,calc(var(--vh)*.014),14px);
  border:1px solid color-mix(in srgb,var(--cyan) 55%,transparent);border-radius:calc(var(--tf-r) + 6px)}
.tf-mw-bald{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:.2em .9em;white-space:nowrap;
  font-family:var(--mono);font-size:clamp(11px,.7vw,13px);line-height:1.5;color:var(--cyan);
  background:var(--ink-2);border:1px solid color-mix(in srgb,var(--cyan) 70%,transparent);border-radius:var(--r-pille)}
.tf-mw-zeile svg{margin-top:.18em}
.tf-info-knopf{position:relative;display:inline-grid;place-items:center;flex-shrink:0;width:clamp(21px,1.3vw,25px);height:clamp(21px,1.3vw,25px);
  margin:-.1em 0 0 -2px;border-radius:50%;border:1px solid rgba(34,224,242,.5);background:transparent;color:var(--cyan);cursor:pointer;
  transition:background var(--t-ui) ease,transform var(--t-druck) var(--ease-out)}
/* Größere Trefferfläche als der sichtbare Ring */
.tf-info-knopf::after{content:"";position:absolute;inset:-10px;border-radius:50%}
.tf-hinweise .tf-info-knopf svg{width:92%;height:92%;color:currentColor;margin:0}
.tf-info-knopf:active{transform:scale(.94)}

/* Leaderboards */
.turniere{--tf-lbz:clamp(38px,calc(var(--vh)*.05),46px)}
.tf-lb-stand{font-family:var(--mono);font-size:clamp(12.5px,.76vw,15px);color:var(--muted);min-height:1lh}
.tf-lb-sparten{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(34px,calc(var(--vh)*.05),46px) clamp(16px,1.4vw,28px);
  margin-top:clamp(10px,calc(var(--vh)*.014),16px)}
@media (min-width:1200px){.tf-lb-sparten{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Je Turnierformat ein Rahmen, die Bezeichnung mittig auf der oberen Kante */
.tf-lb-sparte{--rahmen:color-mix(in srgb,var(--magenta) 72%,var(--violet));position:relative;display:grid;grid-row:span 2;
  grid-template-rows:subgrid;row-gap:clamp(12px,calc(var(--vh)*.018),18px);min-width:0;
  padding:clamp(26px,calc(var(--vh)*.038),34px) clamp(10px,.9vw,18px) clamp(10px,.9vw,18px);
  border:1px solid color-mix(in srgb,var(--rahmen) 62%,transparent);border-radius:calc(var(--tf-r) + 6px)}
.tf-lb-format{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);margin:0;padding:.32em 1.1em;white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:clamp(16px,1.1vw,21px);line-height:1.2;color:var(--paper);
  background:var(--ink-2);border:1px solid color-mix(in srgb,var(--rahmen) 80%,transparent);border-radius:var(--r-pille)}
.tf-lb-sparte-kopf{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.tf-lb-sparte-kopf p{max-width:56ch;margin:0;color:var(--muted);font-size:clamp(13px,.8vw,15.5px)}
.tf-lb-zeit{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tf-lb-zeit .tf-pille{height:clamp(36px,calc(var(--vh)*.054),42px)}
.tf-lb-season{font-family:var(--mono);color:var(--tf-soft)}
.tf-lb-sparte-kopf .tf-lb-season{color:var(--tf-soft);font-size:clamp(12.5px,.76vw,14.5px)}
.tf-lb-tafeln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,.9vw,16px);align-items:start}
.tf-lb-tafel{min-width:0;padding:clamp(14px,calc(var(--vh)*.026),24px) clamp(12px,1vw,20px);border-radius:var(--tf-r);
  background:var(--ink-3);border:1px solid var(--line)}
.tf-lb-tafel h4{font-family:var(--display);font-weight:600;font-size:clamp(16px,1.05vw,20px);line-height:1.2}
.tf-lb-regel{margin-top:2px;min-height:2.9em;color:var(--muted);font-size:clamp(12.5px,.74vw,14.5px);line-height:1.45}
.tf-lb-liste{list-style:none;margin-top:clamp(8px,calc(var(--vh)*.014),14px);min-height:calc(10 * var(--tf-lbz))}
.tf-lb-liste li{position:relative;display:grid;grid-template-columns:1.8em minmax(0,1fr) auto;align-items:center;gap:clamp(8px,.6vw,12px);
  height:var(--tf-lbz);border-top:1px solid var(--line);font-size:clamp(13.5px,.84vw,16px)}
.tf-lb-liste li:first-child{border-top:0}
.tf-lb-leader li{grid-template-columns:minmax(0,1fr) auto}
.tf-lb-platz{font-family:var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.tf-lb-platz.p1{color:#dfae55}
.tf-lb-platz.p2{color:var(--paper)}
.tf-lb-platz.p3{color:#c98d5e}
.tf-lb-wer{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.tf-lb-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--paper);font-weight:500}
.tf-lb-neben{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:.74em;color:var(--muted)}
.tf-lb-wert{white-space:nowrap;color:var(--tf-soft)}
.tf-lb-wert b{font-family:var(--display);font-weight:600;color:var(--paper);font-variant-numeric:tabular-nums}
.tf-lb-liste li.tf-lb-hinweis{display:block;height:auto;padding:12px 0;border:0;color:var(--muted)}
/* Top 5 der Season: gestrichelte Linie unter dem letzten Platz mit Preis */
.tf-lb-liste li.tf-lb-schnitt::before{content:"";position:absolute;left:0;right:0;bottom:-1px;border-top:1px dashed var(--rahmen)}
.tf-lb-liste li.tf-lb-schnitt::after{content:attr(data-schnitt);position:absolute;right:0;bottom:0;transform:translateY(50%);
  padding:0 .55em;background:var(--ink-3);font-family:var(--mono);font-size:clamp(10.5px,.62vw,12.5px);line-height:1.6;
  color:color-mix(in srgb,var(--rahmen) 55%,#fff)}
.tf-lb-liste li.tf-lb-schnitt + li{border-top-color:transparent}
/* Noch nicht freigeschaltet: Platzhalterzeilen ohne Namen */
.tf-lb-bald .tf-lb-tafel{border-style:dashed;border-color:var(--line-2)}
.tf-lb-geist .tf-lb-platz{opacity:.55}
.tf-lb-balken{height:.5em;width:58%;border-radius:4px;background:rgba(199,212,236,.07)}
.tf-lb-geist:nth-child(3n+2) .tf-lb-balken{width:44%}
.tf-lb-geist:nth-child(3n) .tf-lb-balken{width:70%}
.tf-lb-marke{display:inline-block;padding:4px 10px;border-radius:var(--r-pille);border:1px solid rgba(34,224,242,.35);color:var(--cyan);
  font-family:var(--mono);font-size:clamp(11.5px,.7vw,13px);font-weight:500;letter-spacing:0}

/* Fenster: Most Wanted Format */
.tf-mw-overlay[hidden]{display:none}
.tf-mw-overlay:not([hidden]){animation:tf-mw-ov .2s ease-out}
.tf-mw-overlay:not([hidden]) .kk-modal{animation:tf-mw-rein .26s var(--ease-out)}
@keyframes tf-mw-ov{from{opacity:0}}
@keyframes tf-mw-rein{from{opacity:0;transform:translateY(8px) scale(.98)}}
.tf-mw-fenster{width:min(92vw,clamp(480px,40vw,700px))}
.tf-mw-text{gap:clamp(8px,.6vw,12px)}
.tf-mw-text h4{margin-top:clamp(6px,.5vw,10px);font-family:var(--display);font-weight:600;font-size:clamp(15px,1vw,19px);color:var(--paper)}
.tf-mw-text p{color:var(--muted);font-size:clamp(14px,.88vw,17px);line-height:1.6}
@media (prefers-reduced-motion:reduce){
  .tf-mw-overlay:not([hidden]),.tf-mw-overlay:not([hidden]) .kk-modal{animation:none}
}

.tf-raster{display:grid;grid-template-columns:minmax(290px,.8fr) minmax(0,1.2fr) minmax(280px,.95fr);
  gap:clamp(18px,2.2vw,48px);align-items:start}

/* Filter */
.tf-filter{display:flex;flex-direction:column;gap:clamp(14px,calc(var(--vh)*.03),30px);
  padding:clamp(16px,calc(var(--vh)*.032),32px);border-radius:var(--tf-r);background:var(--ink-3);border:1px solid var(--line)}
.tf-filter fieldset{border:0;min-width:0}
.tf-filter legend{padding:0;font-family:var(--display);font-weight:600;font-size:clamp(17px,1.15vw,22px);line-height:1.2}
.tf-unter{font-size:clamp(13px,.76vw,15px);color:var(--muted);margin-top:2px}
.tf-optionen{display:grid;gap:clamp(6px,calc(var(--vh)*.011),10px);margin-top:clamp(10px,calc(var(--vh)*.018),16px)}
.tf-option{position:relative;display:flex;align-items:center;gap:clamp(10px,.8vw,14px);
  min-height:clamp(44px,calc(var(--vh)*.074),62px);padding:8px clamp(12px,.9vw,16px);border-radius:var(--tf-rk);
  border:1px solid var(--line);cursor:pointer;transition:border-color .2s ease,background .2s ease,opacity .2s ease}
.tf-option input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.tf-option:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:2px}
.tf-haken{width:clamp(20px,1.3vw,26px);height:clamp(20px,1.3vw,26px);border-radius:28%;border:1.5px solid var(--line-2);
  display:grid;place-items:center;flex-shrink:0;transition:background .15s ease,border-color .15s ease}
.tf-haken svg{width:64%;height:64%;color:var(--ink);opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .2s var(--ease-out)}
.tf-option .tf-t{flex:1;font-size:clamp(14px,.9vw,17px);color:var(--tf-soft);line-height:1.35}
.tf-option .tf-sym{width:clamp(18px,1.1vw,22px);height:clamp(18px,1.1vw,22px);color:var(--f);flex-shrink:0}
.tf-option.tf-an{border-color:rgba(34,224,242,.45);background:rgba(34,224,242,.05)}
.tf-option.tf-an .tf-haken{background:var(--cyan);border-color:var(--cyan)}
.tf-option.tf-an .tf-haken svg{opacity:1;transform:none}
.tf-option.tf-an .tf-t{color:var(--paper);font-weight:500}
/* Optionen ohne Treffer abgeschwächt */
.tf-option.tf-still:not(.tf-an),.tf-pille.tf-still:not([aria-pressed="true"]){opacity:.42}
.tf-tage{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(10px,calc(var(--vh)*.018),16px)}
.tf-pille{height:clamp(38px,calc(var(--vh)*.064),50px);padding:0 clamp(14px,1vw,22px);border-radius:var(--r-pille);
  border:1px solid var(--line-2);background:transparent;color:var(--tf-soft);cursor:pointer;
  font-weight:500;font-size:clamp(13.5px,.85vw,17px);transition:background .2s ease,color .2s ease,border-color .2s ease,transform var(--t-druck) var(--ease-out)}
.tf-pille[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tf-pille:active,.tf-blaettern button:not(:disabled):active{transform:scale(.97)}

/* Termine */
.tf-termine{display:flex;flex-direction:column;min-width:0;align-self:stretch;container-type:size}
.tf-termine-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:1.6em}
.tf-termine-kopf :is(h2,h3){font-size:clamp(19px,1.4vw,27px);line-height:1.2}
.tf-leise{border:0;background:none;cursor:pointer;color:var(--muted);font-size:clamp(13.5px,.8vw,15.5px);
  text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.tf-blaettern{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:clamp(8px,calc(var(--vh)*.014),12px);height:clamp(40px,calc(var(--vh)*.064),50px);
  padding:4px;border:1px solid var(--line);border-radius:var(--tf-rk)}
.tf-blaettern button{display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 clamp(10px,.8vw,14px);
  border-radius:calc(var(--tf-rk) - 3px);border:0;background:transparent;color:var(--paper);cursor:pointer;
  font-size:clamp(13.5px,.82vw,16px);font-weight:500;transition:background .2s ease,opacity .2s ease,transform var(--t-druck) var(--ease-out)}
.tf-blaettern svg{width:1.1em;height:1.1em}
.tf-blaettern button:disabled{opacity:.3;cursor:default}
.tf-stelle{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:clamp(12.5px,.76vw,15px);
  color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tf-punkte{display:flex;gap:clamp(4px,.3vw,6px)}
.tf-punkte i{width:clamp(5px,.36vw,8px);aspect-ratio:1;border-radius:50%;background:var(--line-2);transition:background .2s ease}
.tf-punkte i.tf-an{background:var(--cyan)}
/* Sehr schmal: ohne Punkte */
@container (max-width:310px){ .tf-punkte{display:none} }
.tf-liste{margin-top:clamp(6px,calc(var(--vh)*.01),10px);flex:1 1 0;min-height:0;overflow:hidden}
/* Blättern */
.tf-liste.tf-vor{animation:tf-vor .24s var(--ease-out)}
.tf-liste.tf-zurueck{animation:tf-zurueck .24s var(--ease-out)}
@keyframes tf-vor{from{opacity:0;transform:translateX(14px)}}
@keyframes tf-zurueck{from{opacity:0;transform:translateX(-14px)}}
.tf-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;height:var(--tf-zh);
  border-top:1px solid var(--line);border-radius:var(--tf-rk) var(--tf-rk) 0 0;transition:background .2s ease}
.tf-zeile.tf-an{background:rgba(34,224,242,.05);box-shadow:inset 0 0 0 1px rgba(34,224,242,.45);border-radius:var(--tf-rk);border-top-color:transparent}
.tf-zeile.tf-an + .tf-zeile{border-top-color:transparent}
.tf-waehlen{display:grid;grid-template-columns:clamp(88px,6.6vw,136px) auto minmax(0,1fr);align-items:center;
  column-gap:clamp(12px,1.1vw,20px);height:100%;min-width:0;padding:0 4px 0 clamp(8px,.7vw,12px);
  border:0;background:transparent;text-align:left;cursor:pointer;border-radius:var(--tf-rk)}
.tf-waehlen .tf-d{font-family:var(--mono);font-size:clamp(13px,.8vw,16px);color:var(--paper);white-space:nowrap;line-height:1.35}
.tf-waehlen .tf-d small{display:block;font-size:.88em;color:var(--muted)}
.tf-waehlen .tf-n{min-width:0;font-family:var(--display);font-weight:600;font-size:clamp(16px,1.05vw,21px);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-waehlen .tf-n small{display:block;font-family:var(--body);font-weight:300;font-size:clamp(12.5px,.76vw,15px);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis}
.tf-zeile.tf-an .tf-n{color:var(--cyan)}
.tf-anmelden{display:inline-flex;align-items:center;gap:5px;height:100%;padding:0 clamp(10px,.8vw,14px) 0 8px;
  color:var(--cyan);font-weight:500;font-size:clamp(13.5px,.86vw,17px);text-decoration:none;white-space:nowrap}
.tf-anmelden svg{width:1.05em;height:1.05em}
.tf-anmelden:hover{text-decoration:underline;text-underline-offset:3px}
.tf-anmelden.tf-voll{color:var(--muted);font-weight:400}
/* Keine Termine */
.tf-liste.tf-ist-leer{display:flex;flex-direction:column}
.tf-leer{flex:1 1 auto;min-height:calc(var(--tf-zh) * 3);margin-top:clamp(8px,calc(var(--vh)*.014),12px);
  padding:clamp(20px,2vw,36px);border:1.5px dashed var(--line-2);border-radius:var(--tf-r);color:var(--tf-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,.7vw,12px);text-align:center}
.tf-leer b{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.25vw,24px);line-height:1.2;color:var(--paper)}
.tf-leer span{max-width:36ch;color:var(--muted);font-size:clamp(14px,.84vw,16px);line-height:1.5;text-wrap:balance}
.tf-leer .tf-leise{margin-top:clamp(2px,.3vw,6px)}
/* Schmale Spalte */
@container (max-width:470px){
  .tf-waehlen{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:center;row-gap:1px}
  .tf-waehlen .tf-zeichen{grid-row:1/3;grid-column:1}
  .tf-waehlen .tf-n{grid-column:2;grid-row:1}
  .tf-waehlen .tf-n small{display:none}
  .tf-waehlen .tf-d{grid-column:2;grid-row:2;font-size:12.5px;color:var(--muted)}
  .tf-waehlen .tf-d small{display:inline;font-size:1em}
  .tf-waehlen .tf-d small::before{content:" · "}
}
/* Sehr schmal: nur Pfeil */
@container (max-width:330px){
  .tf-anm-wort{display:none}
  .tf-anmelden{min-width:44px;justify-content:center;padding:0 10px}
}

/* Terminkarte */
.tf-karte{display:flex;flex-direction:column;gap:clamp(10px,calc(var(--vh)*.02),20px);min-width:0;container-type:inline-size;
  padding:clamp(16px,calc(var(--vh)*.032),32px) clamp(18px,1.6vw,32px);border-radius:var(--tf-r);background:var(--ink-3);
  border:1px solid color-mix(in srgb,var(--f,#93a3f5) 42%,transparent);transition:border-color .3s ease}
.tf-datum{display:flex;flex-direction:column;gap:8px;white-space:nowrap;
  padding-bottom:clamp(10px,calc(var(--vh)*.02),18px);border-bottom:1px solid var(--line)}
.tf-datum-links{display:flex;align-items:flex-end;gap:clamp(10px,.9vw,16px)}
/* Größe nach Kartenbreite */
.tf-gross{font-family:var(--display);font-weight:700;font-size:clamp(48px,min(4.4vw,calc(var(--vh)*.1),22cqi),120px);
  line-height:.82;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tf-monat b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(17px,min(1.3vw,6.2cqi),26px);line-height:1.15}
.tf-monat span{font-size:clamp(13.5px,.85vw,17px);color:var(--tf-soft)}
.tf-uhr{display:flex;align-items:baseline;gap:10px}
.tf-uhr b{display:block;font-family:var(--mono);font-weight:400;font-size:clamp(16px,min(1.2vw,5.6cqi),24px);color:var(--cyan)}
.tf-uhr span{font-size:clamp(13px,.8vw,16px);color:var(--muted)}
/* Breit: eine Zeile */
@container (min-width:300px){
  .tf-datum{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:12px}
  .tf-uhr{display:block;text-align:right}
}
.tf-marke{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:1.6em;
  font-size:clamp(13.5px,.85vw,17px);color:var(--cyan)}
.tf-varianten{display:grid}
.tf-variante{grid-area:1/1;display:flex;flex-direction:column;gap:clamp(8px,calc(var(--vh)*.016),16px);visibility:hidden}
.tf-variante.tf-an{visibility:visible}
.tf-v-name{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:600;
  font-size:clamp(24px,min(2vw,calc(var(--vh)*.048)),44px);line-height:1;letter-spacing:-.015em}
.tf-v-name .tf-zeichen{--z:clamp(36px,calc(var(--vh)*.062),54px)}
.tf-v-text{color:var(--tf-soft);font-size:clamp(14px,min(.95vw,calc(var(--vh)*.022)),18px);line-height:1.5}
.tf-fakten{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;margin-top:4px}
.tf-fakten div{display:flex;flex-direction:column;padding-right:clamp(12px,1vw,18px);margin-right:clamp(12px,1vw,18px);border-right:1px solid var(--line)}
.tf-fakten div:last-child{border-right:0;margin-right:0;padding-right:0}
.tf-fakten dt{font-size:clamp(12.5px,.76vw,15px);color:var(--muted)}
.tf-fakten dd{font-family:var(--display);font-weight:600;font-size:clamp(15px,1vw,20px);line-height:1.3}
@container (max-width:340px){
  .tf-fakten{grid-template-columns:minmax(0,1fr);gap:6px}
  .tf-fakten div{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;padding:0 0 6px;margin:0;
    border-right:0;border-bottom:1px solid var(--line)}
  .tf-fakten dd{text-align:right}
}
.tf-karte .btn{margin-top:auto;width:100%;white-space:nowrap;height:clamp(46px,calc(var(--vh)*.068),60px);padding-inline:16px}
.tf-karte .btn svg{width:1.1em;height:1.1em;flex-shrink:0}
@container (max-width:280px){.tf-karte .btn{font-size:14px;padding-inline:10px;gap:6px}}
.tf-karte.tf-wechselt .tf-datum,.tf-karte.tf-wechselt .tf-variante.tf-an{animation:tf-rein .28s var(--ease-out)}
@keyframes tf-rein{from{opacity:.2;transform:translateY(6px)}}

/* Formatzeichen */
.tf-zeichen{--z:clamp(36px,2.5vw,48px);display:inline-grid;place-items:center;flex-shrink:0;width:var(--z);aspect-ratio:1;
  border-radius:calc(var(--z)*.26);color:var(--f);background:color-mix(in srgb,var(--f) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--f) 30%,transparent)}
.tf-zeichen svg{width:50%;height:50%}

@media (hover:hover) and (pointer:fine){
  .tf-option:not(.tf-an):hover{border-color:var(--line-2)}
  .tf-pille:not([aria-pressed="true"]):hover{border-color:rgba(199,212,236,.4);color:var(--paper)}
  .tf-blaettern button:not(:disabled):hover{background:rgba(199,212,236,.07)}
  .tf-zeile:not(.tf-an):hover{background:rgba(199,212,236,.04)}
  .tf-leise:hover{color:var(--paper)}
}

/* Ohne Skript */
.tf-ohne-js{display:grid;gap:18px;max-width:62ch;padding:clamp(20px,2vw,32px);border:1.5px solid var(--line-2);border-radius:18px;background:var(--ink-3)}
.tf-ohne-js li,.tf-ohne-js dd{color:var(--muted);font-size:clamp(14px,.86vw,16px)}
.tf-ohne-js b,.tf-ohne-js dt{color:var(--paper);font-weight:500}
.tf-ohne-js ul,.tf-ohne-js dl{display:grid;gap:8px}
html.js .tf-ohne-js{display:none}
html:not(.js) .tf-raster{display:none}

/* Ab 900 px */
@media (min-width:900px){
  .inhalt-sektion.turniere{justify-content:center;
    min-height:calc(var(--vh) - var(--kopf-echt,var(--kopf-h)));
    padding-block:clamp(14px,calc(var(--vh)*.034),52px)}
}
/* Flache Laptops */
@media (min-width:900px) and (max-height:800px){
  .tf-hinweise{flex-direction:row;flex-wrap:wrap;gap:2px 26px}
  .tf-unter{display:none}
}
@media (min-width:900px) and (max-height:700px){
  .inhalt-sektion.turniere{gap:14px;padding-block:12px}
  .tf-buehne > .tf-seite{gap:14px}
  .tf-kopf{gap:6px}
  .tf-filter{padding:16px;gap:14px}
  .tf-optionen,.tf-tage{margin-top:10px}
  .tf-optionen{gap:6px}
  .tf-option{min-height:42px}
  .tf-pille{height:38px}
  .tf-karte{padding:16px 18px;gap:10px}
}
@media (min-width:900px) and (max-width:1179px){
  .tf-raster{grid-template-columns:minmax(270px,.85fr) minmax(0,1.1fr) minmax(270px,.9fr)}
  .tf-v-text{display:none}
}

/* Unter 900 px */
@media (max-width:899px){
  .inhalt-sektion.turniere{padding-top:clamp(20px,4vw,32px)}
  .tf-raster{grid-template-columns:minmax(0,1fr);gap:24px}
  .tf-termine{container-type:inline-size;align-self:auto}
  .tf-liste{overflow:visible;flex:none}
  .tf-gross{font-size:60px}
}
@media (min-width:600px) and (max-width:899px){.tf-optionen{grid-template-columns:1fr 1fr}}
@media (max-width:699px){
  .tf-lb-tafeln{grid-template-columns:minmax(0,1fr)}
  .tf-lb-liste{min-height:0}
  .tf-lb-regel{min-height:0}
}
@media (max-width:899px){
  .z-tisch{width:max(240vw,1100px);top:0;translate:-50% -6%}
  .z-tisch .z-dreh{rotate:-10deg}
  /* Zeichnung leiser */
  .z-turniere{color:rgba(199,212,236,.15);-webkit-mask-image:linear-gradient(#000 0,#000 12%,transparent 34%);mask-image:linear-gradient(#000 0,#000 12%,transparent 34%)}
}
@media (prefers-reduced-motion:reduce){
  .tf-finder *,.tf-finder *::before,.tf-finder *::after{animation:none!important;transition-duration:0s!important}
}

/* Pre-Grading */
.pregrading{position:relative;isolation:isolate}
.pg-raster{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);
  gap:clamp(24px,4vw,52px);align-items:start;position:relative;z-index:1}
.pg-kopf{display:flex;flex-direction:column;gap:14px;max-width:56ch;grid-column:1;grid-row:1}
.pg-preise{grid-column:2;grid-row:1/3;align-self:start;
  margin-top:clamp(28px,2.2vw,36px)}
.pg-kriterien{grid-column:1;grid-row:2}
.skala{grid-column:1/-1;grid-row:3}
/* Prüfkriterien */
.pg-kriterien-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,1.8vw,30px) clamp(20px,2.4vw,40px);margin-top:clamp(12px,1.5vw,20px)}
.pg-kriterien-liste div{border-top:1px solid var(--line-2);padding-top:clamp(10px,.9vw,14px)}
.pg-kriterien-liste dt{font-family:var(--display);font-weight:600;
  font-size:clamp(15px,1vw,19px);color:var(--paper)}
.pg-kriterien-liste dd{color:var(--muted);font-size:clamp(14px,.86vw,16px);
  line-height:1.55;margin-top:4px}
@media (max-width:600px){
  .pg-kriterien-liste{grid-template-columns:1fr}
}
.pg-text{color:var(--muted);font-size:14.5px;line-height:1.62;max-width:52ch;margin-top:clamp(12px,1.5vw,20px)}
.skala{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:2px solid rgba(199,212,236,.16)}
.stufe{padding:14px 16px 18px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;position:relative}
.stufe::before{content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);height:2px;
  background:var(--cyan)}
.s1::before{width:24%}.s2::before{width:18%}.s3::before{width:12%;opacity:.7}
.s4::before{width:7%;opacity:.5}
.stufe:last-child{border-right:0}
.stufe b{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--paper);font-weight:500}
.stufe span{font-size:13.5px;color:var(--muted);line-height:1.42}
.pg-preise{background:var(--ink-3);border:1px solid var(--line);border-radius:12px;
  padding:24px;display:flex;flex-direction:column}
.preis-tabelle{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.preis-tabelle caption{text-align:left;font-family:var(--display);font-weight:600;
  font-size:clamp(17px,1.2vw,22px);color:var(--paper);padding-bottom:12px}
.preis-tabelle th,.preis-tabelle td{text-align:left;padding:13px 0;
  border-bottom:1px solid var(--line);vertical-align:baseline}
.preis-tabelle thead th{font-family:var(--body);font-size:clamp(13px,.8vw,15px);
  color:var(--muted);font-weight:400;padding-bottom:10px;
  border-bottom:1px solid var(--line-2)}
.preis-tabelle tbody th{font-weight:400;font-size:15px;color:var(--paper)}
.pv{font-family:var(--mono);font-weight:500;font-size:clamp(22px,2.1vw,42px);
  color:var(--cyan);text-align:right;letter-spacing:-.02em}
.preis-fuss{font-size:13.5px;color:var(--muted);margin:16px 0 24px;line-height:1.55}
@media (max-width:860px){
  .pg-raster{grid-template-columns:1fr}
  .pg-kopf,.pg-preise,.pg-kriterien,.skala{grid-column:auto;grid-row:auto}
  .pg-preise{margin-top:0}
}

/* Kontakt: Stadtplan
   Ab 900 px füllt die Karte den Bereich. */
.hinkommen{position:relative;isolation:isolate}
.hk-lage{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,28px)}
.hk-tafel{display:flex;flex-direction:column;gap:clamp(14px,1.3vw,22px);min-width:0;padding:clamp(20px,1.8vw,36px);
  background:rgba(12,18,34,.92);border-radius:clamp(12px,.8vw,16px);border:1px solid rgba(199,212,236,.1)}
.hk-kopf{display:flex;flex-direction:column;gap:10px}
.hk-kopf h1{font-size:clamp(26px,min(2.3vw,5.4vh),48px)}
.hk-kopf .lede{font-size:clamp(14.5px,min(1vw,2.3vh),19px)}
.hk-bloecke{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(18px,1.8vw,32px)}
.hk-block{display:grid;align-content:start;gap:2px;min-width:0;padding-top:clamp(12px,1.1vw,18px);border-top:1px solid var(--line)}
.hk-block:last-child{grid-column:1 / -1;margin-top:clamp(12px,1.1vw,18px)}
.hk-block :is(h2,h3){line-height:1.2;font-family:var(--body);font-size:clamp(13px,.82vw,15px);color:var(--muted);font-weight:400;margin:0 0 4px}
.hk-gross{font-family:var(--display);font-size:clamp(18px,min(1.45vw,3.2vh),27px);font-weight:600;
  letter-spacing:-.015em;line-height:1.25;overflow-wrap:anywhere}
.hk-gross a{text-decoration:none;border-bottom:2px solid var(--line-2);transition:border-color var(--t-ui) ease}
.hk-detail{font-size:clamp(13px,.82vw,15px);color:var(--muted);margin-top:4px}
.hk-mail{margin-top:6px;font-size:clamp(15px,1.05vw,19px)}
.hk-zeiten{display:flex;flex-direction:column;gap:clamp(4px,.4vw,8px)}
.hk-zeit-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:clamp(10px,1vw,18px)}
.hk-tag-name{font-family:var(--display);font-weight:600;font-size:clamp(16px,min(1.15vw,2.6vh),21px)}
.hk-tag-uhr{font-family:var(--mono);font-size:clamp(12px,.78vw,14px);color:var(--soft,#c7d4ec);white-space:nowrap}
.hk-ausnahme{display:flex;flex-direction:column;gap:clamp(2px,.2vw,4px);margin-top:clamp(8px,.7vw,12px);
  padding-top:clamp(6px,.5vw,10px);border-top:1px solid var(--line);
  font-family:var(--mono);font-size:clamp(11px,.72vw,13px);color:#e9a39b}
.hk-ausnahme[hidden]{display:none}
.hk-ausnahme-titel{margin:0;color:var(--muted)}

/* WhatsApp-Kasten */
.hk-wa{--wa-gap:clamp(14px,1.2vw,22px);position:relative;display:grid;
  grid-template-rows:auto minmax(0,1fr);gap:var(--wa-gap);min-width:0;
  padding:clamp(20px,1.8vw,36px);
  background:rgba(16,23,40,.78);border-radius:clamp(12px,.8vw,16px);
  border:1px solid rgba(199,212,236,.1);container-type:inline-size}
/* Umschalter über Radioknöpfe */
.hk-wahl-feld{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
/* Abstände in em */
.hk-wahl{display:inline-flex;justify-self:start;gap:.15em;padding:.31em;
  border-radius:999px;border:1px solid var(--line-2);background:rgba(7,11,22,.6);
  font:500 clamp(13px,.82vw,14.5px)/1 var(--body)}
.hk-wahl label{position:relative;cursor:pointer;white-space:nowrap;border-radius:999px;
  padding:.54em 1.23em;color:var(--muted);
  transition:background-color var(--t-ui) ease,color var(--t-ui) ease}
#hk-wahl-chat:checked ~ .hk-wahl label[for="hk-wahl-chat"],
#hk-wahl-gruppe:checked ~ .hk-wahl label[for="hk-wahl-gruppe"]{background:var(--paper);color:var(--ink)}
#hk-wahl-chat:focus-visible ~ .hk-wahl label[for="hk-wahl-chat"],
#hk-wahl-gruppe:focus-visible ~ .hk-wahl label[for="hk-wahl-gruppe"]{outline:2px solid var(--cyan);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.hk-wahl label:hover{color:var(--paper)}}
/* Tippfläche 44 px */
@media (pointer:coarse){.hk-wahl label::after{content:"";position:absolute;inset:-9px 0}}
/* Beide Ansichten in derselben Zelle */
.hk-wa-ansicht{grid-area:2 / 1;display:flex;flex-direction:column;gap:var(--wa-gap);min-width:0}
#hk-wahl-chat:checked ~ .hk-ansicht-gruppe,
#hk-wahl-gruppe:checked ~ .hk-ansicht-chat{display:none}
/* Ab 900 px: gemeinsame Zeilen (Subgrid) */
@media (min-width:900px){
  .hk-wa{grid-template-rows:auto auto minmax(0,1fr) auto}
  .hk-wa-ansicht{grid-row:2 / span 3;display:grid;grid-template-rows:subgrid}
  .hk-wa-ansicht > .hk-wa-kopf{align-self:start}
  #hk-wahl-chat:checked ~ .hk-ansicht-gruppe,
  #hk-wahl-gruppe:checked ~ .hk-ansicht-chat{display:grid;visibility:hidden}
}
.hk-wa-kopf{display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"logo titel" ". lede";column-gap:clamp(12px,1vw,18px);align-items:center}
.hk-wa-kopf :is(h2,h3){grid-area:titel}
/* Schmaler Kasten */
@container (max-width:380px){
  .hk-wa-kopf{grid-template-areas:"logo titel" "lede lede";row-gap:clamp(8px,2.5vw,12px)}
}
/* Logo in WhatsApp-Grün */
.hk-wa-logo{grid-area:logo;width:clamp(32px,2.3vw,46px);height:auto;fill:#25d366;align-self:start}
.hk-wa :is(h2,h3){font-family:var(--display);font-weight:600;font-size:clamp(18px,1.35vw,26px);
  letter-spacing:-.01em;line-height:1.2;margin:0;align-self:center}
.hk-wa-lede{grid-area:lede;color:var(--muted);font-size:clamp(14px,.88vw,17px);line-height:1.55;
  max-width:52ch;margin-top:clamp(4px,.4vw,8px)}
.hk-wa-fuss{display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(12px,1.2vw,22px);margin-top:auto}
/* Beide Knöpfe gleich breit */
.hk-wa-knopf{flex-shrink:0;display:inline-grid;justify-items:center;align-items:center}
.hk-wa-knopf > span{grid-area:1 / 1;white-space:nowrap}
.hk-knopf-zeile{display:inline-flex;align-items:center;gap:9px}
.hk-knopf-mass{visibility:hidden;padding-left:calc(1.3em + 9px)}
.hk-wa-knopf svg{width:1.3em;height:1.3em;fill:#1faa53}
.hk-wa-hinweis{flex:1 1 200px;font-size:clamp(12px,.72vw,13px);color:var(--muted);
  line-height:1.5}
.hk-wa-hinweis a{color:var(--muted);text-decoration:underline;
  text-decoration-color:rgba(199,212,236,.35);text-underline-offset:2px}
/* QR-Code (ab 900 px) */
.hk-wa-qr{display:none}
@media (min-width:900px){
  .hk-wa-qr{display:flex;align-items:center;gap:clamp(16px,1.4vw,28px);flex:1 1 0;
    min-height:clamp(100px,7.4vw,116px);padding-top:clamp(12px,1.1vw,18px);border-top:1px solid var(--line);
    contain:size} /* Höhe nicht mitzählen */
  .hk-qr-feld{flex:none;height:100%;max-height:clamp(120px,9.5vw,200px);aspect-ratio:1;
    padding:clamp(5px,.45vw,9px);border-radius:clamp(8px,.6vw,12px);background:#dfe6f2;color:#070b16}
  .hk-qr-code{display:block;width:100%;height:100%}
  .hk-qr-text{display:flex;flex-direction:column;gap:clamp(6px,.5vw,10px);min-width:0}
  .hk-qr-text p{color:var(--muted);font-size:clamp(13.5px,.84vw,16px);line-height:1.5;max-width:30ch}
  .hk-qr-text .hk-qr-rein{color:var(--paper);letter-spacing:.02em}
}

/* Stadtplan im Maßstab von Google (Zoomstufe 16), Mitte = Laden */
.hk-plan{--mitte:44%;position:relative;z-index:0;overflow:hidden;margin-top:clamp(16px,2vw,28px);height:clamp(280px,72vw,380px);
  border-radius:clamp(12px,.8vw,16px);border:1px solid var(--line-2);background:#0b1120}
.hk-plan::before{content:"";position:absolute;left:calc(50% - 1920px);top:calc(var(--mitte) - 1200px);width:3840px;height:2400px;
  background:url(/assets/karte/stadtplan-20261005-a5ad7e.svg) 0 0 / 100% 100% no-repeat;pointer-events:none}
/* Kleinere Fenster: Ausschnitt um die Mitte */
@media (max-width:899px),(max-width:1600px) and (max-height:1000px){
  .hk-plan::before{left:calc(50% - 800px);top:calc(var(--mitte) - 500px);width:1600px;height:1000px;
    background-image:url(/assets/karte/stadtplan-20261005-a5ad7e-mitte-1bf181.svg)}
}
/* Google Maps nach Klick, dunkel eingefärbt */
.hk-map{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:invert(.9) hue-rotate(180deg) saturate(.6) brightness(.95) contrast(.92)}
.hk-schleier{position:absolute;inset:0;pointer-events:none;background:rgba(7,11,22,.16)}
/* Glocke als Markierung */
.hk-pin{position:absolute;left:50%;top:var(--mitte);width:0;height:0;pointer-events:none;transition:opacity .3s var(--ease-out)}
.hk-pin-kopf{position:absolute;left:-27px;top:-65px;width:54px;height:54px;display:grid;place-items:center;
  border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--ink-3);border:1.5px solid var(--cyan);
  box-shadow:0 10px 18px -8px rgba(0,0,0,.9)}
.hk-pin-kopf svg{rotate:45deg;width:28px;height:28px;color:var(--paper)}
.hk-pin-kopf .akzent{stroke:var(--cyan)}
.hk-pin-name{position:absolute;left:0;top:8px;translate:-50% 0;white-space:nowrap;padding:3px 10px;border-radius:7px;
  background:rgba(7,11,22,.88);border:1px solid var(--line-2);font-family:var(--display);font-weight:600;font-size:13px}
/* Google Maps laden */
.hk-google{position:absolute;left:50%;bottom:14px;translate:-50% 0;z-index:2;width:max-content;max-width:calc(100% - 24px);
  display:flex;flex-direction:column;align-items:center;gap:6px}
.hk-google-hinweis{max-width:34ch;padding:3px 9px;border-radius:7px;background:rgba(7,11,22,.84);
  color:var(--muted);font-size:clamp(11.5px,.7vw,13px);line-height:1.45;text-align:center;text-wrap:pretty}
.hk-google-hinweis span{white-space:nowrap}
.hk-google-hinweis a{color:var(--paper);text-decoration:underline;text-decoration-color:rgba(199,212,236,.4);text-underline-offset:2px}
/* Quellenangabe des Stadtplans */
.hk-osm{position:absolute;right:8px;top:8px;z-index:2;padding:2px 7px;border-radius:5px;background:rgba(7,11,22,.84);
  font-family:var(--mono);font-size:clamp(10px,.6vw,11.5px);line-height:1.5;color:rgba(199,212,236,.62)}
.hk-osm a{color:inherit;text-decoration:none}
.hk-karte-knopf{display:inline-flex;align-items:center;gap:8px;height:clamp(40px,2.6vw,48px);padding:0 clamp(14px,1vw,20px);border-radius:12px;
  border:1px solid var(--line-2);background:rgba(7,11,22,.88);color:var(--paper);text-decoration:none;cursor:pointer;
  font-family:var(--body);font-weight:500;font-size:clamp(14px,.86vw,16px);white-space:nowrap;
  transition:border-color var(--t-ui) ease,transform var(--t-druck) var(--ease-out)}
.hk-karte-knopf:active{transform:scale(.97)}
/* Route */
.hk-route{display:inline-flex;align-items:center;gap:6px;width:fit-content;margin-top:8px;font-weight:500;font-size:clamp(14px,.86vw,16px);
  color:var(--paper);text-decoration:underline;text-decoration-color:rgba(34,224,242,.55);text-underline-offset:3px}
.hk-route svg{width:14px;height:14px}
/* Google Maps geladen */
.hk-plan.hk-aktiv .hk-google,.hk-plan.hk-aktiv .hk-osm{display:none}
.hk-plan.hk-aktiv .hk-pin{opacity:0}
/* Ohne Skript nur der Stadtplan */
html:not(.js) .hk-google{display:none}

@media (hover:hover) and (pointer:fine){
  .hk-gross a:hover{border-bottom-color:var(--cyan)}
  .hk-karte-knopf:hover{border-color:rgba(199,212,236,.45)}
  .hk-google-hinweis a:hover,.hk-osm a:hover{color:var(--paper);text-decoration:underline}
}

/* Ab 900 px */
@media (min-width:900px){
  .inhalt-sektion.hinkommen{max-width:none;display:grid;align-items:center;
    min-height:calc(100vh - var(--kopf-echt,var(--kopf-h)));min-height:calc(100svh - var(--kopf-echt,var(--kopf-h)));
    padding:clamp(12px,3vh,40px) 0 max(34px,calc(3vh + 8px))}
  .hk-lage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;align-content:center;width:100%;
    max-width:calc(var(--breite) + 2*var(--rand));margin-inline:auto;padding-inline:var(--rand);pointer-events:none}
  .hk-lage > *{pointer-events:auto;width:100%;max-width:min(530px,calc(100% - 64px))}
  .hk-lage > :last-child{justify-self:end}
  .hk-lage .hk-wa{background:rgba(12,18,34,.92)}
  .hk-plan{--mitte:50%;position:absolute;inset:0;margin:0;height:auto;border-radius:0;border:0;border-block:1px solid var(--line)}
  .hk-google{bottom:clamp(16px,3vh,48px);flex-direction:row;gap:clamp(12px,1vw,18px)}
  .hk-google-hinweis{max-width:32ch;text-align:left;padding:5px 10px}
  .hk-osm{top:auto;bottom:8px;right:10px}
  .hk-schleier{background:linear-gradient(90deg,rgba(7,11,22,.7),rgba(7,11,22,.22) 36%,rgba(7,11,22,.06) 50%,rgba(7,11,22,.22) 64%,rgba(7,11,22,.7))}
}
/* Flache Fenster */
@media (min-width:900px) and (max-height:760px){
  .hk-tafel,.hk-wa{padding:clamp(16px,1.4vw,24px)}
  .hk-wa{--wa-gap:12px}
}
/* Sehr flach: ohne QR-Code */
@media (min-width:900px) and (max-height:520px){
  .hk-wa-qr{display:none}
}
@media (max-width:899px){
  .hk-bloecke{grid-template-columns:minmax(0,1fr)}
  .hk-block+.hk-block{margin-top:12px}
}
@media (max-width:720px){
  .hk-wa-fuss{flex-direction:column;align-items:stretch}
  .hk-wa-knopf{width:100%}
  .hk-wa-hinweis{flex-basis:auto}
}

/* Fuß */
.fuss{border-top:1px solid var(--line);padding:clamp(40px,5vw,64px) var(--rand) clamp(32px,4vw,48px)}
.fuss-inner{width:100%;max-width:var(--breite);margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;
  padding-bottom:32px;border-bottom:1px solid var(--line)}
.fuss-marke img{height:38px;width:auto}
.fuss-marke p{font-family:var(--mono);font-size:11.5px;line-height:1.85;
  color:var(--muted);margin-top:16px}
.fuss-nav{display:flex;flex-direction:column;gap:9px}
.fuss-nav a{font-size:14px;color:#c7d4ec;text-decoration:none;
  border-bottom:1px solid transparent;align-self:flex-start;
  transition:border-color var(--t-ui) ease}
.fuss-copy{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  color:var(--muted);margin-top:16px}
@media (hover:hover) and (pointer:fine){.fuss-nav a:hover{border-bottom-color:var(--cyan)}}

/* Nach oben */
.nach-oben{position:fixed;bottom:clamp(20px,3vw,32px);right:clamp(20px,3vw,32px);
  z-index:45;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(7,11,22,.92);
  color:var(--paper);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s ease,transform .3s var(--ease-out),
    border-color .2s ease,background .2s ease}
/* Deckender Grund ohne Weichzeichner */
.nach-oben.sichtbar{opacity:1;transform:none;pointer-events:auto}
.nach-oben svg{width:18px;height:18px}
.nach-oben:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){
  .nach-oben:hover{border-color:var(--cyan);background:rgba(34,224,242,.08)}
}

/* Seitenübergang */
body{opacity:1;transition:opacity .25s ease}
body.seite-weg{opacity:0}
body.seite-rein{animation:einblenden .35s ease forwards}
/* Startet knapp über 0: ganz Durchsichtiges zählt der Browser nicht als gemalten Inhalt */
@keyframes einblenden{from{opacity:.01;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Nicht während des Intros */
html.kc-lock body.seite-rein{animation:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .stagger>*{opacity:1;transform:none}
  .js .scroll-ein{opacity:1;transform:none;transition:none}
  body.seite-rein{animation:none;opacity:1}
}

@media (max-height:1100px){
  .inhalt-sektion{padding-top:clamp(1.2rem,3.5vh,var(--luft));
    padding-bottom:clamp(1.2rem,3.5vh,var(--luft))}
  /* Abstand der Kundenkarte */
  .kk-rad-seite{margin-block:calc(clamp(1.2rem,3.5vh,var(--luft)) * -1)}
}

/* Touch */

/* Tipp-Hervorhebung aus */
a,button,select,summary,[role="button"],input[type="submit"]{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation}

@media (pointer:coarse){
  /* Tippziele mindestens 44 px */
  .fuss-nav{gap:0}
  .fuss-nav a{display:inline-flex;align-items:center;min-height:44px;
    padding-block:10px}
  .fuss-nav a:active{color:var(--cyan)}

  .marke{min-height:44px;align-items:center}

  /* Größere Tippfläche */
  .nav-fuss a{display:inline-flex;align-items:center;min-height:44px;
    padding-block:10px}

  /* Sprachwahl und Menüknopf */
  .lang-toggle,.burger{min-height:44px;min-width:44px}
}

/* Sichere Bereiche (iPhone) */
.nach-oben{
  bottom:calc(clamp(20px,3vw,32px) + env(safe-area-inset-bottom,0px));
  right:calc(clamp(20px,3vw,32px) + env(safe-area-inset-right,0px))}


/* Abzeichen des nächsten Rangs */
.kk-progress-kopf{align-items:center}
.kk-progress-label{display:inline-flex;align-items:center;gap:.45em}
.kk-naechster-icon{display:inline-flex;flex-shrink:0;width:1.9em;height:1.9em}
.kk-naechster-icon svg{width:100%;height:100%}

/* Profil: Skalierung über --kk (ab 721 px) */
@media (min-width:721px){
  #kkSektion:has(> #kkProfil:not([hidden])){max-width:max(calc(1400px * var(--kk,1)), 1180px);padding-top:calc(20px * var(--kk,1));padding-bottom:calc(20px * var(--kk,1))}
  #kkSektion .kk-profil{gap:calc(13px * var(--kk,1));padding:calc(18px * var(--kk,1)) calc(36px * var(--kk,1));border-radius:calc(22px * var(--kk,1))}
  /* Kopfzeile */
  #kkSektion .kk-kopfzeile,#kkSektion .kk-kopf-links{gap:calc(18px * var(--kk,1))}
  #kkSektion .kk-rang-icon{width:calc(58px * var(--kk,1));height:calc(58px * var(--kk,1))}
  #kkSektion .kk-kopfzeile h2{font-size:calc(32px * max(var(--kk,1), .78))}
  #kkSektion .kk-rang-zeile{gap:calc(8px * var(--kk,1));margin-top:calc(2px * var(--kk,1))}
  #kkSektion .kk-rang-kanji{font-size:calc(20px * max(var(--kk,1), .78))}
  #kkSektion #kkRang{font-size:calc(17px * max(var(--kk,1), .78))}
  #kkSektion .kk-vip-badge{font-size:calc(11px * max(var(--kk,1), .78));padding:calc(3px * var(--kk,1)) calc(10px * var(--kk,1))}
  #kkSektion .kk-kopf-rechts{gap:calc(10px * var(--kk,1))}
  #kkSektion .kk-refresh{width:calc(38px * var(--kk,1));height:calc(38px * var(--kk,1))}
  #kkSektion .kk-refresh-icon{width:calc(16px * var(--kk,1));height:calc(16px * var(--kk,1))}
  #kkSektion .kk-logout{height:calc(38px * var(--kk,1));padding:0 calc(16px * var(--kk,1));font-size:calc(13px * max(var(--kk,1), .78))}
  #kkSektion .kk-gewinn{height:calc(38px * var(--kk,1));padding:0 calc(14px * var(--kk,1)) 0 calc(11px * var(--kk,1));
    gap:calc(8px * var(--kk,1));font-size:calc(13px * max(var(--kk,1), .78))}
  #kkSektion .kk-gewinn svg{width:calc(18px * var(--kk,1));height:calc(18px * var(--kk,1))}
  /* Kennzahlen */
  #kkSektion .kk-stats{gap:calc(14px * var(--kk,1))}
  #kkSektion .kk-stat{gap:calc(3px * var(--kk,1));padding:calc(10px * var(--kk,1)) calc(16px * var(--kk,1));border-radius:calc(14px * var(--kk,1))}
  #kkSektion .kk-stat-wert{font-size:calc(27px * max(var(--kk,1), .78))}
  #kkSektion .kk-stat-label{font-size:calc(13px * max(var(--kk,1), .78))}
  /* Fortschritt */
  #kkSektion .kk-progress{padding:calc(10px * var(--kk,1)) calc(18px * var(--kk,1));gap:calc(8px * var(--kk,1));border-radius:calc(14px * var(--kk,1))}
  #kkSektion .kk-progress-kopf{font-size:calc(14px * max(var(--kk,1), .78))}
  #kkSektion .kk-progress-rest{font-size:calc(13px * max(var(--kk,1), .78))}
  #kkSektion .kk-bar{height:calc(9px * var(--kk,1))}
  /* Raster */
  #kkSektion .kk-profil-grid{gap:calc(12px * var(--kk,1)) calc(28px * var(--kk,1))}
  #kkSektion .kk-rabatte h3,#kkSektion .kk-rewards h3,#kkSektion .kk-gutscheine h3,#kkSektion .kk-reserv h3,#kkSektion .kk-history h3{font-size:calc(17px * max(var(--kk,1), .78));margin-bottom:calc(7px * var(--kk,1))}
  #kkSektion .kk-rabatt-hinweis{font-size:calc(12.5px * max(var(--kk,1), .78));margin-bottom:calc(8px * var(--kk,1))}
  #kkSektion .kk-rabatt-liste{gap:calc(8px * var(--kk,1));max-width:calc(340px * var(--kk,1))}
  #kkSektion .kk-rabatt{padding:calc(10px * var(--kk,1)) calc(18px * var(--kk,1));border-radius:calc(12px * var(--kk,1));font-size:calc(14px * max(var(--kk,1), .78))}
  #kkSektion .kk-rabatt-cat{gap:calc(8px * var(--kk,1))}
  #kkSektion .kk-rabatt-icon{width:calc(15px * var(--kk,1));height:calc(15px * var(--kk,1))}
  #kkSektion .kk-rabatt-val{font-size:calc(17px * max(var(--kk,1), .78))}
  #kkSektion .kk-reward-liste{gap:calc(7px * var(--kk,1))}
  #kkSektion .kk-reward{gap:calc(12px * var(--kk,1));padding:calc(7px * var(--kk,1)) calc(16px * var(--kk,1));border-radius:calc(12px * var(--kk,1));font-size:calc(14px * max(var(--kk,1), .78))}
  #kkSektion .kk-reward-icon{width:calc(34px * var(--kk,1));height:calc(34px * var(--kk,1))}
  #kkSektion .kk-reward-rang{font-size:calc(15px * max(var(--kk,1), .78))}
  #kkSektion .kk-reward-text{font-size:calc(13px * max(var(--kk,1), .78))}
  #kkSektion .kk-reward-status{width:calc(20px * var(--kk,1));height:calc(20px * var(--kk,1))}
  #kkSektion .kk-gutschein-liste,#kkSektion .kk-reserv-liste,#kkSektion .kk-history-liste{gap:calc(8px * var(--kk,1))}
  #kkSektion .kk-kauf,#kkSektion .kk-reserv-item{padding:calc(10px * var(--kk,1)) calc(16px * var(--kk,1));border-radius:calc(12px * var(--kk,1));gap:calc(10px * var(--kk,1));font-size:calc(14px * max(var(--kk,1), .78))}
  #kkSektion .kk-kauf-datum{font-size:calc(12px * max(var(--kk,1), .78))}
  #kkSektion .kk-kauf-icon{width:calc(15px * var(--kk,1));height:calc(15px * var(--kk,1))}
  #kkSektion .kk-historie-btn{margin-top:calc(8px * var(--kk,1));padding:calc(8px * var(--kk,1)) calc(16px * var(--kk,1));font-size:calc(13px * max(var(--kk,1), .78))}
  #kkSektion .kk-decay{gap:calc(10px * var(--kk,1));font-size:calc(14px * max(var(--kk,1), .78));padding:calc(8px * var(--kk,1));border-radius:calc(12px * var(--kk,1))}
  #kkSektion .kk-decay-icon{width:calc(17px * var(--kk,1));height:calc(17px * var(--kk,1))}
}

/* Seite sperren, solange das Fenster offen ist */
html.kk-fenster-offen,html.kk-fenster-offen body{overflow:hidden;overscroll-behavior:none}
html.kk-fenster-offen body{position:fixed;left:0;right:0;width:100%;
  padding-top:var(--fest-kopf,0px);padding-right:var(--fest-sb,0px)}
html.kk-fenster-offen .kopf{position:fixed;top:0;left:0;right:var(--fest-sb,0px)}
/* Kein Weiterscrollen */
.kk-modal-overlay{overscroll-behavior:contain}
.kk-modal-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Handy: Knopf für alle Einkäufe */
@media (max-width:720px){
  #kkHistoryBtn:not([hidden]){display:flex}
}