/* Fairhours – gemeinsame Grundlage: Schriften, Farben (hell/dunkel), Grundstil, Bausteine.
   Werte aus design/website/README.md (Petrol + Koralle). */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-var.woff2") format("woff2-variations"),
       url("../fonts/bricolage-grotesque-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin-700.woff2") format("woff2");
}

:root {
  --bg: #F6F3EC; --sf: #FFFFFF; --sf2: #EDE8DC;
  --ink: #0E2A2B; --ink2: #405755; --line: #D6CFBF;
  --pt: #0D5552; --pt-d: #083E3C; --pt-s: #DCEAE6; --on-pt: #FFFFFF;
  --deep: #0B3534; --deep2: #134543; --on-deep: #F6F3EC; --on-deep2: #BCD2CC;
  --ac: #FF7A5C; --ac-s: #FFE3DA; --on-ac: #0E2A2B;
  --ok: #1C7347; --ok-s: #DCF0E3;
  --warn: #7A5000; --warn-s: #FFF0C2;
  --bad: #A3361F; --bad-s: #FBE3DD;
  --focus: #0D5552;
  --fd: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --fb: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --fm: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ez: cubic-bezier(.3, 0, .1, 1);
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --sec: clamp(56px, 8vw, 104px);
  color-scheme: light;
}
/* Alternative Akzentrichtung 1a (nicht gewählt) */
[data-fh-accent="sonnengelb"] { --ac: #FFC53D; --ac-s: #FFF0C2; }

[data-fh-theme="dunkel"] {
  --bg: #0B1D1D; --sf: #122B2A; --sf2: #183634;
  --ink: #EAF2EF; --ink2: #A8BFBA; --line: #2A4744;
  --pt: #62C6B4; --pt-d: #8ADACB; --pt-s: #173B38; --on-pt: #062020;
  --deep: #061211; --deep2: #0F2725; --on-deep: #EAF2EF; --on-deep2: #A8BFBA;
  --ac-s: #3D231C;
  --ok: #74D6A0; --ok-s: #143A27;
  --warn: #FFD36B; --warn-s: #3A3015;
  --bad: #FF9F8A; --bad-s: #3D1F19;
  --focus: #FF7A5C;
  color-scheme: dark;
}
[data-fh-theme="dunkel"][data-fh-accent="sonnengelb"] { --ac-s: #3A3015; --focus: #FFC53D; }

/* ---------- Grundstil ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-fh-motion="reduziert"]) { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fb);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--pt); text-underline-offset: 3px; }
a:hover { color: var(--pt-d); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input, select { font: inherit; color: inherit; }
img, svg { flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.auf-tief { --focus: var(--ac); }

/* Weniger Bewegung: Standard aus prefers-reduced-motion, überschreibbar im Footer */
[data-fh-motion="reduziert"] *, [data-fh-motion="reduziert"] *::before, [data-fh-motion="reduziert"] *::after {
  animation: none !important;
  transition: none !important;
}

@keyframes fhIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fhIn10 { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fhPop { 0% { opacity: 0; transform: scale(.7); } 60% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fhPop6 { 0% { opacity: 0; transform: scale(.6); } 60% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fhBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fhGrow { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fhSpin { to { transform: rotate(360deg); } }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Wortmarke (SVG, Text in Pfaden) ---------- */
.wortmarke { display: inline-flex; align-items: baseline; line-height: 1; }
.wortmarke svg { display: block; width: 4.356em; height: .734em; }
.wortmarke .wm-text { fill: currentColor; }
.wortmarke .wm-punkt { fill: var(--ac); }

/* ---------- Bausteine ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow {
  font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pt); margin-bottom: 14px;
}
.h2 {
  margin: 0; font-family: var(--fd); font-weight: 800;
  font-size: clamp(38px, 5.4vw, 68px); line-height: .98; letter-spacing: -.04em; text-wrap: balance;
}
.h3 {
  margin: 0; font-family: var(--fd); font-weight: 750;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.02; letter-spacing: -.03em;
}

.knopf {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 26px; border-radius: 999px;
  font-size: 17px; font-weight: 700; text-decoration: none;
  transition: background .2s var(--ez), transform .2s var(--ez);
}
.knopf-primaer { background: var(--pt); color: var(--on-pt); }
.knopf-primaer:hover { background: var(--pt-d); color: var(--on-pt); }
.knopf-rahmen { padding: 0 24px; border: 2px solid var(--ink); color: var(--ink); }
.knopf-rahmen:hover { background: var(--sf2); color: var(--ink); }
.knopf-akzent { background: var(--ac); color: var(--on-ac); }
.knopf-akzent:hover { color: var(--on-ac); filter: brightness(1.05); }
.knopf-klein { min-height: 48px; padding: 0 22px; font-size: 16px; gap: 8px; }

/* Offizieller Microsoft-Anmeldeknopf (Markenrichtlinien) */
.ms-knopf {
  display: inline-flex; align-items: center; gap: 12px;
  height: 41px; padding: 0 12px; border-radius: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 15px;
  background: #FFFFFF; color: #5E5E5E; border: 1px solid #8C8C8C; text-decoration: none;
}
.ms-knopf:hover { color: #5E5E5E; }
[data-fh-theme="dunkel"] .ms-knopf { background: #2F2F2F; color: #FFFFFF; border-color: #2F2F2F; }
[data-fh-theme="dunkel"] .ms-knopf:hover { color: #FFFFFF; }
.ms-logo { display: block; }

.lade-status { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.spinner {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  border: 3px solid var(--line); border-top-color: var(--pt);
  animation: fhSpin .8s linear infinite;
}

/* Schalter (role="switch") auf Tiefpetrol */
.schalter {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--on-deep2); font-size: 15px; font-weight: 700;
}
.schalter-bahn {
  position: relative; display: inline-block; width: 40px; height: 24px; border-radius: 999px; flex: none;
  background: var(--deep2); box-shadow: inset 0 0 0 1.5px var(--on-deep2);
  transition: background .2s var(--ez);
}
.schalter-knauf {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--on-deep); transition: left .2s var(--ez);
}
.schalter[aria-checked="true"] .schalter-bahn { background: var(--ac); box-shadow: none; }
.schalter[aria-checked="true"] .schalter-knauf { left: 19px; background: var(--on-ac); }