/* =========================================================
   GESTALTUNG FÜR ALLE SEITEN
   Farben und Schriften stehen ganz oben gesammelt.
   Wer eine Farbe ändern will, ändert sie nur hier.
   ========================================================= */

/* ---------- Schriften (liegen lokal im Ordner /fonts) ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Farben und Grundwerte ---------- */
:root {
  --dunkelblau: #0f4c78;   /* großer Farbblock oben und Kontaktbereich */
  --logoblau:   #3b7fbf;   /* Linien und kleine Akzente */
  --hellblau:   #cfe0ee;   /* Text auf Dunkelblau */
  --tinte:      #14212e;   /* normale Textfarbe */
  --grau:       #4f5d6a;   /* ruhiger Nebentext */
  --flaeche:    #f3f7fa;   /* zartblaue Hintergrundfläche */
  --weiss:      #ffffff;

  --schrift-titel: "Montserrat", "Segoe UI", Arial, sans-serif;
  --schrift-text:  "Source Sans 3", "Segoe UI", Arial, sans-serif;

  --breite: 1040px;        /* maximale Inhaltsbreite am Computer */
  --rand: 22px;            /* Abstand zum Bildschirmrand am Handy */
}

/* ---------- Grundeinstellungen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 18px;
  line-height: 1.6;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--dunkelblau); }
h1, h2, h3 { font-family: var(--schrift-titel); line-height: 1.2; margin: 0; }
p { margin: 0; }

/* Sichtbarer Rahmen bei Tastatur-Bedienung */
a:focus-visible { outline: 3px solid var(--logoblau); outline-offset: 3px; border-radius: 4px; }

.innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Kopfzeile mit Logo ---------- */
.kopf {
  background: var(--weiss);
  padding-top: env(safe-area-inset-top, 0px);
}
.kopf .innen { display: flex; align-items: center; height: 72px; }
.kopf img { width: 168px; }

/* ---------- Buttons ---------- */
.knopf {
  display: block;
  text-align: center;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  padding: 15px 22px;
  border-radius: 6px;
  border: 2px solid transparent;
  min-height: 52px;          /* gut mit dem Daumen zu treffen */
}
.knopf + .knopf { margin-top: 12px; }
.knopf-voll   { background: var(--weiss); color: var(--dunkelblau); }
.knopf-rahmen { border-color: rgba(255,255,255,.55); color: var(--weiss); }
.knopf-voll:hover   { background: var(--hellblau); }
.knopf-rahmen:hover { border-color: var(--weiss); }

/* ---------- Oberer Farbblock (Startseite) ---------- */
.held {
  background: var(--dunkelblau);
  color: var(--weiss);
  padding: 44px 0 0;
}
.held .innen { position: relative; padding-bottom: 76px; }
.held h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.3px; max-width: 14ch; }
.held .unterzeile { color: var(--hellblau); font-size: 18px; margin-top: 16px; max-width: 34ch; }
.held .knoepfe { margin-top: 28px; }
.held .portrait {
  position: absolute;
  right: var(--rand);
  bottom: -62px;
  width: 124px; height: 124px;
  border-radius: 50%;
  border: 5px solid var(--weiss);
  object-fit: cover;
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 64px 0; }
.abschnitt h2 { font-size: 24px; font-weight: 700; }
.abschnitt-erster { padding-top: 96px; }  /* Platz für das überlappende Foto */
.abschnitt-flaeche { background: var(--flaeche); }

/* ---------- Leistungen ---------- */
.leistungen { display: grid; gap: 32px; margin-top: 32px; }
.leistung { border-top: 3px solid var(--logoblau); padding-top: 14px; }
.leistung h3 { font-size: 18px; font-weight: 600; }
.leistung p { color: var(--grau); margin-top: 8px; }

/* ---------- Über mich ---------- */
.ueber { display: grid; gap: 28px; }
.ueber img { border-radius: 6px; width: 100%; max-width: 420px; }
.ueber p { margin-top: 16px; }
.werkzeuge { color: var(--grau); font-size: 16px; }

/* ---------- Kontakt ---------- */
.kontakt { background: var(--dunkelblau); color: var(--weiss); }
.kontakt p { color: var(--hellblau); margin-top: 12px; max-width: 40ch; }
.kontakt .knoepfe { margin-top: 28px; }

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.unterseite { padding: 40px 0 64px; }
.unterseite h1 { font-size: 28px; font-weight: 700; }
.unterseite h2 { font-size: 19px; font-weight: 600; margin-top: 32px; }
.unterseite p { margin-top: 10px; }
.unterseite .zurueck { display: inline-block; margin-top: 32px; font-weight: 600; }

/* Rechtstexte: lange Texte gut lesbar, lange Links brechen um */
.rechtstext { max-width: 70ch; overflow-wrap: anywhere; font-size: 17px; }
.rechtstext h2 { font-size: 21px; margin-top: 40px; }
.rechtstext h3 { font-size: 18px; font-weight: 600; margin-top: 28px; }
.rechtstext h4 { font-family: var(--schrift-text); font-size: 17px; font-weight: 600; margin-top: 20px; }
.rechtstext ul { padding-left: 22px; margin: 10px 0 0; }
.rechtstext li { margin-top: 6px; }

/* Gelb markierte Platzhalter (falls später wieder gebraucht) */
.platzhalter {
  background: #fff4c2;
  border: 2px dashed #c79a00;
  color: #5a4500;
  padding: 14px 16px;
  border-radius: 6px;
  margin-top: 16px;
  font-size: 16px;
}

/* ---------- Fußzeile ---------- */
.fuss { background: #0b3a5c; color: var(--hellblau); font-size: 15px; padding: 28px 0; }
.fuss .innen { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.fuss a { color: var(--weiss); text-decoration: none; padding: 8px 0; }
.fuss a:hover { text-decoration: underline; }
.fuss .copy { flex-basis: 100%; }

/* =========================================================
   GRÖSSERE BILDSCHIRME (Tablet und Computer)
   Alles darüber gilt fürs Handy, hier kommen nur Anpassungen.
   ========================================================= */
@media (min-width: 720px) {
  :root { --rand: 40px; }
  .kopf .innen { height: 88px; }
  .kopf img { width: 200px; }
  .held { padding-top: 72px; }
  .held .innen { padding-bottom: 96px; }
  .held h1 { font-size: 46px; }
  .held .unterzeile { font-size: 20px; }
  .held .knoepfe { display: flex; gap: 14px; }
  .knopf + .knopf { margin-top: 0; }
  .held .portrait { width: 230px; height: 230px; bottom: -90px; right: 40px; }
  .abschnitt { padding: 88px 0; }
  .abschnitt-erster { padding-top: 120px; }
  .abschnitt h2 { font-size: 30px; }
  .leistungen { grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .ueber { grid-template-columns: 2fr 3fr; gap: 56px; align-items: center; }
  .kontakt .knoepfe { display: flex; gap: 14px; }
  .fuss .copy { flex-basis: auto; margin-right: auto; }
}

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