/* ==========================================================================
   Utility-Seiten — Abschnitt 11 des Canvas
   Quelle: roesterei/seiten-utility.jsx (Desktop 1440) und
   roesterei/seiten-utility-mobile.jsx (Mobile 390)

   Gemeinsames Blatt für 11a 404, 11b Suchergebnisse und
   11c Bestätigungsseiten. Die drei teilen Kopfaufbau, Kartenraster und
   Suchkasten; was nur eine Seite braucht, steht in ihrem eigenen
   Abschnitt weiter unten.

   Die Fußzeile der Artboards trägt eine dritte Adressvariante
   („Isartalstraße 1") und wieder hallo@servus-gelting.de. Beides ist
   falsch, siehe ADRESSE in CLAUDE.md — es gilt der geprüfte Fuß.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Bänder

   Fehlte bis zum 11.09.2026: Jede Inhaltsseite definiert .band--dunkel
   in ihrem eigenen Stilblatt, dieses hier tat es nicht. Der Kopf der 404
   lag dadurch ohne Espresso-Fläche auf dem hellen Grund — Cream auf
   Cream, die Überschrift praktisch unsichtbar. Der Abgleich misst Maße,
   keine Farben; aufgefallen ist es erst beim Bau der Suche, die dasselbe
   Blatt nutzt.
   -------------------------------------------------------------------------- */

.band--dunkel {
  background: var(--espresso);
  color: var(--cream);
}


/* --------------------------------------------------------------------------
   1. Seitenkopf mit Wasserzeichen — 404 und Bestätigung teilen ihn
   -------------------------------------------------------------------------- */

.u-kopf {
  position: relative;
  padding-block: 96px 104px;
  overflow: hidden;
}

/* Das Wasserzeichen hängt oben rechts über der Kante. Es steht absolut,
   damit es keine Höhe beansprucht — der Textblock allein bestimmt sie. */
.u-kopf__mark {
  position: absolute;
  top: -24px;
  right: -56px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 400px;
  line-height: .78;
  color: var(--world);
  pointer-events: none;
}

.u-kopf__inhalt {
  position: relative;
  max-width: 660px;
}

.u-kopf__ey {
  display: block;
  font-size: 11.5px;
  letter-spacing: .22em;
  color: var(--tan);
}

.u-kopf__titel {
  margin-top: 30px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 82px;
  line-height: .98;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--cream);
}

.u-kopf__vorspann {
  max-width: 560px;
  margin-top: 26px;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(246, 238, 223, .78);
}

.u-kopf__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* Zweiter Knopf: nur Kontur in der hellen Hairline */
.u-knopf-kontur {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border: 1.5px solid rgba(246, 238, 223, .2);
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
}
.u-knopf-kontur:hover { border-color: rgba(246, 238, 223, .6); }

.u-kopf__spur {
  margin-top: 38px;
  padding-top: 16px;
  border-top: 1px solid rgba(246, 238, 223, .2);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: rgba(246, 238, 223, .5);
}


/* --------------------------------------------------------------------------
   2. Wegweiser — die sechs Hauptwege als Kartenraster
   -------------------------------------------------------------------------- */

.u-wege { padding-block: 72px 40px; }

.u-wege .eyebrow { display: block; margin-bottom: 26px; }

.u-wege__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.weg {
  display: block;
  padding: 22px 24px 24px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--flaeche-karte);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.weg:hover { border-color: var(--espresso); }

.weg__pfad {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-brown);
}

.weg__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.weg__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--espresso);
}

.weg__text {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted-brown);
}


/* --------------------------------------------------------------------------
   3. Suchkasten
   -------------------------------------------------------------------------- */

.u-suche { padding-block: 32px 88px; }

.u-suchkasten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 56px;
  padding: 40px 44px 44px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--bg-alt);
}

.u-suchkasten__titel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.02;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--espresso);
}

/* Beschriftung und Feld in einer Zeile, darunter der Strich */
.u-suchfeld {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 26px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--linie);
}

.u-suchfeld__label {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-brown);
}

.u-suchfeld input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--espresso);
}
.u-suchfeld input::placeholder { color: var(--muted-brown); opacity: 1; }
.u-suchfeld input:focus { outline: none; }
.u-suchfeld:focus-within { border-bottom-color: var(--espresso); }


/* --------------------------------------------------------------------------
   4. Bestätigungsseiten — 11c, „Ein Template · sechs Fälle"

   Der Kopf ist derselbe wie auf der 404, nur mit anderen Maßen: Das
   Wasserzeichen „Servus" hängt unten rechts statt oben, die Überschrift
   ist kleiner (78 statt 82px), und über ihr steht eine Zeile aus Rubrik
   und Pfad.

   Den Streifen mit den sechs Pillen aus dem Artboard gibt es nicht — er
   ist im Canvas als „Variantenschalter — Prototyp-Hilfe, nicht Teil der
   Seite" ausgewiesen, wie der Umschalter „Leerzustand zeigen" auf der
   Suche. Jeder Fall ist bei uns eine eigene Seite.
   -------------------------------------------------------------------------- */

.u-kopf--danke { padding-block: 80px 88px; }

/* Unten rechts statt oben rechts — und kleiner als die 404, deren
   Wasserzeichen aus drei Ziffern besteht. */
.u-kopf--danke .u-kopf__mark {
  top: auto;
  right: -40px;
  bottom: -96px;
  font-size: 300px;
  line-height: .8;
  color: rgba(217, 166, 120, .16);
}

.u-kopf--danke .u-kopf__inhalt { max-width: 720px; }

/* Rubrik links, Pfad rechts, Haarlinie darunter */
.danke-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(246, 238, 223, .2);
}

.danke-pfad {
  font-size: 11.5px;
  letter-spacing: .14em;
  color: rgba(246, 238, 223, .55);
}

.u-kopf--danke .u-kopf__titel { margin-top: 34px; font-size: 78px; line-height: 1; }
.u-kopf--danke .u-kopf__vorspann { margin-top: 24px; max-width: 600px; }


/* --- Ablauf und Angaben ---------------------------------------------------
   Am Desktop nebeneinander: die Schritte laufen mit, die Karte hat ihre
   feste Breite aus dem Entwurf. */

.danke-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 96px;
  align-items: start;
  padding-block: 72px 88px;
}

.danke-ablauf .eyebrow { display: block; margin-bottom: 24px; }

.danke-schritte {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie);
}

.danke-schritt {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--linie);
}

.danke-nr {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  color: var(--amber);
}

.danke-schritt__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--espresso);
}

.danke-karte {
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 28px 30px 30px;
}

.danke-karte__titel {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-brown);
}

.danke-angaben {
  margin: 14px 0 0;
  border-top: 1px solid var(--linie);
}

.danke-angabe {
  padding: 14px 0;
  border-bottom: 1px solid var(--linie);
}

.danke-angabe__label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-brown);
}

.danke-angabe__wert {
  margin: 5px 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--espresso);
}

.danke-kontakt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 11.5px;
  color: var(--muted-brown);
}
.danke-kontakt--ort { margin-top: 8px; }
.danke-kontakt__zeichen { flex-shrink: 0; color: var(--amber); }
.danke-kontakt a { border-bottom: 1px solid transparent; }
.danke-kontakt a:hover { border-bottom-color: currentColor; }


/* --------------------------------------------------------------------------
   5. Umbruch bis 1200px
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .u-kopf__mark { font-size: clamp(200px, 28vw, 400px); }
  .u-kopf__titel { font-size: clamp(48px, 6vw, 82px); }
  .u-wege__raster { grid-template-columns: repeat(2, 1fr); }
  .u-suchkasten { grid-template-columns: 1fr; gap: 28px; }

  /* Die Danke-Seiten starten kleiner und schrumpfen im selben Verhältnis:
     300px sind 21vw von 1440, 78px sind 5.4vw. */
  .u-kopf--danke .u-kopf__mark { font-size: clamp(150px, 21vw, 300px); }
  .u-kopf--danke .u-kopf__titel { font-size: clamp(44px, 5.4vw, 78px); }
}

@media (max-width: 900px) {
  .u-wege__raster { grid-template-columns: 1fr; }
  .u-kopf__knoepfe .btn,
  .u-knopf-kontur { justify-content: center; }

  /* Unter 900px bleibt neben der 420px-Karte zu wenig für die Schritte:
     bei 900 wären es 192px. Also untereinander. */
  .danke-details { grid-template-columns: 1fr; gap: 40px; }
}


/* --------------------------------------------------------------------------
   Mobil — Artboard „11a · 404-Fehlerseite — Mobile 390"
   Gemessen gegen die eigenständige Artboard-Ausgabe des Kunden
   (_referenz/404-mobile.html), geprüft mit _abgleich.html.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  .u-kopf, .u-wege, .u-suche { padding-inline: 24px; }

  /* --- Kopf -------------------------------------------------------------- */
  .u-kopf { padding-block: 30px 36px; }

  /* Das Wasserzeichen rutscht in die obere rechte Ecke und schrumpft
     auf ein Drittel; der Text beginnt darunter. */
  .u-kopf__mark { top: 20px; right: -30px; font-size: 150px; line-height: .78; }

  .u-kopf__inhalt { max-width: none; }
  .u-kopf__ey { font-size: 10px; line-height: 1.9; letter-spacing: .2em; }

  .u-kopf__titel {
    margin-top: 96px;
    font-size: 38px;
    line-height: 1;
    letter-spacing: .01em;
  }

  .u-kopf__vorspann { max-width: none; margin-top: 16px; font-size: 15px; line-height: 1.6; }

  .u-kopf__knoepfe { flex-direction: column; flex-wrap: nowrap; gap: 10px; margin-top: 26px; }
  .u-kopf__knoepfe .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 15px 26px;
    font-size: 13px;
    letter-spacing: .1em;
    border-radius: 8px;
  }
  .u-knopf-kontur {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 15px 26px;
    font-size: 13px;
    letter-spacing: .1em;
    border-radius: 8px;
  }

  .u-kopf__spur { margin-top: 28px; padding-top: 14px; font-size: 10.5px; line-height: 1.9; }

  /* --- Bestätigungsseiten ---------------------------------------------------
     Artboard „11c · Bestätigungsseiten — Mobile 390". Drei Unterschiede
     zum Desktop, alle aus der Vorlage:

     1. Der Pfad steht nicht mehr neben der Rubrik, sondern unter den
        Knöpfen, mit Linie darüber. Dafür wird die Zeile aufgelöst
        (display: contents) und die Kinder werden sortiert — dasselbe
        Mittel wie auf B2B und den Rechtsseiten.
     2. Die Angaben-Karte steht vor dem Ablauf, nicht daneben.
     3. Die Ortszeile in der Karte fällt weg; es bleibt die E-Mail. */

  .danke-details { padding-inline: 24px; }

  .u-kopf--danke { padding-block: 28px 34px; }
  .u-kopf--danke .u-kopf__mark {
    top: auto;
    right: -24px;
    bottom: -38px;
    font-size: 130px;
    color: rgba(217, 166, 120, .14);
  }

  .u-kopf--danke .u-kopf__inhalt { display: flex; flex-direction: column; }
  .danke-zeile { display: contents; }

  .u-kopf--danke .u-kopf__ey { order: 1; }
  .u-kopf--danke .u-kopf__titel {
    order: 2;
    margin-top: 14px;
    font-size: 38px;
    line-height: 1.02;
    letter-spacing: .01em;
  }
  .u-kopf--danke .u-kopf__vorspann { order: 3; margin-top: 14px; }
  .u-kopf--danke .u-kopf__knoepfe { order: 4; margin-top: 24px; }

  .danke-pfad {
    order: 5;
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid rgba(246, 238, 223, .2);
    font-size: 10px;
    line-height: 1.9;
    letter-spacing: .12em;
    color: rgba(246, 238, 223, .5);
  }

  /* Karte zuerst, Ablauf darunter. Die 30px zwischen beiden sind der
     Abstand, den das Artboard als Innenabstand des Ablaufs führt. */
  .danke-details { padding-block: 28px 40px; gap: 30px; }
  .danke-karte { order: 1; padding: 22px 20px 24px; }
  .danke-ablauf { order: 2; }

  .danke-karte__titel { font-size: 10px; }
  .danke-angaben { margin-top: 12px; }
  .danke-angabe { padding: 12px 0; }
  .danke-angabe__label { font-size: 9.5px; }
  .danke-angabe__wert { margin-top: 4px; font-size: 15.5px; }

  .danke-kontakt { margin-top: 16px; gap: 9px; font-size: 11px; }
  .danke-kontakt__zeichen { width: 15px; height: 15px; }
  .danke-kontakt--ort { display: none; }

  .danke-ablauf .eyebrow { margin-bottom: 16px; font-size: 10.5px; letter-spacing: .26em; }
  .danke-schritt { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .danke-nr { font-size: 19px; line-height: 1.1; }
  .danke-schritt__text { font-size: 14.5px; line-height: 1.65; }

  /* --- Wegweiser ------------------------------------------------------------
     Auf dem Telefon keine Karten, sondern eine Liste mit Trennlinien.
     Der Teaser entfällt — das Artboard zeigt nur Name und Pfad. */
  .u-wege { padding-block: 32px 36px; }
  .u-wege .eyebrow { margin-bottom: 18px; font-size: 10.5px; letter-spacing: .26em; }

  .u-wege__raster {
    display: block;
    border-top: 1px solid var(--linie);
  }

  .weg {
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--linie);
    border-radius: 0;
    background: none;
  }

  .weg__zeile { margin-top: 0; }
  .weg__name { font-size: 19px; line-height: 1.1; letter-spacing: normal; }
  .weg__pfad { order: 2; }
  .weg__text { display: none; }

  /* Name oben, Pfad darunter — im Aufbau steht der Pfad zuerst. */
  .weg { display: flex; flex-direction: column; }
  .weg__zeile { order: 1; }
  .weg__pfad { order: 2; margin-top: 6px; font-size: 10px; line-height: 1.9; }

  /* --- Suchkasten ------------------------------------------------------------ */
  .u-suche { padding-block: 0 40px; }

  .u-suchkasten {
    display: block;
    gap: 0;
    padding: 24px 22px 26px;
    border-radius: 12px;
  }

  .u-suchkasten__titel { font-size: 24px; line-height: 1.04; letter-spacing: .01em; }

  .u-suchfeld {
    display: block;
    margin-top: 18px;
    padding-bottom: 10px;
    border-bottom-width: 1px;
  }
  .u-suchfeld__label { display: block; font-size: 10px; line-height: 1.9; }
  .u-suchfeld input { width: 100%; margin-top: 6px; font-size: 16px; font-weight: 400; }

  .u-suchkasten .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 18px;
    padding: 15px 26px;
    font-size: 13px;
    letter-spacing: .1em;
    border-radius: 8px;
  }
}