/* Gemeinsame Gestaltung fuer die deutsche und die englische Fassung.
   Ausgelagert, damit eine Aenderung nicht an zwei Stellen gepflegt werden
   muss - zwei Sprachfassungen driften sonst nach der ersten Korrektur auseinander. */
/* ============================================================
   FARBSYSTEM — zwei Paare, die im Dunkelmodus die Rollen tauschen

   --grund/--text tragen die Seite. --k-* ("Kontrast") tragen die
   Automations-Sektion, die sich bewusst absetzt. Im Hellmodus ist
   dieser Block dunkel; im Dunkelmodus wird er hell. Der Sprung
   bleibt damit erhalten, statt im dunklen Grund zu verschwinden —
   sonst waere die Sektion im Dunkelmodus einfach unsichtbar.
   ============================================================ */
:root{
  --grund:#e7eae5;      /* Nebelgrau mit Gruenstich */
  --grund-2:#f2f4f0;
  --text:#16211f;       /* Tannen-Petrol */
  --text-leise:#4a5754;
  --akzent:#7a5c1c;     /* Messing, 5.13:1 auf --grund (AA auch fuer kleinen Text) */
  --linie:#c8cec8;

  --k-grund:#0e2b2e;    /* Kontrastblock: im Hellmodus tiefes Petrol */
  --k-text:#f0f4f2;
  --k-text-leise:#cfd8d5;
  --k-akzent:#d9a94a;
  --k-linie:#2c4b4d;
}
@media (prefers-color-scheme:dark){
  :root:not([data-thema="hell"]){
    --grund:#0f1a19;--grund-2:#16211f;--text:#e3e9e6;--text-leise:#9aa8a4;
    --akzent:#d9a94a;--linie:#2a3936;
    --k-grund:#e7eae5;--k-text:#16211f;--k-text-leise:#4a5754;
    --k-akzent:#7a5c1c;--k-linie:#c8cec8;
  }
}
:root[data-thema="dunkel"]{
  --grund:#0f1a19;--grund-2:#16211f;--text:#e3e9e6;--text-leise:#9aa8a4;
  --akzent:#d9a94a;--linie:#2a3936;
  --k-grund:#e7eae5;--k-text:#16211f;--k-text-leise:#4a5754;
  --k-akzent:#7a5c1c;--k-linie:#c8cec8;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--grund);color:var(--text);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:clamp(1rem,0.95rem + 0.2vw,1.125rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(72rem,100% - 2.5rem);margin-inline:auto}
.eng{width:min(46rem,100%)}

/* ---------- Marken: Mono-Kleinschrift als Ordnungssystem ---------- */
.marke{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-leise);
}
.marke--k{color:var(--k-akzent)}

/* ---------- Kopf mit Themenschalter ---------- */
header{padding:2.5rem 0 0}
.kopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.kopfrechts{display:flex;align-items:center;gap:1.25rem}
.sprachen{display:flex;gap:.5rem;margin:0}
.sprachen span,.sprachen a{color:var(--text-leise);text-decoration:none}
.sprachen span[aria-current]{color:var(--text)}
.sprachen a:hover,.sprachen a:focus-visible{color:var(--akzent)}
/* Trenner zwischen den Sprachen - als Geschwister-Regel, damit sie in beiden
   Reihenfolgen greift (DE|EN auf der deutschen, EN|DE auf der englischen Seite). */
.sprachen > *+*::before{content:"/";margin-right:.5rem;color:var(--linie)}

/* Themenschalter: halb gefuellter Kreis statt Sonne/Mond. Er dreht sich um
   180 Grad, wodurch die gefuellte Haelfte die Seite wechselt - dieselbe
   Umkehrung, die im Farbsystem passiert. */
.schalter{
  color:var(--text-leise);background:none;border:0;padding:.35rem;margin:-.35rem;
  cursor:pointer;line-height:0;border-radius:50%;
}
.schalter:hover{color:var(--akzent)}
.schalter svg{display:block}
.schalter.ist-dunkel svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:no-preference){
  .schalter svg{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
}

/* ---------- Hero ---------- */
.hero{padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,7vw,5.5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(17rem,.75fr);gap:clamp(2.5rem,7vw,7rem);align-items:end}
.these{
  font-family:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  font-weight:400;font-size:clamp(2rem,1.1rem + 4vw,3.9rem);line-height:1.1;
  letter-spacing:-.015em;margin:1.6rem 0 0;max-width:20ch;
}
.these em{font-style:italic;color:var(--akzent)}
/* nur der Fliesstext bekommt Lesebreite - die Mono-Zeile darueber brach
   sonst mitten im Firmennamen um (gemessen 26.08.2026). */
.hero p:not(.marke){max-width:44ch;margin:2rem 0 0;color:var(--text-leise);font-size:1.0625rem}

/* ---------- Signature: Arbeitsmodus ----------
   Die drei Begriffe sind keine zweite Navigation, sondern eine knappe
   Lesehilfe: Sie ordnen die folgenden Abschnitte, ohne eine Produktoberflaeche
   vorzutäuschen. */
.arbeitsmodus{align-self:end;border-block:1px solid var(--linie);padding:1rem 0}
.arbeitsmodus__kopf{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-leise);margin:0 0 1rem}
.arbeitsmodus__punkte{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.arbeitsmodus__punkte li{display:grid;grid-template-columns:2rem 1fr;column-gap:.75rem;padding-top:.8rem;border-top:1px solid var(--linie)}
.arbeitsmodus__punkte li:first-child{padding-top:0;border-top:0}
.arbeitsmodus__punkte span{grid-row:span 2;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6875rem;letter-spacing:.08em;color:var(--text-leise)}
.arbeitsmodus__punkte strong{font-family:"IBM Plex Serif",Georgia,serif;font-weight:500;color:var(--text);line-height:1.2}
.arbeitsmodus__punkte small{margin-top:.2rem;font-size:.75rem;line-height:1.35;color:var(--text-leise)}

/* ---------- Sektionsgeruest ---------- */
section{padding:clamp(3rem,6vw,5rem) 0;border-top:1px solid var(--linie)}
.sektionskopf{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;margin-bottom:2.5rem}
h2{
  font-family:"IBM Plex Serif",Georgia,serif;font-weight:500;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);line-height:1.2;margin:0;letter-spacing:-.01em;
}
h3{font-family:"IBM Plex Serif",Georgia,serif;font-weight:600;font-size:1.0625rem;margin:0 0 .4rem}
p{margin:0 0 1.1rem}
p:last-child{margin-bottom:0}

/* ---------- Fachraster ---------- */
.faecher{display:grid;gap:1.75rem 2.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.fach p{color:var(--text-leise);font-size:.9375rem;margin:0}

/* ---------- Signature: die Exchange-Linie ---------- */
.linie{margin-top:3rem;padding-top:1.75rem;border-top:1px solid var(--linie)}
.stationen{
  display:flex;gap:0;flex-wrap:wrap;margin:1.25rem 0 1.5rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8125rem;
}
.station{
  position:relative;padding:.45rem 1.25rem .45rem 0;margin-right:1.25rem;
  color:var(--text-leise);white-space:nowrap;
}
.station::after{content:"";position:absolute;right:0;top:50%;width:.5rem;height:1px;background:var(--linie)}
.station:last-child::after{display:none}
.station--jetzt{color:var(--text);font-weight:500}
.station--jetzt::before{
  content:"";position:absolute;left:-.85rem;top:50%;transform:translateY(-50%);
  width:.375rem;height:.375rem;border-radius:50%;background:var(--akzent);
}
.fussnote{font-size:.9375rem;color:var(--text-leise);max-width:52ch}

/* ---------- Kontrastblock: Automation ---------- */
.kontrast{background:var(--k-grund);color:var(--k-text-leise);border-top:0}
.kontrast h2,.kontrast h3{color:var(--k-text)}
.kontrast p{color:var(--k-text-leise)}
.zitat{
  font-family:"IBM Plex Serif",Georgia,serif;font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);
  line-height:1.35;color:var(--k-text);margin:0 0 1.5rem;max-width:26ch;font-weight:400;
}
.zitat span{color:var(--k-akzent)}
.kette{
  display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--k-linie);
}
.kette p{font-size:.9375rem;margin:.3rem 0 0}

/* ---------- Bausteine ---------- */
.bausteine{display:grid;gap:2rem 2.5rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.baustein{padding-top:1rem;border-top:2px solid var(--text)}
.baustein p{font-size:.9375rem;color:var(--text-leise);margin:0}

/* ---------- Notizen und Artikel ---------- */
.notizkarte{max-width:46rem;padding-top:1rem;border-top:2px solid var(--text)}
.notizkarte h3{font-size:clamp(1.25rem,1.05rem + .6vw,1.65rem);margin:.6rem 0 .75rem}
.notizkarte h3 a,.weiter,.artikel a{color:var(--text);text-decoration-color:var(--akzent);text-underline-offset:.2em}
.notizkarte h3 a{text-decoration:none}
.notizkarte h3 a:hover,.notizkarte h3 a:focus-visible,.weiter:hover,.weiter:focus-visible,.artikel a:hover,.artikel a:focus-visible{color:var(--akzent)}
.notizkarte>p:not(.marke){color:var(--text-leise)}
.weiter{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8125rem}
.artikelkopf{padding:clamp(3.5rem,9vw,7rem) 0 clamp(2.5rem,6vw,4.5rem)}
.artikelkopf h1{font-family:"IBM Plex Serif",Georgia,serif;font-weight:400;font-size:clamp(2rem,1.2rem + 3.2vw,3.5rem);line-height:1.1;letter-spacing:-.015em;margin:1.25rem 0 1.5rem;max-width:20ch}
.artikelkopf .lead{font-size:clamp(1.1rem,1rem + .35vw,1.3rem);color:var(--text-leise);max-width:42ch}
.artikel{width:min(46rem,100% - 2.5rem);margin-inline:auto;padding:clamp(2.5rem,6vw,5rem) 0}
.artikel h2{margin:2.75rem 0 1rem}
.artikel h2:first-child{margin-top:0}
.artikel p{max-width:68ch}
.artikel .schluss{font-family:"IBM Plex Serif",Georgia,serif;font-size:1.25rem;color:var(--text);border-left:3px solid var(--akzent);padding-left:1.25rem;margin-top:2.5rem}
.zurueck{display:inline-block;margin-top:1.5rem;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8125rem;color:var(--text-leise);text-decoration:none}
.zurueck:hover,.zurueck:focus-visible{color:var(--akzent)}

/* ---------- Werdegang ---------- */
.weg{display:grid;gap:0}
.weg-zeile{
  display:grid;grid-template-columns:7rem 1fr;gap:1.5rem;
  padding:1rem 0;border-bottom:1px solid var(--linie);align-items:baseline;
}
.weg-zeile:last-child{border-bottom:0}
.weg-zeile .marke{color:var(--text)}
.weg-zeile p{font-size:.9375rem;color:var(--text-leise);margin:0}

/* ---------- Kontakt ---------- */
.kontakt{background:var(--grund-2);border-top:1px solid var(--linie)}
/* Die Adresse stand vorher in Schaugroesse. Sie ist eine Angabe, keine
   Schlagzeile - deshalb Lesegroesse und Mono, passend zu den uebrigen Daten. */
.mailzeile{margin-top:1.25rem}
.kontakt a{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:1.0625rem;letter-spacing:-.01em;
  color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--akzent);padding-bottom:.1rem;
}
.kontakt a:hover,.kontakt a:focus-visible{color:var(--akzent)}
.zweit{margin-top:1.75rem;display:flex;gap:1.5rem;flex-wrap:wrap}
.zweit a{font-family:'IBM Plex Sans',sans-serif;font-size:.9375rem;border-bottom-width:1px}

footer{padding:2.5rem 0 3rem;color:var(--text-leise);font-size:.8125rem}
footer .wrap{display:flex;gap:1rem;flex-wrap:wrap}

a:focus-visible,button:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
@media (max-width:52rem){.hero-grid{grid-template-columns:1fr;gap:2.5rem}.arbeitsmodus{max-width:32rem}.arbeitsmodus__punkte{grid-template-columns:repeat(3,1fr);gap:0}.arbeitsmodus__punkte li{display:block;padding:.85rem .65rem 0;border-top:0;border-left:1px solid var(--linie)}.arbeitsmodus__punkte li:first-child{padding-top:.85rem;border-left:0}.arbeitsmodus__punkte span{display:block;margin-bottom:.7rem}.arbeitsmodus__punkte small{display:block}}
@media (max-width:32rem){.weg-zeile{grid-template-columns:1fr;gap:.35rem}.arbeitsmodus__punkte{grid-template-columns:1fr}.arbeitsmodus__punkte li{border-left:0;border-top:1px solid var(--linie)}.arbeitsmodus__punkte li:first-child{border-top:0}}
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:auf .7s cubic-bezier(.22,.61,.36,1) backwards}
  .hero-copy .marke{animation-delay:.05s}
  .hero-copy .these{animation-delay:.15s}
  .hero-copy p:not(.marke){animation-delay:.3s}
  .arbeitsmodus{animation:auf .7s .28s cubic-bezier(.22,.61,.36,1) backwards}
  @keyframes auf{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
}