/* =====================================================================
   KI-Lotse — Landingpage V1.0

   Haltung aus dem Leitdokument: Ruhe, Klarheit, Orientierung.
   Kein Produktkatalog, kein Verkaufsprospekt, kein KI-Schaufenster.

   Technisch bewusst schlicht: keine Webfonts, keine Skripte, keine
   Cookies, kein Formular. Das ist keine Sparsamkeit, sondern eine
   Entscheidung -- jedes dieser vier Dinge verlängert die
   Datenschutzerklärung und den Pflegeaufwand.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Montserrat -- dieselbe Schrift wie auf den Canva-Bannern und der
   Visitenkarte.

   Sie liegt als Datei im eigenen Webspace und wird NICHT von Google
   geladen. Das ist kein Detail: Google Fonts direkt einzubinden
   überträgt die IP-Adresse jedes Besuchers in die USA -- das
   Landgericht München hat das 2022 für unzulässig erklärt, und es gibt
   seither eine Abmahnwelle. Selbst ausgeliefert geht nichts an Dritte,
   und die Datenschutzerklärung bleibt so kurz wie sie ist.

   Lizenz: SIL Open Font License 1.1 -- kostenlos, kommerziell nutzbar,
   Einbetten ausdrücklich erlaubt. Die Lizenz verlangt, dass jede Kopie
   Lizenztext und Copyright mitführt: `schrift/OFL.txt`.

   Nur `latin`, und nur die beiden Schnitte, die tatsächlich gebraucht
   werden: 600 und 700. Überschriften und Knöpfe sind fett oder
   halbfett, der normale Schnitt 400 käme nur zum Einsatz, wenn auch
   der Fließtext auf Montserrat umgestellt würde. Zusammen 37 KB.
   Umlaute und ß sind enthalten.

   `font-display: swap` -- der Text erscheint sofort in der
   Systemschrift und wechselt, sobald die Datei da ist. Lieber ein
   kurzer Wechsel als eine Sekunde leere Fläche.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Montserrat";
  src: url("../schrift/montserrat-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../schrift/montserrat-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* GEMESSEN, nicht geschätzt. Die drei mit "gemessen" markierten Werte
     stammen aus dem Auszählen der Pixel im Logo und auf der
     Visitenkarte -- nicht vom Bildschirm abgegriffen und nicht aus den
     Bannern abgeleitet. Die übrigen sind daraus aufgehellt oder
     abgedunkelt und damit Umsetzung, keine Markenentscheidung. */
  --navy:        #003078;  /* gemessen: 72 % des Logos */
  --gold:        #e8a020;  /* gemessen: der Lichtkegel */
  --blau-hell:   #a4c4d8;  /* gemessen: Grund der Visitenkarte */

  --navy-dunkel: #00205a;  /* abgeleitet */
  --blau-mittel: #2f5f9e;  /* abgeleitet */
  --blau-blass:  #e3eef5;  /* abgeleitet */
  --gold-dunkel: #c8851a;  /* abgeleitet */

  --text:        #1f2d3d;
  --text-leise:  #4d5f70;
  --linie:       #c8dceb;
  --weiss:       #ffffff;

  /* Zwei Schriften mit verschiedenen Aufgaben.

     Montserrat ist eine Auszeichnungsschrift: geometrisch, breit,
     gleichmäßig. Stark in Überschriften, ermüdend über viele Zeilen
     Fließtext -- die Buchstaben unterscheiden sich zu wenig
     voneinander, und das Auge greift beim Lesen genau danach.

     Deshalb: Montserrat dort, wo die Marke wiedererkannt wird
     (Überschriften, Markenkernsatz, Knöpfe), und die Systemschrift
     dort, wo gelesen wird. Beides zusammen ist der übliche Weg und
     kein Kompromiss. */
  --schrift-titel: "Montserrat", "Segoe UI", system-ui, -apple-system,
                   "Helvetica Neue", Arial, sans-serif;
  --schrift: "Segoe UI", Candara, Calibri, system-ui, -apple-system,
             "Helvetica Neue", Arial, sans-serif;

  --bahn: 1120px;
  --rund: 14px;
}

* { box-sizing: border-box; }

/* Nichts darf die Seite seitlich auseinanderschieben. Auf dem Telefon
   wirkt eine waagerecht verschiebbare Seite kaputt. */
html, body { overflow-x: hidden; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  line-height: 1.7;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

.bahn {
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 2.5rem);
}

/* Lesebreite. Lange Zeilen ermüden, und Ruhe ist hier das Ziel. */
.schmal { max-width: 46rem; }

h1, h2, h3,
.markenkern,
.knopf,
.zurueck,
.weg li::before {
  font-family: var(--schrift-titel);
}

h1, h2 {
  line-height: 1.25;
  overflow-wrap: break-word;
  hyphens: auto;
  letter-spacing: -0.015em;
  color: var(--navy-dunkel);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem); margin: 0 0 1.6rem; }

p { margin: 0 0 1.1rem; }

a { color: var(--blau-mittel); }
a:hover { color: var(--navy); }


/* ---------------------------------------------------------------------
   Modul 1 · Ankommen
   --------------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(120% 90% at 12% 25%, #ffffff 0%, var(--blau-blass) 55%,
                    var(--blau-hell) 100%);
  border-bottom: 1px solid var(--linie);
  padding-block: clamp(2.5rem, 7vw, 5.5rem);
}

.hero-raster {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  /* Leuchtturm links, Text rechts -- der Lichtstrahl stützt die
     Leserichtung. Auf dem Telefon steht er oben. */
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 56rem) {
  .hero-raster { grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr); }
}

.logo {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
  margin-inline: auto;
}

.markenkern {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  font-weight: 600;
  color: var(--blau-mittel);
  margin-bottom: 1.4rem;
}

/* Die Situation direkt unter der Frage. Sie trägt den Einstieg,
   deshalb etwas größer und in der Textfarbe, nicht in der leisen. */
.szene {
  font-size: 1.1em;
  color: var(--text);
  max-width: 32rem;
  margin-bottom: 1.6rem;
}

.unterzeile {
  font-size: 1.08em;
  color: var(--text-leise);
  max-width: 34rem;
  margin-bottom: 1rem;
}

/* Eine eigene Zeile, bewusst. Sie signalisiert den Schwerpunkt,
   ohne ihn zur Zugangsvoraussetzung zu machen. */
.schwerpunkt {
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2rem;
}


/* ---------------------------------------------------------------------
   Module
   --------------------------------------------------------------------- */
.modul { padding-block: clamp(3rem, 8vw, 5.5rem); }

.modul.getoent {
  background: var(--blau-blass);
  border-block: 1px solid var(--linie);
}

/* Der eine Satz, auf den ein Modul hinausläuft. */
.betont {
  font-size: 1.12em;
  font-weight: 600;
  color: var(--navy);
  margin-block: 1.6rem;
}


/* Modul 2 -- jede Zeile ein wiedererkennbarer Moment. */
.momente {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.momente li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--text-leise);
}

.momente li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.78em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gold);
}


/* Modul 6 -- das Porträt. Es steht links neben dem Text und läuft
   mit, statt eine eigene Zeile zu beanspruchen. Auf dem Telefon
   rückt es nach oben in die Mitte: nebeneinander bliebe für beides
   zu wenig Platz. */
.portraet {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 1.6rem;
  box-shadow: 0 6px 18px rgba(0, 48, 120, 0.18);
}

@media (min-width: 34rem) {
  .portraet {
    float: left;
    width: 190px;
    height: 190px;
    margin: 0.3rem 1.6rem 1rem 0;
  }
}

/* Der Fuß des Moduls muss den umflossenen Text wieder einfangen,
   sonst rutscht der nächste Abschnitt neben das Bild. */
.modul .bahn::after {
  content: "";
  display: block;
  clear: both;
}


/* Modul 4 -- die möglichen Verbesserungswege. Bewusst schlichter als
   die Liste in Modul 2: dort geht es ums Wiedererkennen, hier ums
   Abwägen. Vier gleichrangige Zeilen, keine Nummerierung -- eine
   Nummer würde eine Reihenfolge behaupten, die es nicht gibt. */
.wege {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.wege li {
  position: relative;
  padding-left: 1.6rem;
}

.wege li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.75rem;
  height: 2px;
  background: var(--gold);
}


/* Der Leitfaden, wörtlich unter der Überschrift von Modul 5. */
.leitfaden {
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2rem;
  overflow-wrap: break-word;
}

.nach-weg { margin-top: 2rem; }


/* Modul 5 -- der Weg, als nummerierte Folge. */
.weg {
  list-style: none;
  counter-reset: schritt;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.4rem;
}

.weg li {
  counter-increment: schritt;
  position: relative;
  padding-left: 3.4rem;
}

.weg li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--weiss);
  font-size: 0.95rem;
  font-weight: 600;
}


/* ---------------------------------------------------------------------
   Die eine Handlungsaufforderung
   --------------------------------------------------------------------- */
.tat { margin-top: 2.2rem; }

/* Zwei Wege nebeneinander: anrufen oder schreiben. Auf dem Telefon
   untereinander, damit beide volle Breite haben und sicher zu treffen
   sind -- oft mit Arbeitshandschuhen oder schmutzigen Fingern. */
.tat-paar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* Der zweite Weg ist gleichwertig, aber nicht gleich laut. Zwei
   gleich kräftige Knöpfe nebeneinander zwingen zu einer Wahl; ein
   ruhigerer daneben lädt ein.

   Doppelte Klasse im Selektor, weil .knopf weiter unten steht: bei
   gleicher Spezifität gewinnt im CSS die spätere Regel, und die wäre
   hier die falsche. */
.knopf.knopf-zweit {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  box-shadow: none;
}

.knopf.knopf-zweit:hover {
  background: var(--navy);
  color: var(--weiss);
  border-color: var(--navy);
}

/* Die Kontaktdaten unter den Knöpfen. Nüchtern -- wer hierher
   schaut, sucht die Nummer, nicht einen Satz darüber. */
.kontakt { margin-top: 1.8rem; }

.kontakt-titel {
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.3rem;
}

.kontakt-zeilen {
  margin: 0;
  line-height: 1.9;
  overflow-wrap: break-word;
}

/* Auf dem Telefon ist jede dieser Zeilen ein Ziel für den Daumen.
   Unterstrichen, damit erkennbar bleibt, dass sie es sind. */
.kontakt-zeilen a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kontakt-zeilen a:hover { color: var(--gold-dunkel); }

.knopf {
  display: inline-block;
  padding: 0.95rem 1.8rem;
  border-radius: var(--rund);
  background: var(--gold);
  color: var(--navy-dunkel);
  font-weight: 600;
  text-decoration: none;
  /* Unsichtbarer Rahmen, damit der zweite Knopf mit seinem sichtbaren
     Rahmen daneben nicht 4 Pixel größer gerät. */
  border: 2px solid transparent;
  box-shadow: 0 8px 20px rgba(232, 163, 61, 0.3);
  transition: background .15s ease, transform .15s ease;
  /* Lange deutsche Woerter -- "Orientierungsgespraech" hat 21 Zeichen --
     sprengen den Knopf auf schmalen Geraeten. Er darf umbrechen. */
  max-width: 100%;
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 30rem) {
  .knopf {
    display: block;
    padding-inline: 1.1rem;
    font-size: 0.98rem;
  }

  .tat-paar { flex-direction: column; }
}

.knopf:hover {
  background: var(--gold-dunkel);
  color: var(--navy-dunkel);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knopf { transition: none; }
  .knopf:hover { transform: none; }
}

.abschluss {
  background: var(--blau-blass);
  border-top: 1px solid var(--linie);
}


/* ---------------------------------------------------------------------
   Platzhalter -- sollen auffallen, nicht sich einfügen.
   Verschwinden, sobald die Entscheidung getroffen ist.
   --------------------------------------------------------------------- */
.platzhalter {
  margin: 2rem 0 0;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--gold-dunkel);
  border-radius: var(--rund);
  background: #fffaf0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #7a5a1e;
}

.platzhalter code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.95em;
}


/* ---------------------------------------------------------------------
   Rechtsseiten -- Impressum, Datenschutzerklärung

   Nüchtern und gut lesbar. Niemand kommt hierher zum Vergnügen; er
   sucht eine bestimmte Angabe. Also: kleine Schrift wäre falsch,
   Schmuck wäre falsch, eine klare Gliederung ist alles.
   --------------------------------------------------------------------- */
.rechts-kopf {
  background: var(--blau-blass);
  border-bottom: 1px solid var(--linie);
  padding-block: 1.1rem;
}

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  font-weight: 600;
  color: var(--navy);
}

.kopf-logo { height: 2.1rem; width: auto; }

.zurueck:hover { color: var(--gold-dunkel); }

.rechtstext h1 { margin-bottom: 0.6rem; }

.rechtstext h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  margin-top: 2.8rem;
  margin-bottom: 0.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
}

.rechtstext h3 {
  font-size: 1.05em;
  color: var(--navy);
  margin: 1.8rem 0 0.5rem;
}

.rechtstext ul { padding-left: 1.3rem; }
.rechtstext li { margin-bottom: 0.35rem; }

.stand {
  color: var(--text-leise);
  font-size: 0.92rem;
  margin-bottom: 2rem;
}

/* Die Pflichtangaben. Eine Beschreibungsliste, keine Tabelle -- auf dem
   Telefon fällt sie dann untereinander statt zu quetschen. */
.angaben {
  margin: 0;
  display: grid;
  gap: 0.2rem 1.5rem;
}

@media (min-width: 34rem) {
  .angaben { grid-template-columns: 14rem 1fr; }
}

.angaben dt {
  font-weight: 600;
  color: var(--navy);
}

.angaben dd {
  margin: 0 0 0.9rem;
  overflow-wrap: break-word;
}

@media (min-width: 34rem) {
  .angaben dd { margin-bottom: 0.45rem; }
}


/* ---------------------------------------------------------------------
   Fuß
   --------------------------------------------------------------------- */
.fuss {
  background: var(--navy-dunkel);
  color: var(--blau-hell);
  padding-block: clamp(2rem, 5vw, 3rem);
  font-size: 0.95rem;
}

.fuss a { color: var(--blau-hell); }
.fuss a:hover { color: var(--gold); }

.marke-hinweis { margin-bottom: 0.4rem; }

.fuss-wege { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 0; }

.fuss .platzhalter {
  background: rgba(255, 255, 255, 0.06);
  color: #f0d7a8;
  border-color: var(--gold-dunkel);
}

.fuss .platzhalter code { background: rgba(255, 255, 255, 0.12); }