/* Tokens und Utility-Klassen – übernommen aus der Next.js-Version (globals.css) */
:root {
  /* Farben */
  --color-1: white;
  --color-2: black;
  --color-3: rgb(196, 196, 196);
  --color-4: rgb(225, 225, 225);
  --color-5: rgb(215, 215, 215);
  --color-6: rgb(205, 205, 205);
  --color-7: rgb(195, 195, 195);
  --color-8: rgb(185, 185, 185);
  --color-9: rgb(149, 149, 149);
  --color-10: rgb(165, 165, 165);
  --color-11: rgb(155, 155, 155);
  --color-12: rgb(145, 145, 145);

  /* Linien und Konturen */
  --stroke-size-1: 10px;
  --stroke-size-2: 14px;
  --stroke-size-3: 1px;
  --line-offset-1: 1.5px;
  --line-thickness-1: 1.8px;
  --focus-width: 2px;

  /* Schrift */
  --line-height-1: 1.05;
  --font-size-1: 28px;
  --font-size-2: 29px;
  --font-size-3: 20px;

  /* Breiten */
  --width-1: 390px;
  --side-width-1: 300px;

  /* Abstände: genau die Stufen 0–5 */
  --horizontal-space-0: 3px;
  --horizontal-space-1: 5px;
  --horizontal-space-2: 32px;
  --horizontal-space-3: 20px;
  --horizontal-space-4: 30px;
  --horizontal-space-5: 40px;
  --vertical-space-0: 2px;
  --vertical-space-1: 4px;
  --vertical-space-2: 12px;
  --vertical-space-3: 0.4vw;
  --vertical-space-4: 45px;
  --vertical-space-5: 30px;

  /* Ecken */
  --border-radius-1: 6px;
}

@media (max-width: 650px) {
  :root {
    --line-height-1: 1.05;
    --font-size-1: 3vw;
    --font-size-2: 6.6vw;
    --font-size-3: 4.5vw;
    --side-width-1: 70%;
    --width-1: auto;
    --line-offset-1: 0.4vw;
    --line-thickness-1: 0.35vw;
    --stroke-size-1: 1.5vw;
    --stroke-size-2: 2vw;
    --stroke-size-3: 0.2vw;
  }
}

.mobile {
  display: none
}
.curvedcoloredtext span {
  -webkit-text-stroke: var(--stroke-size-3);
}
@media (max-width: 650px) {
  .mobile {
    display: block
  }
  .desktop {
    display: none;
  }
  .curvedcoloredtext span {
    -webkit-text-stroke: var(--stroke-size-3);
  }
}

.pad {padding: var(--horizontal-space-1) var(--vertical-space-1)}
.pad-l {padding-left: var(--horizontal-space-1)}
.pad-t {padding-top: var(--vertical-space-1)}
.pad-b {padding-bottom: var(--vertical-space-1)}
.pad-r {padding-right: var(--horizontal-space-1);}
.uline {
  text-decoration: underline;
  text-underline-offset: var(--line-offset-1);
  text-decoration-thickness: var(--line-thickness-1);
}
.cl {cursor: pointer; }
.cl:hover { transition: 0.15s; font-style: italic;}
.cur {font-style: italic }
.bl {display: block;}
.al-c {text-align: center;}
.al-r {text-align: right;}
.mar-r {margin-right: 0.4vw}
.mar-l {margin-left: 2vw}
.mar-b {margin-bottom: var(--vertical-space-1)}
.mar-t {margin-top: var(--vertical-space-1)}
.mar-b2 {margin-bottom: var(--vertical-space-2)}
.mar-b3 {margin-bottom: 15px}
.mar-r2 {margin-right: var(--horizontal-space-2)}
.inl {display: inline-block;}
.inline {
  display: inline;
}
.ff-2 {font-size: var(--font-size-3);}
.ff-3 {font-size: var(--font-size-1);}

.c-1 {color: var(--color-1);}
.c-2 {color: var(--color-2);}
.c-3 {color: var(--color-3);}
.c-4 {color: var(--color-4);}
.c-5 {color: var(--color-5);}

.bc-1 {background: var(--color-3);}
.bc-2 {background: var(--color-4);}
.bc-3 {background: var(--color-5);}
.bc-4 {background: var(--color-6);}
.bc-5 {background: var(--color-7);}
.bc-6 {background: var(--color-8);}
.bc-7 {background: var(--color-9);}
.bc-8 {background: var(--color-10);}
.bc-9 {background: var(--color-11);}

.noselect {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.komma .ch::after{
  content: ",";
}
.komma .ch:last-child:after{
  content: "";
}
.komma .ch{
  margin-right: var(--horizontal-space-1);
}