/* =========================================================================
   KONTAKT

   -------------------------------------------------------------------------
   EINE STATION, NICHT ZWEI KARTEN

   Vorher standen hier eine weiße Visitenkarte und daneben ein weißes
   Formular. Zwei Karten nebeneinander lesen sich als zwei Angebote,
   zwischen denen man sich entscheiden soll. Gemeint ist aber eines: eine
   Stelle, an der man Nicola erreicht, auf drei kurzen und einem
   ausführlichen Weg.

   Deshalb liegen beide Hälften jetzt in einem Panel:

     eine Rundung          .ko-station hat sie, die Innenkanten erben sie
                           über overflow: hidden
     ein Schatten          liegt am Panel, nicht an den Hälften
     ein Abstandsmaß       --ko-luft gilt für beide Hälften gleich
     eine Höhe             ergibt sich von selbst, weil beide Hälften
                           Rasterfelder derselben Zeile sind

   Die gleiche Höhe wird also nicht ausgerechnet und nicht per
   min-height erzwungen. Wäre sie erzwungen, würde sie beim ersten
   längeren Text wieder brechen.

   -------------------------------------------------------------------------
   DIE RANGFOLGE IST TEIL DER GESTALTUNG

   Der Finanz-Check bleibt der Hauptweg. Er ist der große Knopf auf
   dunklem Grund am Ende der Seite.

   Der Absendeknopf hier ist ebenfalls orange, aber kleiner und in einem
   Formular. Die Rangfolge entsteht dadurch über Größe, Umgebung und
   Position statt über die Farbe. Ein umrandeter Knopf wirkte an dieser
   Stelle nicht untergeordnet, sondern unfertig.
   ========================================================================= */

/* Die Sektion. .um-kontakt-sec ist der alte Name von der Über-mich-Seite
   und bleibt gültig, damit nicht jede Seite umgeschrieben werden muss. */
.ko-sektion,
.um-kontakt-sec {
  background: var(--cream);
  padding: clamp(48px, 6.5vw, 96px) 0;
}

/* Auf hellem Grund, etwa unter dem Calendly-Bereich, braucht die
   Sektion eine andere Fläche, sonst verschwimmt sie mit der Seite. */
.ko-sektion.auf-weiss { background: var(--white); }


/* -------------------------------------------------------------------------
   Der Kopf, über beiden Hälften

   Er stand vorher in der linken Spalte. Dadurch begann links eine
   Überschrift und rechts sofort ein Eingabefeld, die Spalten fingen also
   auf verschiedenen Höhen an. Genau das ließ sie wie zwei getrennte
   Elemente wirken.
   ------------------------------------------------------------------------- */

.ko-kopf {
  max-width: 44rem;
  margin: 0 0 clamp(22px, 3vw, 34px);
}

.ko-kopf h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.026em;
  color: var(--charcoal);
  margin: 8px 0 12px;
}

.ko-text {
  font-family: var(--sans);
  font-size: clamp(0.98rem, 0.95rem + 0.2vw, 1.05rem);
  line-height: 1.7;
  color: #5F4E42;
  margin: 0;
  max-width: 52ch;
}


/* -------------------------------------------------------------------------
   Das gemeinsame Panel
   ------------------------------------------------------------------------- */

.ko-station {
  /* Ein Wert für beide Hälften. Solange hier nur eine Zahl steht, können
     die Abstände links und rechts nicht auseinanderlaufen. */
  --ko-luft: clamp(22px, 2.8vw, 34px);

  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  align-items: stretch;

  background: var(--white);
  border-radius: var(--r);
  /* clip statt hidden: Innerhalb liegt nichts Klebendes, aber clip ist
     die ehrlichere Angabe und erzeugt keinen Scrollkontext. */
  overflow: clip;
  box-shadow: 0 18px 48px rgba(90, 60, 35, 0.13);
}


/* -------------------------------------------------------------------------
   Linke Hälfte: die Kontaktkarte

   Kompakter als vorher. Das Foto ist etwas größer, die drei Wege sind
   dafür schmaler und ohne eigene Kästen. Die Trennung übernimmt eine
   Haarlinie, nicht ein zweiter Rahmen.
   ------------------------------------------------------------------------- */

.ko-karte {
  display: flex;
  flex-direction: column;
  padding: var(--ko-luft);
  /* Ein sehr leichter warmer Verlauf. Er unterscheidet die Hälfte vom
     Formular, ohne sie als eigene Karte abzusetzen. */
  background: linear-gradient(168deg, #FFF8F2 0%, #FDF6EF 100%);
  border-right: 1px solid rgba(90, 60, 35, 0.1);
}

.ko-karte-kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(90, 60, 35, 0.12);
}

.ko-foto {
  margin: 0;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  overflow: hidden;
  /* Ein schmaler oranger Ring. Der einzige Schmuck an der Karte, und er
     macht aus dem Foto ein Profilbild statt eines Ausschnitts. */
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px rgba(255, 97, 0, 0.5);
}
.ko-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ko-karte-name { display: grid; gap: 3px; }

.ko-name {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--charcoal);
}

.ko-rolle {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange-dark);
}

.ko-kanaele {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.ko-kanal {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 16px;
  grid-template-areas:
    "zeichen label pfeil"
    "zeichen wert  pfeil";
  align-items: center;
  gap: 0 12px;
  min-height: 58px;          /* bequem mit dem Daumen zu treffen */
  padding: 11px 10px;
  margin: 0 -10px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background 0.2s ease;
}
.ko-kanal:hover { background: rgba(255, 97, 0, 0.07); }
.ko-kanal:hover .ko-pfeil { opacity: 1; transform: translateX(2px); }

.ko-kanaele li + li .ko-kanal {
  border-top: 1px solid rgba(90, 60, 35, 0.09);
}

.ko-zeichen { grid-area: zeichen; font-size: 1.08rem; }

.ko-label {
  grid-area: label;
  font-family: var(--sans);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--charcoal);
}

.ko-wert {
  grid-area: wert;
  font-family: var(--sans);
  font-size: 0.84rem;
  color: var(--warm-grey);
  overflow-wrap: anywhere;   /* lange Adressen sprengen sonst die Karte */
}

/* Der Pfeil sagt, dass hier etwas passiert, wenn man tippt. Auf einem
   Handy gibt es kein Hovern, deshalb ist er auch ohne Zeigegerät
   sichtbar, nur zurückhaltend. */
.ko-pfeil {
  grid-area: pfeil;
  font-size: 0.9rem;
  color: var(--orange);
  opacity: 0.45;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ko-versprechen {
  /* Schiebt sich an den unteren Rand der Hälfte. Dadurch schließt die
     Karte immer bündig mit dem Formular ab, egal wie lang das wird. */
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(90, 60, 35, 0.12);
  font-family: var(--serif-lesbar);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--orange-dark);
}


/* -------------------------------------------------------------------------
   Rechte Hälfte: das Formular
   ------------------------------------------------------------------------- */

/* Die rechte Hälfte. Sie trägt den Innenabstand, nicht das Formular
   selbst: Nach dem Absenden tritt der Dankebereich an dessen Stelle und
   soll denselben Rand haben, ohne ihn ein zweites Mal zu setzen. */
.ko-rechts {
  display: grid;
  align-content: start;
  padding: var(--ko-luft);
}

.ko-formular {
  display: grid;
  align-content: start;
  gap: 14px;
}

/* Der Knopf, der das Formular ausklappt. Umrandet, nicht orange: Auf
   der Finanz-Check-Seite steht darüber die Terminbuchung, und die
   bleibt der Hauptweg. */
.ko-oeffner {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 24px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--orange-dark);
  background: transparent;
  border: 1.5px solid rgba(255, 97, 0, 0.45);
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ko-oeffner:hover {
  background: rgba(255, 97, 0, 0.07);
  border-color: var(--orange);
}
/* Sobald das Formular offen ist, hat der Knopf seine Aufgabe erfüllt
   und bekommt Abstand nach unten. */
.ko-oeffner[aria-expanded="true"] { margin-bottom: 18px; }

.ko-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 14px;
}

.ko-feld { display: grid; gap: 6px; }

.ko-beschriftung {
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--charcoal);
}
.ko-beschriftung em {
  font-style: normal;
  font-weight: 400;
  color: var(--warm-grey);
}

.ko-feld input,
.ko-feld select,
.ko-feld textarea {
  font-family: var(--sans);
  font-size: 1rem;           /* unter 16px zoomt iOS beim Antippen hinein */
  line-height: 1.5;
  color: var(--charcoal);
  /* Fast weiß statt beige. Das Beige war so nah am Kartenhintergrund,
     dass man die Felder kaum als Felder erkannte. Den Kontrast trägt
     jetzt der Rahmen. */
  background: #FDFCFA;
  border: 1.5px solid rgba(90, 60, 35, 0.22);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  width: 100%;
  min-height: 46px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ko-feld textarea { resize: vertical; min-height: 104px; }

.ko-feld input:focus,
.ko-feld select:focus,
.ko-feld textarea:focus {
  outline: none;
  border-color: var(--orange);
  /* Ein zweiter, weicher Ring. Nur die Rahmenfarbe zu wechseln ist bei
     hellen Bildschirmen kaum zu sehen. */
  box-shadow: 0 0 0 3px rgba(255, 97, 0, 0.16);
}

.ko-einwilligung {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--warm-grey);
}
.ko-einwilligung input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex: none;
  accent-color: var(--orange);
}
.ko-einwilligung a { color: var(--orange-dark); }

.ko-fehler {
  margin: 0;
  padding: 10px 14px;
  background: #FBE9E4;
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 0.88rem;
  color: #9E3D26;
}

/* Ein echter oranger Knopf.

   Damit stehen zwei orange Knöpfe auf der Seite: dieser und der
   Finanz-Check am Ende. Die Rangfolge kommt jetzt über die Größe und
   die Position, nicht mehr über die Farbe. Der Finanz-Check ist der
   große Knopf auf dunklem Grund am Schluss, dieser hier sitzt in einem
   Formular. */
.ko-knopf {
  justify-self: start;
  /* Deutlich mehr Luft nach oben. Ein Absendeknopf direkt unter der
     Einwilligung wird versehentlich gedrückt. */
  margin-top: 10px;
}

.ko-hinweis {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--warm-grey);
}


/* -------------------------------------------------------------------------
   Nach dem Absenden

   Die Meldung tritt an die Stelle des Formulars und bleibt damit im
   Panel. Sie hat bewusst keine eigene Karte mehr: Sonst stünde nach dem
   Absenden wieder eine Karte neben einer Karte, also genau das, was
   hier abgeschafft wurde.
   ------------------------------------------------------------------------- */

.ko-danke {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  /* Ohne diese Zeile wäre die Meldung nur so hoch wie ihr Text und
     stünde oben in einer sonst leeren Hälfte. */
  min-height: 220px;
}

.ko-danke-zeichen { font-size: 2.4rem; line-height: 1; }

.ko-danke h3 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.7rem);
  font-weight: 700;
  color: var(--charcoal);
  margin: 10px 0 6px;
}

.ko-danke p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: #5F4E42;
  margin: 0;
  max-width: 42ch;
}

/* Der zweite Weg, falls sich kein Mailprogramm geöffnet hat. Ohne ihn
   wäre genau diese Besucherin lautlos verloren. */
.ko-danke-klein {
  margin-top: 14px !important;
  padding-top: 14px;
  border-top: 1px solid rgba(90, 60, 35, 0.12);
  font-size: 0.86rem !important;
  color: var(--warm-grey) !important;
}
.ko-danke-klein a { color: var(--orange-dark); }


/* -------------------------------------------------------------------------
   Der Hinweis auf den Finanz-Check unter dem Formular

   Auf der Kontaktseite steht er bewusst UNTER dem Formular. Wer diese
   Seite ansteuert, wollte schreiben. Ihr zuerst einen Termin anzubieten
   hieße, die Frage zu ignorieren, mit der sie gekommen ist.
   ------------------------------------------------------------------------- */

.ko-hinweis-sec {
  background: var(--white);
  padding: clamp(36px, 4.5vw, 64px) 0;
}

.ko-termin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(22px, 3vw, 34px);
  background: var(--cream);
  border-radius: var(--r);
}

.ko-termin-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 700;
  line-height: 1.16;
  color: var(--charcoal);
  margin: 0 0 8px;
}

.ko-termin-text p {
  font-family: var(--sans);
  font-size: 0.98rem;
  line-height: 1.65;
  color: #5F4E42;
  margin: 0;
  max-width: 46ch;
}


/* -------------------------------------------------------------------------
   Kontaktdaten im Footer
   ------------------------------------------------------------------------- */

.footer-kontakt {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.footer-kontakt a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  min-height: 32px;
  overflow-wrap: anywhere;
}
.footer-kontakt a:hover { color: var(--white); }


/* =========================================================================
   SCHMALE BILDSCHIRME

   Nicht einfach untereinander stapeln. Auf dem Handy ist die
   Reihenfolge Karte, dann Formular richtig, aber die Karte braucht dabei
   andere Maße als am Rechner: Die drei Wege werden zu Flächen, die man
   mit dem Daumen trifft, und der Absendeknopf nimmt die volle Breite.
   ========================================================================= */

@media (max-width: 900px) {
  .ko-station {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Die Trennlinie wandert von rechts nach unten. Ohne diese Zeile
     stünde auf dem Handy eine senkrechte Linie am rechten Rand, die
     nichts mehr trennt. */
  .ko-karte {
    border-right: 0;
    border-bottom: 1px solid rgba(90, 60, 35, 0.12);
  }

  /* Am Rechner schiebt margin: auto das Versprechen an den unteren
     Rand. Einspaltig gibt es dort kein Unten mehr, deshalb wird der
     Abstand wieder ein normaler. */
  .ko-versprechen { margin-top: 18px; }
}

@media (max-width: 768px) {
  .ko-sektion,
  .um-kontakt-sec { padding: 40px 0 44px; }

  .ko-station { --ko-luft: 18px; }

  .ko-oeffner { justify-self: stretch; justify-content: center; min-height: 54px; }

  /* --- Die drei Wege als Touchflächen ---

     Am Rechner reicht eine Zeile mit Hoverfläche. Mit dem Daumen will
     man eine Fläche sehen, bevor man sie trifft. Deshalb bekommt jeder
     Weg hier einen eigenen hellen Kasten statt einer Trennlinie. */
  .ko-kanaele { gap: 10px; margin-top: 14px; }
  .ko-kanaele li + li .ko-kanal { border-top: 0; }

  .ko-kanal {
    min-height: 62px;
    padding: 12px 14px;
    margin: 0;
    background: var(--white);
    border: 1px solid rgba(90, 60, 35, 0.14);
    border-radius: var(--r-sm);
  }
  .ko-pfeil { opacity: 0.7; }

  .ko-label { font-size: 1rem; }
  .ko-wert  { font-size: 0.88rem; }

  .ko-foto { width: 66px; height: 66px; }
  .ko-name { font-size: 1.15rem; }

  .ko-versprechen { font-size: 0.98rem; }

  /* --- Formular ---

     Zwei Felder nebeneinander sind auf 360 px zwei halbe Felder.
     Deshalb hier immer volle Breite. */
  .ko-reihe { grid-template-columns: minmax(0, 1fr); }

  .ko-feld input,
  .ko-feld select,
  .ko-feld textarea { min-height: 50px; }

  /* Der Datenschutzhinweis ist der Text, der auf dem Handy am ehesten
     zusammengequetscht aussieht: kleine Schrift, enge Zeilen, direkt
     neben einem Kästchen. Deshalb hier mehr Zeilenabstand und mehr
     Platz zum Kästchen. */
  .ko-einwilligung {
    gap: 14px;
    font-size: 0.9rem;
    line-height: 1.65;
    margin-top: 4px;
  }
  .ko-einwilligung input { width: 22px; height: 22px; margin-top: 2px; }

  .ko-knopf {
    justify-self: stretch;
    width: 100%;
    min-height: 54px;
    margin-top: 14px;
    text-align: center;
  }

  .ko-hinweis { font-size: 0.85rem; }
}

@media (max-width: 380px) {
  .ko-station { --ko-luft: 15px; }
  /* Auf sehr schmalen Geräten steht die Adresse sonst zweizeilig
     unter einer einzeiligen Bezeichnung und die Fläche wird hoch. */
  .ko-wert { font-size: 0.84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ko-kanal,
  .ko-pfeil { transition: none; }
  .ko-kanal:hover .ko-pfeil { transform: none; }
}