/* Pentoken Consulting — gemeinsames Stylesheet
   Übernommen aus dem gerenderten Stand vom 13.08.2026.
   Die Schriften liegen jetzt als echte Dateien daneben und werden vom Browser
   seitenübergreifend zwischengespeichert. */

/* ------------------------------------------------------------- Schriften -- */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/schibsted-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/schibsted-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/schibsted-grotesk-700.woff2") format("woff2"); }

@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/hanken-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/hanken-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/hanken-grotesk-600.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/ibm-plex-mono-500.woff2") format("woff2"); }

/* ---------------------------------------------------------------- Farben -- */
:root {
  --bg: #FAF9F6;
  --ink: #28323E;
  --ink-2: #454E58;
  --ink-3: #59616B;
  --ink-4: #8A93A0;
  --accent: #34506C;
  --gall: #3E5C7D;
  --seal: #823A31;
  --line: #ECE9E1;
  --texture: rgba(89, 97, 107, 0.11);
}

/* Dunkel: einmal für die Systemeinstellung, einmal für den Umschalter.
   Das :not([data-theme="light"]) sorgt dafür, dass eine bewusste Wahl
   die Systemeinstellung schlägt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #28323E;
    --ink: #FAF9F6;
    --ink-2: rgba(250, 249, 246, 0.75);
    --ink-3: rgba(250, 249, 246, 0.58);
    --ink-4: rgba(250, 249, 246, 0.42);
    --accent: #8FAACC;
    --gall: #8FAACC;
    --seal: #B0594C;
    --line: rgba(250, 249, 246, 0.15);
    --texture: rgba(250, 249, 246, 0.055);
  }
  :root:not([data-theme="light"]) [stroke="#ECE9E1"] { stroke: rgba(250, 249, 246, 0.11); }
  :root:not([data-theme="light"]) [stroke="#C9CDD3"] { stroke: rgba(250, 249, 246, 0.15); }
  :root:not([data-theme="light"]) [stroke="#59616B"] { stroke: rgba(250, 249, 246, 0.34); }
  :root:not([data-theme="light"]) [stroke="#3E5C7D"] { stroke: #8FAACC; }
  :root:not([data-theme="light"]) [fill="#59616B"],
  :root:not([data-theme="light"]) [fill="#8A93A0"],
  :root:not([data-theme="light"]) [fill="#B0B5BC"] { fill: rgba(250, 249, 246, 0.45); }
  :root:not([data-theme="light"]) [fill="#823A31"] { fill: #B0594C; }
  :root:not([data-theme="light"]) .logo-light { display: none !important; }
  :root:not([data-theme="light"]) .logo-dark { display: block !important; }
}

:root[data-theme="dark"] {
  --bg: #28323E;
  --ink: #FAF9F6;
  --ink-2: rgba(250, 249, 246, 0.75);
  --ink-3: rgba(250, 249, 246, 0.58);
  --ink-4: rgba(250, 249, 246, 0.42);
  --accent: #8FAACC;
  --gall: #8FAACC;
  --seal: #B0594C;
  --line: rgba(250, 249, 246, 0.15);
  --texture: rgba(250, 249, 246, 0.055);
}
:root[data-theme="dark"] [stroke="#ECE9E1"] { stroke: rgba(250, 249, 246, 0.11); }
:root[data-theme="dark"] [stroke="#C9CDD3"] { stroke: rgba(250, 249, 246, 0.15); }
:root[data-theme="dark"] [stroke="#59616B"] { stroke: rgba(250, 249, 246, 0.34); }
:root[data-theme="dark"] [stroke="#3E5C7D"] { stroke: #8FAACC; }
:root[data-theme="dark"] [fill="#59616B"],
:root[data-theme="dark"] [fill="#8A93A0"],
:root[data-theme="dark"] [fill="#B0B5BC"] { fill: rgba(250, 249, 246, 0.45); }
:root[data-theme="dark"] [fill="#823A31"] { fill: #B0594C; }
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }

/* ----------------------------------------------------------------- Basis -- */
html { scroll-behavior: smooth; height: 100%; }
body { margin: 0; height: 100%; background: var(--bg); }
a { color: var(--ink); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--gall); outline-offset: 3px; }

/* -------------------------------------------------------------- Zustände -- */
.hov-rahmen:hover { border-color: var(--gall); color: var(--accent); }
.hov-rahmen-nur:hover { border-color: var(--gall); }
.hov-akzent:hover { color: var(--accent); }
.hov-unterstrichen:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Grafik -- */
@keyframes pt-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  svg * { animation-duration: 0.01s !important; animation-delay: 0s !important; }
}

/* ------------------------------------------------------------- Schmal ---- */
@media (max-width: 760px) {
  .pt-kataster { display: none !important; }
  .pt-text { max-width: 100% !important; }
  h1 { font-size: 34px !important; }
  .pt-token-mobile { display: inline-block !important; }
}