/* ==========================================================================
   pages/kontakt.css
   Seitenkopf und Zielgruppenblock der Kontaktseite.
   Die beiden direkten Wege (Telefon, E-Mail) kommen unveraendert aus
   sections/kontakt.css - dieselben Karten, die in der V3-Fassung auf der
   Startseite standen. Die Tabs kommen aus components/tabs.css.
   ========================================================================== */

/* --- Seitenkopf --------------------------------------------------------- */
/* Kein Bogen und kein Stimmungsbild, wie auf der Rezeptliste: der Goldbogen
   ist den Imageseiten und dem Produktkopf vorbehalten. Wer die Kontaktseite
   aufruft, will eine Nummer, kein Motiv. */
  /* UNTERES POLSTER DER SEITENKOEPFE: --sp-8, also 64 px. Vereinheitlicht am
     28.08.2026, freigegeben nach Ansicht von /rezepte/.

     Vorher standen hier drei Werte fuer dieselbe Lage: 32 px (FAQ,
     Stellenarchiv, Stellendetail), 48 px (Kontakt) und 64 px (Rezeptliste).
     Massgeblich ist die Startseite: sie setzt zwischen Textblock und Inhalt
     62 px. 32 px waren weniger als die Haelfte davon.

     DIE KOEPFE MIT BOGEN sind NICHT betroffen - .dlkopf, .hakopf und .pkopf
     liegen bei 114 bis 122 px, darin stecken rund 90 px Bogen. Sie sind
     strukturell anders und untereinander stimmig. */
.kkopf {
  background: var(--bg-page);
  padding-block: var(--sp-sektion) var(--sp-8);
}
.kkopf__title {
  font-family: var(--font-body);
  font-size: var(--fs-600);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--toem-blau);
  margin: 0 0 var(--sp-4);
}
/* Wie im Produktkopf und auf der Rezeptliste: der Token, kein em-Faktor.
   NICHT in die em-Gruppen von feinschliff.css eintragen. */
.kkopf__title em {
  font-size: var(--fs-800);
  margin: -0.08em 0 0;
  padding-block: 0.04em 0.06em;
}
.kkopf__lead {
  max-width: 34rem;
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin: 0;
}

/* --- Direkte Wege ------------------------------------------------------- */
/* sections/kontakt.css bringt .kontakt mit padding-block: var(--sp-sektion)
   mit. Hier steht der Block direkt unter dem Seitenkopf auf derselben
   weissen Bahn, ein voller Sektionsabstand oben waere doppelt. */
.kkopf + .kontakt { padding-top: 0; }
/* Der Bogen sitzt am Fuss der letzten weissen Sektion und trennt sie von der
   grauen Zielgruppenbahn. --schwung-grund stellt die Flaeche auf das Grau
   der Bahn darunter; ohne das reisst der Uebergang.
   Das untere Polster muss die Bogenhoehe mittragen, sonst laeuft der Bogen
   in den Inhalt. Dieselbe Rechnung wie bei .pkopf. */
.kontakt {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(min(6.25vw, 6rem) + var(--sp-6));
  --schwung-grund: var(--bg-soft);
}
.kontakt > .schwung {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
}

/* --- Zielgruppen als Tabs ----------------------------------------------- */
/* Kundenwunsch: jede Zielgruppe soll ihren direkten Kontakt sehen. Als drei
   Tabs statt dreier untereinanderstehender Bloecke - so steht der eigene Weg
   je Gruppe vollstaendig da, ohne dass die Seite dreimal so lang wird.
   Graue Bahn, damit die weissen Kontaktkarten in den Panels Flaeche haben. */
.kziel {
  background: var(--bg-soft);
  padding-block: var(--sp-sektion);
}

/* Die Sektionsueberschrift. ACHTUNG: components/sektionstitel.css ist der
   DATEINAME der Komponente, es gibt keine Klasse .sektionstitel - die
   Komponente registriert je Sektion einen eigenen Selektor. Hier stand
   zuerst class="sektionstitel", und die H2 hatte damit gar keine
   Gestaltung. */
.kziel__title,
.kadr__title {
  font-family: var(--font-body);
  font-size: var(--fs-sektion);
  /* Eine Stufe unter dem Seitentitel, wie alle Sektionstitel seit dem
     31.08.2026. Diese Regel ueberschreibt das Bauteil und musste deshalb
     einzeln nachgezogen werden - sonst waere dieser eine Titel bei 48 px
     stehen geblieben, waehrend alle anderen auf 38 gehen. */
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--toem-blau);
  margin: 0 0 var(--sp-7);
}

/* Panelinhalt: links der Ansprechweg, rechts das Formular. 0,85 zu 1,15 -
   das Formular traegt sechs Felder, der Kontaktblock vier Zeilen. */
.kziel__panelinhalt {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: start;
  padding-top: var(--sp-5);
}
@media (max-width: 56rem) {
  .kziel__panelinhalt { grid-template-columns: 1fr; }
  /* Sobald das Formular unter die Kontaktkarte rutscht, nimmt es die ganze
     Containerbreite. Der 34rem-Deckel aus components/formular.css gilt fuer
     ein Formular NEBEN etwas anderem - allein in der Spalte stehend wirkt er
     wie ein abgeschnittener Block, mit viel leerer Flaeche rechts daneben.
     Wunsch vom 28.08.2026. */
  .kziel__panelinhalt .form { max-width: none; }
}

/* Der Ansprechweg als weisse Karte. Kein Goldband links, Entscheidung vom
   28.08.2026 - generell keine linksseitige Outline. Damit ist auch das
   Polster wieder rundum gleich; die zusaetzliche Breite links war nur der
   Platz fuer den Streifen. */
.kziel__weg {
  padding: var(--sp-5);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}
.kziel__rolle {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--sp-3);
}
.kziel__wer {
  font-size: var(--fs-300);
  font-weight: 700;
  color: var(--toem-blau);
  margin: 0 0 var(--sp-4);
}
/* ANSPRECHPARTNER, seit dem 29.09.2026 auf der Seite Kontakt pflegbar, eine
   Person je Zeile. Im Entwurf leer - dann blendet :empty die Zeile aus, und
   der Kasten bleibt, wie er abgenommen ist. Naeher an der Abteilung als an
   der Liste darunter: die Namen gehoeren zu ihr. */
.kziel__ansprech {
  margin: calc(var(--sp-2) - var(--sp-4)) 0 var(--sp-4);
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.kziel__ansprech:empty { display: none; }
.kziel__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
/* "Tel.:" und "Mail:" vor der Angabe, Wunsch vom 28.08.2026. In der Karte
   steht keine Beschriftung darueber, ohne das Praefix waeren es zwei Zeilen
   ohne Zuordnung. Ausgeschrieben im Text und nicht als Pseudo, damit es
   mitgelesen und mitkopiert wird.
   align-items: baseline, damit Praefix und Nummer auf einer Linie sitzen -
   der Link ist hoeher, weil er seine Trefferflaeche traegt. */
.kziel__liste li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.kziel__vor {
  flex: none;
  /* Feste Breite, damit Nummer und Adresse untereinander an derselben Kante
     beginnen. "Mail:" ist breiter als "Tel.:". */
  min-width: 2.75rem;
  color: var(--text-muted);
}
.kziel__liste a,
.kziel__liste span {
  font-size: var(--fs-200);
  color: var(--text-body);
}
.kziel__liste a {
  /* HIER STAND EINE FALSCHE BEGRUENDUNG, richtiggestellt am 10.09.2026:
     "2,5rem statt 2,75: die Zeile steht in einer Liste mit Abstand darum, die
     tatsaechliche Trefferflaeche ist damit groesser als der Kasten."
     NACHGEMESSEN, UND ES STIMMT NICHT. Mit elementFromPoint geprueft: die
     Mitte des Links trifft den Link, aber schon 1 px unter seiner Unterkante
     trifft .kziel__liste - der Abstand um die Zeile ist kein Teil der
     Trefferflaeche. Ein Rand vergroessert die gefuehlte Nachbarschaft, nicht
     das anklickbare Rechteck; das ist genau der Kasten.
     Der Wert bleibt hier bei 2,5rem, weil er die Gestaltung traegt. Auf
     Touchbreiten hebt ihn der Block am Dateiende auf 2,75rem - dort zaehlt
     die Trefferflaeche mehr als die Zeilenhoehe. */
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  font-weight: 500;
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
.kziel__liste a:hover,
.kziel__liste a:focus-visible { color: var(--toem-gold); }
.kziel__wann {
  font-size: var(--fs-100);
  color: var(--text-muted);
  margin: var(--sp-4) 0 0;
}

/* Die Panelueberschrift traegt die Tableiste, sobald das Skript laeuft.
   Ohne Skript steht sie als <h3> da und braucht dann Gewicht - die
   Komponente gibt ihr nur Versalien in Gold. */
.ptabs:not(.ptabs--an) .kziel__panel .ptabs__label {
  font-size: var(--fs-300);
  letter-spacing: var(--ls-tight);
  text-transform: none;
  color: var(--toem-blau);
}

/* --- Anschrift und Anfahrt ---------------------------------------------- */
/* Letzte Sektion. Die Anschrift stand vorher nur im Footer, im Kleingedruckten
   unter allem - auf einer Kontaktseite gehoert sie in den Inhalt.
   Weisse Bahn: darueber liegt die graue Zielgruppenbahn, darunter der blaue
   Footer. Damit bleibt der Rhythmus grau, weiss, blau. */
.kadr {
  background: var(--bg-page);
  padding-block: var(--sp-sektion);
}
/* Anschrift links, Karte rechts. 0,8 zu 1,2 - die Karte braucht Flaeche, um
   als Orientierung zu taugen, die Anschrift sind fuenf Zeilen. */
.kadr__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  /* center, nicht start: die Karte ist 494 px hoch, die Anschrift 240 - oben
     ausgerichtet blieben 254 px Leere unter der Anschrift und der Block sah
     abgebrochen aus. Zentriert verteilt sich der Raum auf beide Seiten und
     liest sich als Absicht.
     Im Gegensatz zu .kziel__panelinhalt, wo oben ausgerichtet richtig ist -
     dort stehen zwei Bloecke, die beide oben beginnen sollen. */
  align-items: center;
}
@media (max-width: 56rem) {
  .kadr__grid { grid-template-columns: 1fr; }
}

/* <address> ist das richtige Element fuer eine Postanschrift. Der Browser
   kippt es kursiv, das wird hier zurueckgenommen. */
.kadr__adresse {
  font-style: normal;
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0 0 var(--sp-6);
}
.kadr__firma {
  display: block;
  font-weight: 700;
  color: var(--toem-blau);
  margin-bottom: var(--sp-2);
}
.kadr__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.kadr__liste li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-200);
}
/* Feste Breite wie in den Zielgruppenkarten, damit die Angaben untereinander
   an derselben Kante beginnen. "Mail:" ist das breiteste Praefix. */
.kadr__vor {
  flex: none;
  min-width: 2.75rem;
  color: var(--text-muted);
}
.kadr__liste a {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
.kadr__liste a:hover,
.kadr__liste a:focus-visible { color: var(--toem-gold); }

/* --- Statische Karte ---------------------------------------------------- */
/* STATISCH und selbst gehostet, kein Karten-Embed. Ein Google-Maps-iframe
   laedt einen Drittanbieter und braucht eine Einwilligung - dann stuende ein
   Klickbalken mitten auf der Kontaktseite. Das Bild kommt aus
   OpenStreetMap-Kacheln, die Namensnennung steht darunter und ist Pflicht. */
.kadr__karte {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-platzhalter);
  box-shadow: var(--shadow-karte);
  transition: box-shadow var(--dur-hover) var(--ease-hover),
              transform var(--dur-hover) var(--ease-hover);
}
/* Hebt jetzt mit, wie alle anderen Karten, die ein Link sind - vorher kam nur
   der Schatten. Gemeldet am 28.08.2026 beim Vereinheitlichen der Hover. */
.kadr__karte:hover,
.kadr__karte:focus-visible {
  box-shadow: var(--shadow-2);
  transform: translateY(var(--lift));
}
.kadr__karte img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Die Marke sitzt NICHT im Bild, sondern als Element darueber: sie bleibt
   dadurch scharf, traegt Markengold und laesst sich aendern, ohne die Kachel
   neu zu bauen. Der Zuschnitt ist so gerechnet, dass die Adresse genau in der
   Bildmitte liegt - deshalb 50 % / 50 %.
   Weisser Ring aussen, damit sie auf hellen und dunklen Kartenflaechen
   gleich gut steht. */
.kadr__marke {
  position: absolute;
  top: 50%; left: 50%;
  width: 1.25rem; height: 1.25rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--toem-gold);
  border: 3px solid var(--surface);
  box-shadow: 0 2px 8px rgba(29, 29, 27, 0.35);
}
/* Der Puls ist Zierde und faellt bei prefers-reduced-motion weg. */
.kadr__marke::after {
  content: "";
  position: absolute;
  inset: -0.5rem;
  border-radius: 50%;
  border: 2px solid var(--toem-gold);
  opacity: 0.45;
}
.kadr__hinweis {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-100);
  color: var(--text-muted);
}
/* Keine Unterstriche, siehe Projektregel. Bei 13 px traegt die Farbe allein
   zu wenig, deshalb zusaetzlich Gewicht 600. */
.kadr__hinweis a {
  font-weight: 600;
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
.kadr__hinweis a:hover,
.kadr__hinweis a:focus-visible { color: var(--toem-gold); }

/* --- Kontaktlinks im Inhalt: 44 px auf Touchbreiten --------------------
   Kundenauftrag vom 10.09.2026 ("Die CTAs auch nachziehen!"). Gemessen waren
   Telefon und E-Mail in beiden Listen 40 px hoch (min-height: 2.5rem).

   DIESER BLOCK STEHT AM DATEIENDE, nicht in components/knopf.css. Dort liegt
   die gemeinsame Regel fuer die uebrigen achtzehn Text-CTAs, aber
   pages/kontakt.css laedt SPAETER - die 2,5rem oben haetten gewonnen. Gleiche
   Spezifitaet, die spaetere Regel entscheidet. Dieselbe Falle wie Nummer 17
   in theme-notizen.md, hier von Anfang an einkalkuliert. */
@media (max-width: 64rem) {
  .kziel__liste a,
  .kadr__liste a { min-height: 2.75rem; }
}