/* ==========================================================================
   THEME  —  Design-Tokens, Reset, Typografie, Buttons, Utilities
   Wird von JEDER Seite geladen. Farben/Fonts nur hier ändern.
   ========================================================================== */

/* ==========================================================================
   SCHRIFTEN  —  selbst gehostet, kein Aufruf bei Google
   Beide Familien stehen unter der SIL Open Font License.

   Eingebunden sind nur die fünf Schnitte, die die Seite tatsächlich benutzt,
   und darin nur die lateinischen Zeichen. Chakra Petch bringt von Haus aus
   auch einen thailändischen Zeichensatz mit — deshalb 9 statt 69 KB je Datei.
   Die .ttf-Originale liegen weiterhin im Ordner, werden aber nicht geladen.
   ========================================================================== */
@font-face{
  font-family:"Chakra Petch";
  src:url("../fonts/ChakraPetch-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Chakra Petch";
  src:url("../fonts/ChakraPetch-SemiBold.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Chakra Petch";
  src:url("../fonts/ChakraPetch-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/JetBrainsMono-Light.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

:root{
  /* --- Farben ------------------------------------------------------------ */
  --bg:            #070f0d;
  --bg-2:          #0b1a16;
  --panel:         #0d1f1a;
  --panel-2:       #112722;
  --line:          rgba(140, 255, 214, .16);
  --line-strong:   rgba(140, 255, 214, .32);

  --accent:        #ffe83d;          /* Signal-Gelb  */
  --accent-soft:   #fff59a;
  --accent-2:      #35f2cf;          /* Cyan/Türkis  */
  --accent-3:      #8bff6b;          /* Grün         */

  --text:          #e9f6f1;
  --text-dim:      #a9c4bb;
  --text-mute:     #7d968e;

  --glow-y:        0 0 24px rgba(255, 232, 61, .45);
  --glow-c:        0 0 24px rgba(53, 242, 207, .35);

  /* --- Typografie -------------------------------------------------------- */
  --font-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font-body:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* --- Maße -------------------------------------------------------------- */
  --shell:         1240px;
  --gutter:        clamp(1.25rem, 4vw, 3rem);
  --radius:        14px;
  --radius-lg:     40px;
  --header-h:      88px;

  /* abgeschrägte Ecken (Cyber-Look) */
  --chamfer: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --hex:     polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:clamp(.9rem, .55vw + .78rem, 1rem);
  font-weight:300;
  line-height:1.75;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body.is-locked{ overflow:hidden; }

/* Fettungen im Fließtext auf 500 festlegen — sonst verlangt der Browser 700
   in der Mono-Schrift, den wir nicht laden, und rechnet sich einen aus */
b,strong{ font-weight:500; }

img,svg,canvas,video{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }

/* Links im Fließtext: nur solche ohne eigene Klasse werden hervorgehoben */
p a:not([class]){
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .25s var(--ease);
}
p a:not([class]):hover{ color:var(--accent-soft); }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; padding:0; }
address{ font-style:normal; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

::selection{ background:var(--accent); color:#0a1512; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#1d3a33; border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:#28564b; }

/* ==========================================================================
   TYPOGRAFIE
   ========================================================================== */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:.005em;
  text-transform:uppercase;
  text-wrap:balance;
}

.section__title{
  font-size:clamp(1.9rem, 3.6vw, 3.4rem);
  margin-bottom:2.5rem;
}
.section__title--center{ text-align:center; margin-inline:auto; }

.text-gradient{
  background:linear-gradient(100deg, var(--accent-2) 0%, var(--accent-3) 45%, var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.lead{ color:var(--text-dim); max-width:58ch; }

.kicker{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-weight:600;
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1rem;
}
.kicker--center{ display:flex; justify-content:center; }
.kicker__slash{ color:var(--accent-2); }
.kicker__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 0 0 rgba(53,242,207,.6);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 12px rgba(53,242,207,0); }
  100%{ box-shadow:0 0 0 0 rgba(53,242,207,0); }
}

/* ==========================================================================
   LAYOUT-HELFER
   ========================================================================== */
.shell{
  width:min(100% - var(--gutter) * 2, var(--shell));
  margin-inline:auto;
}

.section{
  position:relative;
  padding:clamp(4.5rem, 9vw, 8.5rem) 0;
}

/* nur für Screenreader sichtbar */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:1000;
  background:var(--accent); color:#0a1512;
  padding:.7rem 1.2rem;
  font-family:var(--font-display); font-weight:600;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:1rem; }

/* ==========================================================================
   BUTTONS  (Hexagon-Form wie im Original)
   ========================================================================== */
.btn{
  --btn-pad: .95rem 2.4rem;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--btn-pad);
  clip-path:var(--hex);
  font-family:var(--font-display);
  font-weight:600; font-size:.82rem;
  letter-spacing:.2em; text-transform:uppercase;
  white-space:nowrap;
  transition:transform .25s var(--ease), filter .25s var(--ease), color .25s var(--ease);
  will-change:transform;
}
.btn span{ position:relative; z-index:2; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--sm{ --btn-pad: .7rem 1.7rem; font-size:.72rem; }
.btn--lg{ --btn-pad: 1.15rem 3rem; font-size:.88rem; }

/* gefüllt / gelb */
.btn--primary{
  background:linear-gradient(135deg, var(--accent-soft), var(--accent) 55%, #e5c800);
  color:#0a1512;
  filter:drop-shadow(0 0 14px rgba(255,232,61,.45));
}
.btn--primary:hover{ filter:drop-shadow(0 0 26px rgba(255,232,61,.75)); }

/* Outline: Rahmen über Pseudo-Element, da clip-path keine border kennt */
.btn--ghost{
  background:var(--line-strong);
  color:var(--text);
}
.btn--ghost::before{
  content:"";
  position:absolute; inset:2px;
  clip-path:var(--hex);
  background:var(--bg-2);
  z-index:1;
  transition:background .25s var(--ease);
}
.btn--ghost:hover{ background:var(--accent-2); color:#eafffb; }
.btn--ghost:hover::before{ background:#0f2b26; }

/* ==========================================================================
   CHECKLISTE
   ========================================================================== */
.checklist{ display:grid; gap:1rem; margin-top:2rem; }
.checklist li{
  position:relative;
  padding-left:2.2rem;
  font-family:var(--font-display);
  font-weight:500; font-size:.86rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim);
  line-height:1.5;
}
.checklist li::before{
  content:"";
  position:absolute; left:0; top:.15em;
  width:16px; height:16px;
  border:1.5px solid var(--accent-3);
  background:rgba(139,255,107,.12);
  box-shadow:0 0 12px rgba(139,255,107,.35);
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
}

/* ==========================================================================
   HAKEN-LISTE  (Fließtext-Variante der Checkliste)
   ========================================================================== */
.ticks{ display:grid; gap:.75rem; margin-top:1.5rem; }
.ticks li{
  position:relative;
  padding-left:1.7rem;
  font-size:.82rem;
  color:var(--text-dim);
  line-height:1.65;
}
.ticks li::before{
  content:"";
  position:absolute; left:0; top:.5em;
  width:9px; height:9px;
  border:1.5px solid var(--accent-3);
  background:rgba(139,255,107,.14);
  box-shadow:0 0 10px rgba(139,255,107,.3);
  transform:rotate(45deg);
}
.ticks b{ color:var(--text); font-weight:500; }
.ticks--sm li{ font-size:.76rem; }

/* ==========================================================================
   TECHNIK-CHIPS
   ========================================================================== */
.taglist{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.taglist li{
  padding:.3rem .75rem;
  font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-2);
  border:1px solid rgba(53,242,207,.3);
  background:rgba(53,242,207,.06);
}

/* ==========================================================================
   HINWEIS-ZEILE  („gut zu wissen“)
   ========================================================================== */
.note{
  display:flex; gap:.7rem; align-items:flex-start;
  margin-top:1.5rem; padding:.85rem 1rem;
  font-size:.76rem; color:var(--text-mute);
  border-left:2px solid var(--accent);
  background:rgba(255,232,61,.05);
}
.note b{ color:var(--accent); font-weight:500; }

/* Warnvariante, z. B. für Sicherheitshinweise */
.note--warn{
  border-left-color:#ff7a4d;
  background:rgba(255,122,77,.07);
}
.note--warn b{ color:#ff9a72; }

/* ==========================================================================
   SCROLL-REVEAL  (JS setzt .is-in)
   ========================================================================== */
.js [data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
}