/* =============================================================================
   savas-yigit.de – Stylesheet
   -----------------------------------------------------------------------------
   Aufbau:
     1. Design-Tokens (hell/dunkel)
     2. Grundlagen & Zugänglichkeit
     3. Layout-Bausteine
     4. Kopfzeile / Navigation
     5. Startbereich (Hero)
     6. Abschnitte: Leistungen, Profil, Werdegang,
        Zertifikate, Kompetenzen, Kontakt
     7. Formular
     8. Fußzeile & Rechtsseiten
     9. Bewegung, Druck, Sonderfälle

   Es werden bewusst KEINE externen Ressourcen geladen (keine Google Fonts,
   kein CDN). Alles liegt auf dem eigenen Server – DSGVO-konform ohne Banner.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Design-Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Farben – helles Erscheinungsbild
     -------------------------------------------------------------------------
     Der Grundton ist ein warmes Grau statt des üblichen Blaugraus: Das nimmt
     der Seite die Technik-Vorlagen-Anmutung, ohne unseriös zu wirken.

     Die Seite kommt bewusst ganz ohne Buntfarbe aus. Hierarchie entsteht über
     Schriftschnitt, Größe, Weißraum und Linien. Eine Farbe, die nur „irgendwie
     nach Beratung“ aussieht, wirkt austauschbar – der Verzicht darauf wirkt
     wie eine Entscheidung. Wer später doch eine Akzentfarbe möchte, ändert
     ausschließlich --accent und --accent-strong (hell wie dunkel) und prüft
     anschließend die Kontraste neu. */
  --bg:            #ffffff;
  --bg-soft:       #f8f7f5;
  --bg-sunken:     #f2f0ed;
  --surface:       #ffffff;
  --surface-alt:   #faf9f7;
  --border:        #e6e2dd;
  --border-strong: #cdc7bf;

  --text:          #1c1a18;
  --text-soft:     #46423e;
  --text-muted:    #6a645d;

  --navy:          #2b2724;
  /* "Akzent" ist bewusst keine Buntfarbe mehr, sondern der Tintenton der
     Schrift. Bedienbare Elemente heben sich ueber Flaeche, Unterstreichung
     und Schriftschnitt ab – nicht ueber Farbe. */
  --accent:        #1c1a18;
  --accent-strong: #46423e;
  --accent-soft:   #f2f0ed;
  --accent-line:   #cdc7bf;

  /* Einzige Buntfarbe der Seite: Statusanzeige "verfügbar". */
  --signal-frei:   #1a7f4b;

  --success-bg:    #e8f7ef;
  --success-fg:    #14663f;
  --success-br:    #a7dcc0;
  --error-bg:      #fdecec;
  --error-fg:      #96201f;
  --error-br:      #f2bcbb;

  --shadow-sm: 0 1px 2px rgba(28, 26, 24, .05), 0 1px 3px rgba(28, 26, 24, .05);
  --shadow-md: 0 4px 12px rgba(28, 26, 24, .07), 0 2px 4px rgba(28, 26, 24, .04);
  --shadow-lg: 0 18px 40px rgba(28, 26, 24, .10), 0 4px 12px rgba(28, 26, 24, .06);

  /* Maße */
  --container: 1140px;
  --radius:    14px;
  --radius-sm: 9px;
  --radius-lg: 22px;

  --space-section: clamp(4rem, 9vw, 7.5rem);

  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: light;
}

/* Dunkles Erscheinungsbild – Systemeinstellung */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #15140f;
    --bg-soft:       #1c1a15;
    --bg-sunken:     #100f0b;
    --surface:       #1e1c17;
    --surface-alt:   #24211b;
    --border:        #322e26;
    --border-strong: #4a453a;

    --text:          #f0ede7;
    --text-soft:     #cdc7bd;
    --text-muted:    #9d9589;

    --navy:          #ece7df;
    --accent:        #f0ede7;
    --accent-strong: #cdc7bd;
    --accent-soft:   #24211b;
    --accent-line:   #4a453a;

    --signal-frei:   #4ade80;

    --success-bg:    #0e2a1e;
    --success-fg:    #7ee2ae;
    --success-br:    #1d4d35;
    --error-bg:      #2c1416;
    --error-fg:      #ff9d9b;
    --error-br:      #5a2224;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
    --shadow-lg: 0 20px 46px rgba(0, 0, 0, .55);

    color-scheme: dark;
  }
}

/* Dunkles Erscheinungsbild – manuell gewählt */
:root[data-theme="dark"] {
  --bg:            #15140f;
  --bg-soft:       #1c1a15;
  --bg-sunken:     #100f0b;
  --surface:       #1e1c17;
  --surface-alt:   #24211b;
  --border:        #322e26;
  --border-strong: #4a453a;

  --text:          #f0ede7;
  --text-soft:     #cdc7bd;
  --text-muted:    #9d9589;

  --navy:          #ece7df;
  --accent:        #f0ede7;
  --accent-strong: #cdc7bd;
  --accent-soft:   #24211b;
  --accent-line:   #4a453a;

  --signal-frei:   #4ade80;

  --success-bg:    #0e2a1e;
  --success-fg:    #7ee2ae;
  --success-br:    #1d4d35;
  --error-bg:      #2c1416;
  --error-fg:      #ff9d9b;
  --error-br:      #5a2224;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 46px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

/* -----------------------------------------------------------------------------
   2. Grundlagen & Zugänglichkeit
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  line-height: 1.18;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 5.2vw, 3.65rem); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.185rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Ohne Buntfarbe muessen Verweise ueber die Unterstreichung erkennbar sein.
   Deshalb sind sie durchgehend unterstrichen statt nur beim Ueberfahren. */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--border-strong);
  text-underline-offset: .18em;
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
a:hover {
  color: var(--accent-strong);
  text-decoration-color: currentColor;
}

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

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

::selection { background: var(--accent-strong); color: var(--bg); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sprungmarke für Tastaturnutzer. Bewusst NICHT mit fester weißer Schrift:
   Seit die Seite einfarbig ist, entspricht --accent im dunklen Erscheinungsbild
   einem hellen Ton – weiß auf hell wäre unlesbar. Vorder- und Hintergrund
   folgen deshalb den Tokens und drehen sich mit um. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 999;
  background: var(--text);
  color: var(--bg);
  padding: .8rem 1.2rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; color: var(--bg); }

/* -----------------------------------------------------------------------------
   3. Layout-Bausteine
   -------------------------------------------------------------------------- */

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--space-section); position: relative; }
.section--soft   { background: var(--bg-soft); }
.section--sunken { background: var(--bg-sunken); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--accent-strong);
  border-radius: 2px;
}
.section-head--center .eyebrow::before { display: none; }

.section-head p {
  color: var(--text-soft);
  font-size: 1.075rem;
  max-width: 40rem;
}
.section-head--center p { margin-inline: auto; }

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: .985rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

:root[data-theme="dark"] .btn--primary,
:root[data-theme="dark"] .btn--primary:hover { color: #15140f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--primary,
  :root:not([data-theme="light"]) .btn--primary:hover { color: #15140f; }
}

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.btn--block { width: 100%; }
.btn svg { flex: 0 0 auto; }

/* Karten */

.card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: border-color .22s var(--ease), color .22s var(--ease);
}

/* Chips */

.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-block;
  padding: .3rem .7rem;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: transparent;
  color: var(--text-soft);
  font-size: .845rem;
  font-weight: 550;
  margin: 0;
}

/* -----------------------------------------------------------------------------
   4. Kopfzeile / Navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 750;
  letter-spacing: -.02em;
  font-size: 1.06rem;
}
.brand:hover { color: var(--text); }
.brand__mark {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--text);
  color: #fff;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .01em;
}
:root[data-theme="dark"] .brand__mark { background: var(--text); color: #15140f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__mark { background: var(--text); color: #15140f; }
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__role {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  padding: .5rem .78rem;
  border-radius: 8px;
  color: var(--text-soft);
  text-decoration: none;
  font-size: .945rem;
  font-weight: 550;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav a:hover, .nav a.is-active { color: var(--accent); background: var(--accent-soft); }

.header-actions { display: flex; align-items: center; gap: .55rem; }

.theme-toggle {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

@media (max-width: 960px) {
  .nav {
    position: fixed;
    inset: 74px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 1.25rem 1.75rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform .22s var(--ease), opacity .22s var(--ease), visibility .22s;
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav a { padding: .85rem .75rem; border-radius: 10px; font-size: 1.02rem; }
  .nav-toggle { display: grid; }
  .header-actions .btn { display: none; }
}

/* -----------------------------------------------------------------------------
   5. Startbereich (Hero)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
/* Bewusst ohne Hintergrundmuster und ohne Farbverläufe: Die Wirkung entsteht
   allein über Typografie und Weißraum. Das wirkt ruhiger und weniger nach
   Vorlage als dekorative Raster. */
.hero > .container { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, .88fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .42rem .95rem .42rem .55rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .84rem;
  font-weight: 650;
}
/* Der Punkt ist die einzige Buntfarbe auf der Seite – und zwar bewusst:
   Grün ist ein eingeführtes Signal für "verfügbar". Es geht hier nicht um
   Gestaltung, sondern um eine Statusanzeige, die auf einen Blick erfasst wird.
   Die Aussage steht zusätzlich im Text daneben, damit sie auch ohne
   Farbwahrnehmung ankommt. */
.status-pill__dot {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--signal-frei);
  flex: 0 0 auto;
  margin-left: .3rem;
}
.status-pill__dot::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--signal-frei);
  opacity: .45;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { transform: scale(.6); opacity: .6; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.hero h1 { margin-bottom: .35em; }
/* Statt Farbe eine feine Unterstreichung: hebt das Wort hervor,
   ohne eine Buntfarbe einzufuehren. */
.hero h1 .accent {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: .07em;
  text-underline-offset: .1em;
  text-decoration-color: var(--border-strong);
}

.hero__lead {
  font-size: clamp(1.06rem, 1.9vw, 1.24rem);
  color: var(--text-soft);
  max-width: 36rem;
  margin-bottom: 1.9rem;
}

/* Standortzeile: steht allein über den Kontaktwegen */
.hero__location {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .7rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}
.hero__location svg { color: var(--text-muted); flex: 0 0 auto; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.1rem; }

.hero__meta {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: .5rem 1.75rem;
  font-size: .93rem;
  color: var(--text-muted);
}
.hero__meta li { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
/* Ohne Buntfarbe sind Verweise nur an der Unterstreichung erkennbar. */
.hero__meta a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: .2em; font-weight: 550; }
.hero__meta a:hover { text-decoration-color: currentColor; }
.hero__meta a:hover { color: var(--accent); text-decoration: underline; }
.hero__meta svg { color: var(--accent); flex: 0 0 auto; }

/* Portrait */

.hero__portrait { position: relative; justify-self: center; max-width: 380px; width: 100%; }
.hero__portrait-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: var(--surface-alt);
  aspect-ratio: 4 / 5;
}
.hero__portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }

/* Schmale Akzentkante unten am Bild statt eines versetzten Rahmens */
.hero__portrait::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -6px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent-strong);
}

/* Kennzahlen */

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
/* Senkrechte Trennlinie zwischen den Spalten. Die erste Spalte jeder Zeile
   bekommt weder Linie noch Einzug – sonst stünde sie eingerückt gegenüber dem
   übrigen Text. Welches Element "erste Spalte" ist, hängt von der Spaltenzahl
   ab und wird deshalb in jeder Medienabfrage neu bestimmt. */
.fact { padding: 0 1.75rem; border-left: 1px solid var(--border); }
.fact:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.fact__value {
  display: block;
  font-size: clamp(1.75rem, 3.2vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: .3rem;
}
.fact__label { font-size: .885rem; color: var(--text-muted); line-height: 1.45; }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__portrait { order: -1; max-width: 290px; }

  /* Zwei Spalten: Trennlinie und Einzug entfallen jetzt bei jedem ungeraden
     Element, denn das ist hier der Zeilenanfang. */
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
  .fact { padding: 0 1.5rem; border-left: 1px solid var(--border); }
  .fact:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
}

@media (max-width: 560px) {
  /* Einspaltig: Alle Kennzahlen stehen untereinander und beginnen bündig am
     linken Rand. Getrennt wird waagerecht statt senkrecht. */
  .facts { grid-template-columns: 1fr; row-gap: 0; }
  .fact {
    padding: 1.15rem 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .fact:first-child { padding-top: 0; border-top: 0; }
  .fact__value { margin-bottom: .15rem; }
}

@media (max-width: 480px) {
  .hero__actions .btn { width: 100%; }
}

/* -----------------------------------------------------------------------------
   6. Abschnitte
   -------------------------------------------------------------------------- */

/* --- Leistungen --- */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1.35rem;
}
.services { gap: 2.5rem 3rem; }
.service {
  padding: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--text);
}
.service:hover { border-top-color: var(--accent); }
.service__icon {
  display: block;
  margin-bottom: .9rem;
  color: var(--accent);
}
.service h3 { margin-bottom: .55rem; }
.service p { color: var(--text-soft); font-size: .965rem; margin-bottom: 1.25rem; }
.service .chip-list { margin-top: auto; }

/* --- Arbeitsweise --- */

.approach {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  counter-reset: step;
}
.approach__item { position: relative; padding-top: 1.6rem; border-top: 2px solid var(--border); }
.approach__item::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 46px; height: 2px;
  background: var(--accent-strong);
}
.approach__step {
  display: block;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: .55rem;
}
.approach__item h3 { margin-bottom: .45rem; font-size: 1.1rem; }
.approach__item p { color: var(--text-soft); font-size: .945rem; }

/* --- Profil --- */

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.profile-text p { color: var(--text-soft); font-size: 1.045rem; }
.profile-text p + p { margin-top: 1.05em; }
.profile-text strong { color: var(--text); font-weight: 650; }

.profile-quote {
  margin: 1.9rem 0 0;
  padding: 1.35rem 1.5rem;
  border-left: 3px solid var(--accent-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 1.045rem;
  font-style: italic;
}

.profile-side { display: grid; gap: 2.25rem; }
.info-card { padding: 1.1rem 0 0; border-top: 2px solid var(--text); }
.info-card h3 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--border);
  margin: 0;
  font-size: .945rem;
}
.info-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.info-list li:first-child { padding-top: 0; }
.info-list dt, .info-list .k { color: var(--text-muted); }
.info-list dd, .info-list .v { margin: 0; color: var(--text); font-weight: 600; text-align: right; }

@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } }

/* --- Werdegang --- */

.timeline { position: relative; padding-left: 2.35rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: .55rem; bottom: .55rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-line), var(--border) 70%);
  border-radius: 2px;
}
.tl-item { position: relative; padding-bottom: 2.6rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -2.35rem; top: .5rem;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--border-strong);
  box-shadow: 0 0 0 4px var(--bg);
}
.tl-item--current::before { border-color: var(--accent-strong); background: var(--accent-strong); }

.tl-period {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .83rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
  margin-bottom: .4rem;
}
.tl-period .tl-place { color: var(--text-muted); font-family: var(--font); font-weight: 500; }
.tl-period .tl-place::before { content: "· "; }

.tl-item h3 { margin-bottom: .25rem; font-size: 1.2rem; }
.tl-company { font-weight: 650; color: var(--text-soft); margin-bottom: .8rem; font-size: 1rem; }

/* Bewusst als Block, nicht als inline-flex: Der Inhalt eines Flex-Elements
   bricht standardmäßig nicht um. Auf schmalen Bildschirmen stand die Zeile
   dadurch über den Rand hinaus und erzeugte seitliches Scrollen. */
.tl-project {
  display: block;
  padding-left: .8rem;
  margin-bottom: .85rem;
  border-left: 2px solid var(--accent);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.tl-project svg {
  display: inline;
  vertical-align: -.15em;
  margin-right: .35rem;
}
.tl-project b { color: var(--text); font-weight: 650; }

.tl-bullets { list-style: none; margin: 0; padding: 0; }
.tl-bullets li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .48rem;
  color: var(--text-soft);
  font-size: .965rem;
}
.tl-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-strong);
}
.tl-sub { margin-top: 1.35rem; padding-left: 1rem; border-left: 2px solid var(--border); }

/* --- Ausbildung --- */

.education { display: grid; gap: 0; margin-top: 2rem; border-top: 1px solid var(--border); }
.edu-item {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: .3rem 1.5rem;
  align-items: baseline;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--border);
}
.edu-item__period { font-family: var(--font-mono); font-size: .84rem; color: var(--accent); font-weight: 600; }
.edu-item__title { font-weight: 650; color: var(--text); }
.edu-item__org { grid-column: 2; font-size: .92rem; color: var(--text-muted); }
@media (max-width: 620px) {
  .edu-item { grid-template-columns: 1fr; }
  .edu-item__org { grid-column: 1; }
}

/* --- Zertifikate --- */

/* Zertifikate als eigene Kacheln.
   Der Rest der Seite arbeitet mit Linien statt Rahmen – hier ist die Kachel
   aber sinnvoll: Jedes Zertifikat ist ein eigenständiger, anklickbarer
   Nachweis. Der Rahmen macht die Klickfläche sichtbar und trennt die
   Einträge deutlicher, als es eine reine Liste könnte. */
.certs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.1rem;
}
.cert {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1.35rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.cert:hover {
  color: inherit;
  border-color: var(--text-muted);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.cert:focus-visible { transform: translateY(-2px); }
.cert__seal {
  display: block;
  flex: 0 0 auto;
  padding-top: .15rem;
  color: var(--text-muted);
}
.cert:hover .cert__seal { color: var(--text); }
.cert__body { flex: 1 1 auto; min-width: 0; }
.cert__name {
  display: block;
  font-weight: 650;
  font-size: .97rem;
  line-height: 1.4;
  margin-bottom: .35rem;
  color: var(--text);
}
.cert__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .7rem;
  font-size: .82rem;
  color: var(--text-muted);
}
.cert__badge {
  padding: .12rem .5rem;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 650;
  font-size: .75rem;
  border: 1px solid var(--accent-line);
}
.cert__dl {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .6rem;
  font-size: .845rem;
  font-weight: 600;
  color: var(--accent);
}
.cert:hover .cert__dl { text-decoration: underline; }

/* --- Kompetenzen --- */

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.6rem 2.5rem;
}
.skill-group h3 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: .6rem;
  margin-bottom: .95rem;
  border-bottom: 1px solid var(--border);
}

.lang-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.lang-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 0; font-size: .95rem;
}
.lang-list b { font-weight: 650; }
.lang-list span { color: var(--text-muted); }

/* --- Kontakt --- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2.25rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-channels { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .85rem; }
.contact-channels li { margin: 0; }
.contact-channels { gap: 0; border-top: 1px solid var(--border); }
.contact-channel {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: color .18s var(--ease);
}
.contact-channel:hover { color: inherit; }
.contact-channel:hover .contact-channel__value { color: var(--accent); }
.contact-channel__icon {
  display: block; flex: 0 0 auto;
  color: var(--text-muted);
}
.contact-channel:hover .contact-channel__icon { color: var(--accent); }
.contact-channel__label { display: block; font-size: .78rem; color: var(--text-muted); letter-spacing: .05em; text-transform: uppercase; }
.contact-channel__value { display: block; font-weight: 650; color: var(--text); font-size: .99rem; }

.availability-note {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: .92rem;
  color: var(--text-soft);
}

/* -----------------------------------------------------------------------------
   7. Formular
   -------------------------------------------------------------------------- */

.form-card { padding: 1.6rem 0 0; border-top: 2px solid var(--text); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.form-field { display: flex; flex-direction: column; gap: .42rem; }
.form-field--full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.form-field label { font-size: .89rem; font-weight: 650; color: var(--text); }
.form-field .req { color: var(--accent); margin-left: .15rem; }
.form-field .hint { font-size: .82rem; color: var(--text-muted); font-weight: 400; }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: .78rem .95rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: .975rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.form-field textarea { min-height: 165px; resize: vertical; line-height: 1.6; }
.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2356697a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
  cursor: pointer;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: var(--text-muted); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-muted); opacity: .75; }

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: var(--error-fg); }
.field-error { font-size: .84rem; color: var(--error-fg); font-weight: 550; }

/* Einwilligung */

.consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.consent input[type="checkbox"] {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  margin-top: .12rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent label { font-size: .89rem; line-height: 1.55; color: var(--text-soft); font-weight: 400; cursor: pointer; }
.consent.has-error { border-color: var(--error-fg); background: var(--error-bg); }

/* Der Hinweis wird per JavaScript angehängt und braucht eine eigene Zeile.
   Dafür darf der Block umbrechen – der Beschriftungstext muss dann aber
   ausdrücklich neben dem Ankreuzfeld gehalten werden (flex: 1 1 0), sonst
   rutscht er wegen seiner Länge selbst in die nächste Zeile. */
.consent { flex-wrap: wrap; }
.consent label { flex: 1 1 0; min-width: 0; }
.consent .field-error { flex: 1 0 100%; margin-left: 2.9rem; }

/* Honigtopf – für Menschen unsichtbar, von Bots ausgefüllt */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
}

.form-footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .35rem;
}
.form-footer .note { font-size: .83rem; color: var(--text-muted); max-width: 19rem; flex: 1 1 14rem; }

/* Ausweichweg, wenn kein E-Mail-Programm eingerichtet ist */

.form-fallback {
  margin-top: 1.4rem;
  padding: 1.15rem 1.3rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.form-fallback[hidden] { display: none; }
.form-fallback p { font-size: .92rem; color: var(--text-soft); margin-bottom: .9rem; }
.form-fallback .btn { padding: .6rem 1.15rem; font-size: .9rem; }

/* Statusmeldungen */

.alert {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.05rem 1.25rem;
  margin-bottom: 1.6rem;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  line-height: 1.55;
}
.alert svg { flex: 0 0 auto; margin-top: .12rem; }
.alert--success { background: var(--success-bg); border-color: var(--success-br); color: var(--success-fg); }
.alert--error   { background: var(--error-bg);   border-color: var(--error-br);   color: var(--error-fg); }
.alert b { display: block; margin-bottom: .15rem; }

/* -----------------------------------------------------------------------------
   8. Fußzeile & Rechtsseiten
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--bg-sunken);
  border-top: 1px solid var(--border);
  padding-block: clamp(2.75rem, 5vw, 4rem) 1.75rem;
  margin-top: 0;
}
/* Fußzeile bewusst schlank: Navigation und Kontaktdaten stehen bereits weiter
   oben auf der Seite. Doppelte Angaben müssten doppelt gepflegt werden und
   laufen erfahrungsgemäß irgendwann auseinander. */
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
}
.footer-claim {
  margin: 0;
  font-size: .93rem;
  color: var(--text-muted);
  max-width: 30rem;
  text-align: right;
}
@media (max-width: 620px) { .footer-claim { text-align: left; } }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

.footer-brand p { color: var(--text-muted); font-size: .93rem; max-width: 30rem; margin-top: 1rem; }
.footer-col h3 {
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-col li { margin: 0; }
.footer-col a { color: var(--text-soft); text-decoration: none; font-size: .93rem; }
.footer-col a:hover { color: var(--accent); text-decoration: underline; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: .855rem;
  color: var(--text-muted);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom a { color: var(--text-soft); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: .2em; }
.footer-bottom a:hover { color: var(--accent); text-decoration: underline; }

/* Rechtsseiten */

.legal { padding-block: clamp(2.5rem, 5vw, 4rem) var(--space-section); }
.legal__inner { max-width: 50rem; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: .5rem; }
.legal__updated { color: var(--text-muted); font-size: .9rem; margin-bottom: 2.5rem; }
.legal h2 {
  font-size: 1.35rem;
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.legal h2:first-of-type { margin-top: 2rem; }
.legal h3 { font-size: 1.08rem; margin-top: 1.85rem; }
.legal h4 { font-size: .98rem; margin-top: 1.4rem; color: var(--text-soft); }
.legal p, .legal li { color: var(--text-soft); font-size: 1rem; }
.legal address { font-style: normal; line-height: 1.75; color: var(--text-soft); }
.legal .legal-box {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-alt);
  margin: 1.25rem 0;
}
.legal .legal-note {
  padding: 1rem 1.2rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-size: .92rem;
  color: var(--text-muted);
  margin: 1.25rem 0;
}
.toc { padding: 1.35rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.toc h2 { border: 0; margin: 0 0 .85rem; padding: 0; font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); }
.toc ol { margin: 0; padding-left: 1.25rem; columns: 2; column-gap: 2rem; }
.toc li { margin-bottom: .4rem; font-size: .93rem; break-inside: avoid; }
@media (max-width: 620px) { .toc ol { columns: 1; } }

.back-link {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-bottom: 1.75rem;
  font-size: .93rem; font-weight: 600; text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   9. Bewegung, Druck, Sonderfälle
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Wird nur ohne JavaScript sichtbar */
.no-js-only { display: none; }

@media print {
  .site-header, .site-footer, .theme-toggle, .nav-toggle,
  .hero__actions, .contact-grid form, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1.5rem; page-break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}