/* ============================================================================
   NormHow — Kontaktseite
   ----------------------------------------------------------------------------
   Fassung vom 17.08.2026. Die vorherige Seite fuehrte ueber einen eigenen
   Abschnitt mit sechs Themenkacheln zum Formular; gemessen lag das Formular
   auf dem Handy erst nach 4750 px, also nach 5,6 Bildschirmen. Jetzt steht es
   sofort da, das Thema ist ein Feld darin, und Torstens Denkanstoesse stehen
   am Nachrichtenfeld statt zwei Bildschirme davor.

     Seitenhoehe Handy   9974 -> 5471 px
     Formular beginnt    4750 ->  566 px

   Die Regeln der alten Fassung fuer Themenkacheln, Antwortkarte, Ablauf-,
   Regions- und Datenschutzabschnitt sind damit entfallen. Was blieb, steht
   im ersten Teil: Portrait und Formularkarte. Der zweite Teil ab
   "Einstieg und Formular" gehoert zum neuen Aufbau.
   ========================================================================= */


/* ── Portrait und Formularkarte ───────────────────────────────────────────── */

.contact-portrait{
  position:relative;
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-top:6px solid var(--gold);
  border-radius:32px 32px 18px 18px;
  background:#1c1e21;
  box-shadow:0 34px 85px rgba(0,0,0,.31);
}

.portrait-media{
  height:500px;
  overflow:hidden;
}

.contact-portrait img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 26%;
  filter:saturate(.88) contrast(1.02);
  transition:transform .7s ease,filter .4s ease;
}

.contact-portrait:hover img{
  transform:scale(1.02);
  filter:saturate(.96) contrast(1.02);
}

.contact-portrait figcaption{
  display:grid;
  gap:3px;
  min-height:104px;
  padding:18px 24px 22px;
  border-top:1px solid var(--line);
}

.contact-portrait figcaption span{
  color:var(--gold);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.contact-portrait figcaption strong{
  margin-top:4px;
  color:var(--warm);
  font:600 1.05rem Sora,Inter,sans-serif;
}

.contact-portrait figcaption small{
  color:#858984;
}



/* Die Marke sass oben rechts und lag damit ueber dem NormHow-Schriftzug an
   der Wand — das Logo im Bild ist das Beste am Motiv und darf nicht verdeckt
   werden. Gemessen liegt der Schriftzug zwischen 15 und 21 Prozent der
   Bildhoehe und reicht bis 72 Prozent der Breite.

   Sie stand danach auf halber Hoehe und damit dicht am Kopf. Jetzt steht sie
   ganz unten links, auf einer Linie mit der Kennzeichnung "AI modified" unten
   rechts im Motiv. Die Angabe in Prozent bezieht sich auf .portrait-media,
   nicht auf die ganze Figur — sonst wuerde die Bildunterschrift die Rechnung
   verschieben. Deshalb steht die Marke im HTML innerhalb der Bildflaeche.

   Unten ist weniger freie Wand als auf halber Hoehe; gemessen reicht sie nur
   bis rund 25 Prozent der Breite:

       70 % Hoehe -> bis 28,7 %      90 % -> bis 25,4 %
       80 %       -> bis 27,3 %      96 % -> bis 24,6 %

   Zwei Zeilen brauchen mehr. Die Marke ragt deshalb ein Stueck ueber den
   Jackenrand — dort steht dunkler Stoff ohne Detail, kein Gesicht und kein
   Logo. Das war der Grund fuer die Verlegung, und er bleibt gewahrt. */
.portrait-media{position:relative}

.portrait-status{
  position:absolute;
  left:5%;
  bottom:5%;
  max-width:min(196px,68%);
  padding:11px 14px;
  border:1px solid rgba(235,236,232,.15);
  border-radius:13px;
  background:rgba(18,19,21,.84);
  color:#b8bbb6;
  font-size:11px;
  line-height:1.6;
  backdrop-filter:blur(12px);
}

.portrait-status i{
  /* Schwebend statt in der Zeile: In der schmalen Marke wuerde der Punkt
     sonst die erste Zeile so verkuerzen, dass "Persoenliche" nicht mehr
     danebenpasst und allein auf einer Zeile steht. */
  float:left;
  width:7px;
  height:7px;
  margin:.44em 7px 0 0;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 5px rgba(95,168,160,.14);
}

.mail-card{
  overflow:hidden;
  border:1px solid #d8d5cd;
  border-top:6px solid var(--gold);
  border-radius:28px 28px 18px 18px;
  background:var(--warm);
  color:var(--ink);
  box-shadow:0 35px 80px rgba(0,0,0,.25);
}

.mail-card>header{
  display:flex;
  justify-content:space-between;
  padding:26px 32px;
  border-bottom:1px solid #d7d4cc;
}

.mail-card>header span,
.mail-card>header b{
  color:#8b6a31;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.mail-card form{
  display:grid;
  gap:22px;
  padding:34px 32px 38px;
}

.field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.mail-card label{
  display:grid;
  gap:7px;
}

.mail-card label>span{
  color:#565a59;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
}

.mail-card label b{
  color:#9d722a;
}

.mail-card label small{
  color:#898d8b;
  font-weight:400;
}

.mail-card input,
.mail-card select,
.mail-card textarea{
  width:100%;
  border:1px solid #c9c6bd;
  border-radius:10px;
  outline:0;
  background:#fff;
  color:var(--ink);
  font:inherit;
  transition:border-color .2s,box-shadow .2s;
}

.mail-card input,
.mail-card select{
  min-height:49px;
  padding:10px 13px;
}

.mail-card textarea{
  min-height:150px;
  padding:13px;
  resize:vertical;
}

.mail-card input:focus,
.mail-card select:focus,
.mail-card textarea:focus{
  border-color:#a87b2e;
  box-shadow:0 0 0 3px rgba(198,154,66,.17);
}

.mail-card textarea::placeholder{
  color:#919590;
}

.privacy-note{
  margin:0;
  padding:16px;
  border-radius:10px;
  background:#e4e3dd;
  color:#666a68;
  font-size:11px;
}

.privacy-note a{
  color:#775722;
  font-weight:700;
}

.mail-button{
  justify-self:start;
  border:0;
}

.form-status{
  min-height:20px;
  margin:7px 0 0;
  color:var(--teal);
  font-size:11px;
}

@media(max-width:1120px){
  .contact-portrait{
  width:min(100%,760px);
  }
}

@media(max-width:640px){
  .portrait-media{
  height:430px;
  }
  .mail-card form,
  .mail-card>header{
  padding-left:24px;
  padding-right:24px;
  }
}



/* Honigtopf des Kontaktformulars, 16.08.2026.
   Nicht mit display:none ausblenden — manche Automaten erkennen das und
   lassen das Feld dann leer. Stattdessen aus dem Sichtfeld schieben. Fuer
   Screenreader ist der umgebende Block mit aria-hidden ausgenommen, per
   Tabulator ist das Feld ueber tabindex="-1" nicht erreichbar. */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* ── Einstieg und Formular ────────────────────────────────────────────────── */

.kt-oben{
  padding:48px 0 60px;
  background:radial-gradient(circle at 78% 22%,rgba(198,154,66,.11),transparent 34%),var(--dark);
}

.kt-oben__raster{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:30px 70px;
  align-items:stretch;
}

/* Beide Spalten enden auf derselben Linie: Das Portrait waechst in die
   Hoehe, die die Formularkarte vorgibt. Deshalb Flex statt Fluss — nur so
   gibt es einen Rest, den das Bild fuellen kann. */
.kt-einstieg{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.kt-einstieg>*{min-width:0}
.kt-einstieg h1{
  margin:0 0 18px;
  font-size:clamp(2.3rem,5vw,4rem);
  line-height:1.03;
  letter-spacing:-.055em;
}

/* ── Portraet im Einstieg ─────────────────────────────────────────────────
   Steht direkt unter dem Vorspann, nicht mehr unten rechts als Beiwerk. Die
   Marke "Persoenliche Rueckmeldung" liegt dabei im Bild selbst — dieselbe
   Loesung wie auf kontakt.html, die Regeln dafuer kommen aus kontakt.css.

   Zwei Anpassungen sind noetig: Die Hoehe von .portrait-media ist dort auf
   500 px festgenagelt; hier soll das Bild seinem Verhaeltnis folgen, damit
   die Marke im Bild an ihrer gemessenen Stelle bleibt. Und die Breite wird
   begrenzt, sonst fuellt das Portraet die halbe Spalte und schiebt die
   Eckdaten aus dem ersten Bildschirm. */

.kt-portrait{
  display:flex;
  flex-direction:column;
  flex:1;
  /* Die Breite ist nach oben begrenzt, nicht nach Gefuehl gewaehlt: Die
     Hoehe gibt die Kachel daneben vor, die Breite bestimmt damit, wie viel
     oben wegfaellt. Die Oberkante des Logos im Motiv liegt bei 15,05 Prozent
     der Bildhoehe — ab etwa 413 px Breite schneidet der Rahmen hinein.
     Seit der Vorspann entfallen ist, steht dem Bild 558 statt 470 px Hoehe
     zur Verfuegung; deshalb 408 statt 344 px Breite. */
  width:min(100%,408px);
  min-height:0;
  margin:34px 0 0;
}

.kt-portrait .portrait-media{
  flex:1 1 0;
  min-height:300px;
  height:auto;
}

/* technik.css gibt dem Bild ein festes Verhaeltnis von 5/7. Hier bestimmt
   die Nachbarspalte die Hoehe, deshalb faellt das Verhaeltnis weg und der
   Ausschnitt wandert nach oben — unten bleibt die Kennzeichnung stehen,
   und mit ihr die Marke daneben. */
/* Absolut gesetzt, damit das Bild seine eigene Hoehe nicht mehr in die
   Rechnung einbringt. Sonst bestimmt es die Spaltenhoehe selbst und die
   Ausrichtung an der Kachel geht verloren. */
/* Knapperer Fuss als auf kontakt.html: Jede Zeile, die er weniger braucht,
   bekommt das Bild dazu — die Gesamthoehe gibt die Kachel daneben vor. */
.kt-portrait figcaption{
  min-height:0;
  padding:15px 20px 17px;
}

.kt-portrait picture{
  position:absolute;
  inset:0;
  display:block;
}

/* Doppelt qualifiziert, damit die Regel gegen technik.css gewinnt: dort
   traegt .contact-portrait img ein festes Verhaeltnis von 5/7. Ohne den
   hoeheren Vorrang bleibt das Bild 693 statt 474 Pixel hoch, ragt unten
   aus dem Rahmen — und die Kennzeichnung "AI modified" faellt weg. */
.kt-portrait picture img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center bottom;
}

/* ── Eckdaten unter beiden Spalten ────────────────────────────────────────
   Vorher untereinander in der linken Spalte, 283 px hoch. Als Reihe unter
   dem Formular sind es 90 px. */

.kt-eckdaten{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px 46px;
  align-items:center;
  grid-column:1/-1;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.kt-fakten{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2px 34px;
  margin:0;
  padding:0;
  list-style:none;
}
.kt-fakten li{
  display:grid;
  gap:2px;
  min-width:0;
}
.kt-fakten strong{color:var(--warm);font-size:.98rem}
.kt-fakten span{color:#858985;font-size:12px}

.kt-direkt{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 18px;
}
.kt-direkt p{margin:0;color:#858985;font-size:13px}
.kt-direkt strong{color:var(--warm);font-weight:600}
.kt-direkt a{color:var(--gold);font-size:.98rem}

/* Die Kachel ist gegenueber der bestehenden Seite etwas flacher: Das
   Nachrichtenfeld hat fuenf statt sieben Zeilen, Abstaende und Innenrand
   sind knapper. Das schafft den Platz, damit die Eckdaten darunter auf
   einem grossen Monitor noch mit ins Bild kommen. */
.kt-karte>header{padding:20px 30px}
.kt-karte form{gap:18px;padding:28px 30px 32px}

/* Die Karte darf nicht kleben — sonst wandert sie beim Scrollen mit und
   verdeckt auf mittelgroßen Fenstern den Text daneben. */
.kt-karte{margin:0}


/* ── Denkanstöße am Nachrichtenfeld ───────────────────────────────────────── */

.kt-hinweis{
  margin:-6px 0 0;
  padding:16px 18px;
  border:1px solid #ddd9d0;
  border-left:3px solid var(--gold);
  border-radius:10px;
  background:#faf8f4;
}
.kt-hinweis small{
  display:block;
  margin-bottom:9px;
  color:#9d722a;
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.kt-hinweis ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.kt-hinweis li{
  position:relative;
  padding-left:18px;
  color:#5c605e;
  font-size:.92rem;
  line-height:1.5;
}
.kt-hinweis li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
}


/* ── Was danach passiert ──────────────────────────────────────────────────── */

.kt-danach{padding:74px 0}
.kt-danach h2{
  margin:0 0 42px;
  font-size:clamp(1.8rem,3.3vw,2.8rem);
  letter-spacing:-.04em;
}
.kt-schritte{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  margin:0;
  padding:0;
  list-style:none;
}
.kt-schritte li{
  display:grid;
  gap:8px;
  min-width:0;
  padding-top:18px;
  border-top:2px solid #d4d0c7;
}
.kt-schritte li:first-child{border-top-color:var(--gold)}
.kt-schritte li:nth-child(2){border-top-color:var(--teal)}
.kt-schritte b{color:#a87b2e;font:600 .82rem Sora;letter-spacing:.1em}
.kt-schritte strong{font-size:1.08rem}
.kt-schritte span{color:#606361;font-size:.95rem;line-height:1.6}


/* ── Region und Vertraulichkeit ───────────────────────────────────────────── */

.kt-unten{padding:76px 0;background:var(--dark)}
.kt-unten__raster{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;
  align-items:start;
}
.kt-kasten{
  min-width:0;
  padding:28px 26px;
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  border-radius:16px;
  background:#1a1c1f;
}
.kt-kasten:nth-of-type(2){border-top-color:var(--teal)}
.kt-kasten h3{margin:14px 0 12px;font-size:1.25rem}
.kt-kasten p{margin:0 0 12px;color:#9da09b;font-size:.95rem;line-height:1.65}
.kt-orte{color:var(--warm)!important;font-weight:500}



/* ── Schmalere Fenster ────────────────────────────────────────────────────── */

@media(max-width:1080px){
  /* Einspaltig gibt es keine Nachbarspalte mehr, an der sich das Bild
     ausrichten koennte — es faellt auf sein Verhaeltnis zurueck. */
  .kt-oben__raster{grid-template-columns:minmax(0,1fr);gap:38px}
  .kt-portrait{flex:none;max-width:420px}
  .kt-portrait .portrait-media{flex:none;min-height:0}
  .kt-portrait picture{position:static}
  .kt-portrait picture img{aspect-ratio:5/7;height:auto}
  .kt-unten__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

@media(max-width:820px){
  .kt-schritte{grid-template-columns:minmax(0,1fr);gap:20px}
}

@media(max-width:700px){
  /* Auf dem Handy zählt jede Zeile bis zum Formular. Die drei Eckdaten und
     der Direktkontakt rutschen deshalb unter das Formular — sie sind
     Beiwerk, das Formular ist der Zweck. */
  .kt-oben{padding:34px 0 52px}
  .kt-oben__raster{gap:26px}
  .kt-einstieg{display:contents}
  .kt-einstieg .eyebrow{order:1}
  .kt-einstieg h1{order:2;margin-bottom:8px}
  .kt-karte{order:4;margin-top:8px}
  /* Auf dem Handy steht das Portraet hinter dem Formular. Direkt unter dem
     Vorspann wuerde es das Formular wieder aus dem ersten Bildschirm
     schieben — genau das, was diese Fassung abstellen soll. */
  /* Genauso breit wie die Kachel darueber: Auf dem Handy stehen beide
     untereinander, und eine schmalere Bildkarte wirkt daneben wie ein
     Zettel statt wie die zweite Haelfte desselben Blocks. */
  .kt-portrait{order:5;flex:none;width:auto;max-width:none;margin:6px 0 0}
  .kt-portrait .portrait-media{flex:none;min-height:0}
  .kt-portrait picture{position:static}
  .kt-portrait picture img{aspect-ratio:5/7;height:auto}
  .kt-eckdaten{order:6;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:6px}
  .kt-fakten{grid-template-columns:minmax(0,1fr);gap:14px}
  .kt-unten__raster{grid-template-columns:minmax(0,1fr)}
  .kt-danach,.kt-unten{padding:56px 0}
}