/* ==========================================================
   style.css – Aussehen für alle Seiten von daniel-fochtner.de
   Alle drei HTML-Seiten binden diese eine Datei ein.
   Aufbau: erst die Regeln fürs Handy, ganz unten die
   Anpassungen für größere Bildschirme.
   ========================================================== */


/* ---------- 1. Farben und Grundwerte ----------
   Alle Farben stehen hier an einer Stelle. Es gibt eine
   Akzentfarbe (Blau) in drei Helligkeiten, dazu Grautöne.
   Wer das Blau ändern will, ändert nur diese Zeilen. */
:root {
  --blau: #1f4e79;          /* Akzent: Links, Knöpfe, Symbole */
  --blau-dunkel: #163a5a;   /* Akzent beim Darüberfahren */
  --blau-hell: #eef3f8;     /* zarte Flächen hinter Symbolen */
  --blau-linie: #d5e0eb;    /* Rahmen in blauen Flächen */

  --text: #16202a;          /* fast Schwarz, sehr gut lesbar */
  --text-leise: #4a5563;    /* Nebentext, immer noch klar lesbar */
  --linie: #e3e8ee;         /* feine Trennlinien und Rahmen */
  --flaeche: #f6f8fa;       /* helles Grau für Hintergründe */
  --weiss: #ffffff;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --rand: 1.25rem;          /* Seitenrand links und rechts am Handy */
  --breite: 70rem;          /* maximale Breite des Layouts */
  --textbreite: 40rem;      /* maximale Breite von Fließtext */
  --rundung: 12px;          /* Ecken von Karten und Knöpfen */
  --tempo: 160ms;           /* Dauer kleiner Übergänge */
}


/* ---------- 2. Grundeinstellungen ---------- */

/* Innenabstand und Rahmen zählen zur Breite eines Elements. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Sprungziele nicht unter der festen Kopfleiste verstecken */
  scroll-padding-top: 5rem;
}

/* Sanftes Scrollen zu Abschnitten, aber nur, wenn die
   Person im System keine reduzierte Bewegung eingestellt hat. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.125rem;      /* 18 Pixel Fließtext */
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
}

svg {
  display: block;
  flex-shrink: 0;
}


/* ---------- 3. Überschriften und Text ---------- */

h1,
h2,
h3 {
  margin: 0 0 1rem;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -0.02em;
  text-wrap: balance;       /* gleichmäßig lange Zeilen in Überschriften */
}

/* clamp(kleinster Wert, bevorzugter Wert, größter Wert):
   Die Schrift wächst stufenlos mit der Bildschirmbreite. */
h1 {
  font-size: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem);
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.625rem);
}

h3 {
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p,
ul,
ol,
address {
  margin: 0 0 1rem;
}

p {
  text-wrap: pretty;        /* verhindert einzelne Wörter in der letzten Zeile */
}

strong {
  font-weight: 700;
}

/* Kleine Zeile über einer Überschrift, z. B. "Angebot" */
.kicker {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blau);
}

/* Größerer Einleitungstext */
.lead {
  font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  line-height: 1.55;
  color: var(--text-leise);
  max-width: 36rem;
}


/* ---------- 4. Links und Tastaturbedienung ---------- */

a {
  color: var(--blau);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--tempo) ease;
}

a:hover {
  color: var(--blau-dunkel);
  text-decoration-thickness: 2px;
}

/* Deutlich sichtbarer Rahmen, wenn man mit der Tastatur navigiert. */
:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sprunglink "Zum Inhalt": unsichtbar, bis man mit der Tab-Taste
   hineinspringt. Hilft Menschen, die ohne Maus unterwegs sind. */
.sprunglink {
  position: absolute;
  z-index: 100;
  left: var(--rand);
  top: -4rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--blau);
  color: var(--weiss);
  font-weight: 700;
}

.sprunglink:focus {
  top: 0.75rem;
  color: var(--weiss);
}


/* ---------- 5. Container ---------- */

/* Jeder Bereich bekommt dieselbe begrenzte Breite und steht mittig. */
.container {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin: 0 auto;
  padding: 0 var(--rand);
}

.container-schmal {
  max-width: calc(var(--textbreite) + 2 * var(--rand));
}


/* ---------- 6. Knöpfe ---------- */

/* Große Schaltflächen, gut mit dem Daumen zu treffen. */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--blau);
  border-radius: var(--rundung);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;  /* lange Mailadresse darf umbrechen */
  cursor: pointer;
  transition: background-color var(--tempo) ease,
              border-color var(--tempo) ease,
              color var(--tempo) ease;
}

.knopf svg {
  width: 1.3rem;
  height: 1.3rem;
}

.knopf:hover {
  text-decoration: none;
}

/* Gefüllt: der wichtigste Weg */
.knopf-voll {
  background: var(--blau);
  color: var(--weiss);
}

.knopf-voll:hover {
  background: var(--blau-dunkel);
  border-color: var(--blau-dunkel);
  color: var(--weiss);
}

/* Nur umrandet: der zweite Weg */
.knopf-rand {
  background: var(--weiss);
  color: var(--blau);
  border-color: var(--blau-linie);
}

.knopf-rand:hover {
  background: var(--blau-hell);
  border-color: var(--blau);
  color: var(--blau-dunkel);
}

/* Kleiner Knopf in der Kopfleiste */
.knopf-klein {
  min-height: 2.75rem;
  padding: 0.45rem 1.1rem;
  font-size: 1rem;
  border-radius: 999px;
}

.knopf-gruppe {
  display: flex;
  flex-direction: column;   /* am Handy untereinander */
  gap: 0.75rem;
  margin-top: 2rem;
}


/* ---------- 7. Kopfleiste ----------
   Bleibt beim Scrollen oben stehen (position: sticky).
   Dafür ist kein JavaScript nötig. */
.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--linie);
}

@supports (backdrop-filter: blur(8px)) {
  .kopfleiste {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
  }
}

.kopfleiste-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

/* Name mit Monogramm links in der Kopfleiste */
.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 750;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

.marke:hover {
  color: var(--text);
}

.marke-zeichen {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: var(--blau);
  color: var(--weiss);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.navigation ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation a:not(.knopf) {
  display: inline-block;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  color: var(--text-leise);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.navigation a:not(.knopf):hover {
  color: var(--text);
  background: var(--flaeche);
}

/* Diese Menüpunkte erscheinen erst auf breiteren Bildschirmen. */
.nur-breit {
  display: none;
}


/* ---------- 8. Einstiegsbereich (ganz oben) ---------- */

.held {
  position: relative;
  isolation: isolate;       /* hält das Hintergrundraster in diesem Bereich */
  padding: 3.5rem 0 3.5rem;
  overflow: hidden;
  border-bottom: 1px solid var(--linie);
}

/* Feines Raster im Hintergrund, rein aus CSS, ohne Bilddatei.
   Es läuft nach unten und zur Mitte hin weich aus. */
.held::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 85% 0%, #000 0%, transparent 65%);
  mask-image: radial-gradient(ellipse at 85% 0%, #000 0%, transparent 65%);
  opacity: 0.7;
}

.held h1 {
  margin-bottom: 1.25rem;
}

/* Liste der Branchen als kleine Schildchen */
.branchen {
  margin-top: 2.5rem;
}

.branchen-titel {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  color: var(--text-leise);
}

.branchen ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.branchen li {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--weiss);
  font-size: 1rem;
  color: var(--text);
}


/* ---------- 9. Abschnitte ---------- */

.abschnitt {
  padding: 4.5rem 0;
}

.abschnitt-grau {
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.abschnitt-kopf {
  max-width: var(--textbreite);
  margin-bottom: 2.5rem;
}

.abschnitt-kopf p:last-child {
  margin-bottom: 0;
}


/* ---------- 10. Leistungen als Karten ---------- */

.karten {
  display: grid;
  grid-template-columns: 1fr;   /* am Handy eine Spalte */
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.karte {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--weiss);
  transition: border-color var(--tempo) ease;
}

.karte:hover {
  border-color: var(--blau-linie);
}

.karte p:last-child {
  margin-bottom: 0;
}

/* Hervorgehobener Satz am Ende einer Karte */
.karte .nutzen {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  font-weight: 600;
  color: var(--text);
}

/* Das kleine Symbol oben in jeder Karte */
.symbol {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border-radius: 10px;
  background: var(--blau-hell);
  color: var(--blau);
}

.symbol svg {
  width: 1.5rem;
  height: 1.5rem;
}


/* ---------- 11. Arbeitsweise in vier Schritten ----------
   Die Nummern entstehen per CSS-Zähler. Für Screenreader
   bleibt es eine normale nummerierte Liste. */
.schritte {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.schritte li {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 4.25rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--weiss);
  counter-increment: schritt;
}

.schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--blau);
  color: var(--weiss);
  font-weight: 800;
  font-size: 1.05rem;
}

.schritte h3 {
  margin-bottom: 0.4rem;
  font-size: 1.2rem;
}

.schritte p {
  margin: 0;
  color: var(--text-leise);
}

/* Ehrlicher Hinweis zum Start als hervorgehobener Kasten */
.hinweis {
  display: flex;
  gap: 1rem;
  max-width: 48rem;
  margin-top: 2rem;
  padding: 1.5rem;
  border-left: 4px solid var(--blau);
  border-radius: 0 var(--rundung) var(--rundung) 0;
  background: var(--blau-hell);
}

.hinweis svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.2rem;
  color: var(--blau);
}

.hinweis p {
  margin: 0;
}


/* ---------- 12. Kontakt ---------- */

.kontakt {
  padding: 4.5rem 0;
  background: var(--blau);
  color: var(--weiss);
}

.kontakt .kicker {
  color: var(--blau-linie);
}

.kontakt h2 {
  max-width: 36rem;
}

.kontakt .lead {
  color: #dce6f0;
}

.kontakt .knopf-voll {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--blau);
}

.kontakt .knopf-voll:hover {
  background: var(--blau-hell);
  border-color: var(--blau-hell);
  color: var(--blau-dunkel);
}

.kontakt .knopf-rand {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--weiss);
}

.kontakt .knopf-rand:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--weiss);
  color: var(--weiss);
}

/* Beschriftung über der Nummer bzw. Adresse im Knopf */
.knopf-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.knopf-art {
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0.85;
}

.kontakt .knopf {
  justify-content: flex-start;
  min-height: 4.5rem;
  padding: 0.9rem 1.1rem;
  font-size: 1.0625rem;     /* am Handy etwas kleiner, damit die Mailadresse in eine Zeile passt */
}

.kontakt :focus-visible {
  outline-color: var(--weiss);
}

.ort {
  margin: 2rem 0 0;
  font-size: 1rem;
  color: #dce6f0;
}


/* ---------- 13. Impressum und Datenschutz ---------- */

.seitenkopf {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
}

.seitenkopf h1 {
  margin: 0;
  font-size: clamp(1.9rem, 1.4rem + 2.5vw, 3.25rem);
  hyphens: auto;            /* langes Wort "Datenschutzerklärung" darf am Handy trennen */
}

/* Nur oben und unten Abstand, links und rechts kommt vom .container */
.rechtstext {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
  hyphens: auto;
  overflow-wrap: break-word;
}

.rechtstext h2 {
  margin-top: 2.75rem;
  font-size: 1.4rem;
}

.rechtstext h2:first-child {
  margin-top: 0;
}

.rechtstext address {
  font-style: normal;
}

.rechtstext ul {
  padding-left: 1.25rem;
}

.rechtstext li {
  margin-bottom: 0.35rem;
}

.stand {
  margin-top: 3rem;
  color: var(--text-leise);
  font-size: 1rem;
}


/* ---------- 14. Fußbereich ---------- */

.fuss {
  padding: 2.5rem 0;
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  color: var(--text-leise);
  font-size: 1rem;
}

.fuss-innen {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fuss ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuss a {
  display: inline-block;
  padding: 0.35rem 0;    /* größere Klickfläche */
  color: var(--text-leise);
}

.fuss a:hover,
.fuss a[aria-current="page"] {
  color: var(--text);
}

.fuss p {
  margin: 0;
}


/* ---------- 15. Dezentes Einblenden beim Scrollen ----------
   Karten und Schritte gleiten beim Scrollen leicht herein.
   Das macht der Browser selbst, ganz ohne JavaScript.
   Ältere Browser zeigen die Inhalte einfach sofort an, und
   bei eingestellter reduzierter Bewegung passiert nichts. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .einblenden {
      animation: einblenden linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}

@keyframes einblenden {
  from {
    opacity: 0;
    translate: 0 1.25rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}


/* ---------- 16. Größere Bildschirme ----------
   Ab 40em (etwa 640 Pixel): Knöpfe nebeneinander.
   Ab 56em (etwa 900 Pixel): mehrspaltiges Layout. */
@media (min-width: 40em) {
  :root {
    --rand: 2rem;
  }

  .knopf-gruppe {
    flex-direction: row;
    flex-wrap: wrap;
  }

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

  .nur-breit {
    display: list-item;
  }
}

@media (min-width: 56em) {
  .held {
    padding: 6.5rem 0 5.5rem;
  }

  .abschnitt,
  .kontakt {
    padding: 6.5rem 0;
  }

  .karten {
    grid-template-columns: repeat(3, 1fr);
  }

  .karte {
    padding: 2rem 1.75rem;
  }

  .kontakt-raster {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
  }

  .kontakt .knopf-gruppe {
    flex-direction: column;
    margin-top: 0;
  }

  .kontakt .knopf {
    padding: 0.9rem 1.5rem;
    font-size: 1.25rem;
  }

  .fuss-innen {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}