/* =====================================================================
   Power-Trax Defence – Stylesheet
   Aufbau:
     1. Farben und Variablen   (hier Farben & Schriften ändern)
     2. Grundlagen
     3. Sprachumschalter (ohne JavaScript)
     4. Kopfzeile und Navigation
     5. Start (Hero) mit Schaltbild
     6. Allgemeine Abschnitte
     7. Lösungen (Typenschilder)
     8. Kompetenz
     9. Ablauf
    10. Kontakt
    11. Fußzeile
    12. Anpassung an kleinere Bildschirme
   ===================================================================== */


/* ---------- 1. Farben und Variablen ---------- */
:root {
  /* Desert Tan 686 (Näherungswert – hier zentral änderbar) */
  --tan:        #B9A57F;
  --tan-light:  #D9CDB0;   /* helle Sandfläche */
  --tan-pale:   #E9E1CF;   /* Papierton für Textabschnitte */

  --ink:        #262820;   /* Text und dunkle Flächen (Oliv-Schwarz) */
  --ink-deep:   #1B1C16;   /* Fußzeile */
  --ink-muted:  #B8B19F;   /* gedämpfter Text auf dunklem Grund */

  --font-body:    "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Bahnschrift", "DIN Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1140px;
  --header-h: 84px;        /* Höhe der Kopfzeile, für Anker-Sprünge */
}


/* ---------- 2. Grundlagen ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--tan-pale);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-stretch: condensed;
  margin: 0;
}

p { margin: 0 0 1rem; }

a { color: inherit; }

a:focus-visible,
.btn:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--tan);
  color: var(--ink);
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }


/* ---------- 3. Sprachumschalter (ohne JavaScript) ---------- */
/* Die Radio-Buttons sind unsichtbar, bleiben aber per Tastatur erreichbar. */
.lang-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

/* Deutsch aktiv: englische Texte ausblenden – und umgekehrt */
#lang-de:checked ~ .page [lang="en"] { display: none; }
#lang-en:checked ~ .page [lang="de"] { display: none; }

.lang-switch {
  display: flex;
  border: 2px solid var(--tan);
}

.lang-switch label {
  padding: .3rem .85rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--tan);
  cursor: pointer;
}

/* aktive Sprache hervorheben */
#lang-de:checked ~ .page label[for="lang-de"],
#lang-en:checked ~ .page label[for="lang-en"] {
  background: var(--tan);
  color: var(--ink);
}

/* sichtbarer Tastaturfokus */
#lang-de:focus-visible ~ .page label[for="lang-de"],
#lang-en:focus-visible ~ .page label[for="lang-en"] {
  outline: 3px solid var(--tan-light);
  outline-offset: 2px;
}


/* ---------- 4. Kopfzeile und Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ink);
  color: var(--tan-pale);
  border-bottom: 4px solid var(--tan);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .75rem 1.25rem;
}

/* Logo (Symbol + Schriftzug) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--tan);
  text-decoration: none;
}

.brand-mark {
  width: 44px;
  height: 44px;
  flex: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name {
  font-family: var(--font-heading);
  font-stretch: condensed;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.brand-sub {
  margin-top: .3rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .5em;
  color: var(--tan-pale);
}

.main-nav ul {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav a {
  display: inline-block;
  padding: .35rem 0;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.main-nav a:hover {
  border-bottom-color: var(--tan);
}


/* ---------- 5. Start (Hero) mit Schaltbild ---------- */
.hero {
  padding: 4.5rem 0 5rem;
  background-color: var(--tan);
  /* feines Konstruktionsraster */
  background-image:
    linear-gradient(rgba(38, 40, 32, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 40, 32, .09) 1px, transparent 1px);
  background-size: 40px 40px;
  scroll-margin-top: var(--header-h);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.25rem);
  line-height: 1.02;
  margin-bottom: 1.25rem;
}

.lead {
  max-width: 34rem;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 0;
}

/* Schaltbild */
.schematic {
  margin: 0;
  padding: 1rem 1rem .75rem;
  border: 2px solid var(--ink);
  background: var(--tan-light);
  color: var(--ink);
}

.schematic svg {
  display: block;
  width: 100%;
  height: auto;
}

.schematic .line {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linejoin: miter;
}

.schematic .solid {
  fill: currentColor;
  stroke: none;
}

.schematic .rod {
  fill: var(--tan-light);
}

.schematic figcaption {
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 2px solid var(--ink);
  font-size: .9rem;
}

/* Schaltflächen */
.btn {
  display: inline-block;
  padding: .85rem 1.5rem;
  border: 2px solid var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.btn-primary {
  background: var(--ink);
  color: var(--tan-pale);
}
.btn-primary:hover { background: var(--ink-deep); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
}
.btn-secondary:hover {
  background: var(--ink);
  color: var(--tan-pale);
}

.btn-on-dark {
  background: var(--tan);
  border-color: var(--tan);
  color: var(--ink);
}
.btn-on-dark:hover {
  background: var(--tan-light);
  border-color: var(--tan-light);
}


/* ---------- 6. Allgemeine Abschnitte ---------- */
.section {
  padding: 5rem 0;
  scroll-margin-top: var(--header-h);
}

.section-dark { background: var(--ink);      color: var(--tan-pale); }
.section-pale { background: var(--tan-pale); color: var(--ink); }
.section-tan  { background: var(--tan);      color: var(--ink); }

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}

.section-dark .section-title { color: var(--tan); }

.section-intro {
  max-width: 38rem;
  margin-bottom: 3rem;
  font-size: 1.125rem;
}

/* Zweispaltiger Aufbau (Kompetenz, Kontakt) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 4rem;
  align-items: start;
}

.split-head .section-intro { margin-bottom: 2rem; }


/* ---------- 7. Lösungen (Typenschilder) ---------- */
/* Sechs Spalten: erste Reihe 3 x 2 Spalten, zweite Reihe 2 x 3 Spalten */
.plates {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}

.plate {
  grid-column: span 2;
  padding: 2.25rem 1.75rem 1.75rem;
  background: var(--tan);
  color: var(--ink);
  /* abgeschrägte Ecke oben links – greift die Form des Logos auf */
  clip-path: polygon(32px 0, 100% 0, 100% 100%, 0 100%, 0 32px);
}

.plate:nth-child(n+4) { grid-column: span 3; }

.plate h3 {
  font-size: 1.65rem;
  line-height: 1.1;
  margin-bottom: .75rem;
}

.plate-list {
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.plate-list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: .35rem;
}

.plate-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: .5rem;
  height: .5rem;
  background: var(--ink);
}


/* ---------- 8. Kompetenz ---------- */
.facts .fact {
  padding: 1.25rem 0 .5rem;
  border-top: 3px solid var(--ink);
}

.fact h3 {
  font-size: 1.5rem;
  margin-bottom: .4rem;
}


/* ---------- 9. Ablauf ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  padding-top: 1rem;
  border-top: 4px solid var(--ink);
}

/* Die Schritte sind eine echte Reihenfolge – daher nummeriert */
.step::before {
  counter-increment: step;
  content: counter(step);
  display: block;
  margin-bottom: .5rem;
  font-family: var(--font-heading);
  font-stretch: condensed;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
}

.step h3 {
  font-size: 1.4rem;
  margin-bottom: .4rem;
}


/* ---------- 10. Kontakt ---------- */
.contact-list {
  margin: 0;
}

.contact-list > div {
  padding: 1.1rem 0;
  border-top: 2px solid var(--tan);
}

.contact-list dt {
  margin-bottom: .2rem;
  font-weight: 700;
  color: var(--tan);
}

.contact-list dd {
  margin: 0;
  font-size: 1.15rem;
}


/* ---------- 11. Fußzeile ---------- */
.site-footer {
  padding: 2rem 0;
  background: var(--ink-deep);
  color: var(--ink-muted);
  font-size: .95rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.footer-copy,
.footer-links { margin: 0; }

.footer-links a {
  margin-left: 1.25rem;
  color: var(--tan-pale);
}


/* ---------- 12. Anpassung an kleinere Bildschirme ---------- */
@media (max-width: 980px) {
  .hero-inner,
  .split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .plates { grid-template-columns: repeat(2, 1fr); }
  .plate,
  .plate:nth-child(n+4) { grid-column: span 1; }
  .plate:last-child { grid-column: span 2; }

  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  :root { --header-h: 128px; }

  .header-inner { flex-wrap: wrap; gap: .5rem 1rem; }

  /* Navigation rutscht in eine eigene Zeile */
  .main-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }
  .main-nav ul { gap: 1.25rem; }
  .main-nav a { white-space: nowrap; }
}

@media (max-width: 640px) {
  .section { padding: 3.5rem 0; }
  .hero { padding: 3rem 0 3.5rem; }

  .plates,
  .steps { grid-template-columns: 1fr; }
  .plate:last-child { grid-column: auto; }

  .footer-links a { margin: 0 1.25rem 0 0; }
}