/* NORDIX — Abschluss am Seitenende (Vergleichsrunde 16)

   Die Seite endete bisher nach dem Einzugsgebiet direkt in der Fußzeile. Wer
   sie ganz liest, kommt unten an und findet nichts mehr — der dritte Aufruf
   aus dem Vier-Teile-Prompt ging verloren, als Sektion 07 wegen der
   Adressangabe entfernt wurde.

   Vier Fassungen, EIN Satz. Verglichen wird die Form, nicht die Formulierung:
   Wenn beides gleichzeitig wechselt, weiß man am Ende nicht, was gewirkt hat.
   Alternative Formulierungen stehen in STAND.md und lassen sich mit jeder der
   vier Formen kombinieren.

     v-zeile    Randloses Band, nur der Satz und der Knopf
     v-sektion  Sektion 07 in der Grammatik der Seite, mit Randspalte
     v-band     Werkstattbild über die volle Breite — Gegenstück zum Videoband
     v-karte    Abgerundete Karte in der Formensprache der Ablauf-Boxen

   Gemeinsam ist allen: derselbe Satz in der Anzeigeschrift, derselbe Knopf wie
   im Hero, dieselbe Rufnummer daneben. */

.abschluss{
  --ab-satz:clamp(30px,4.2vw,62px);
  position:relative;
  border-top:1px solid var(--line);
}

/* Der Satz. Anzeigeschrift, Versalien — dieselbe Familie wie „Weil Technik
   auch menschlich sein soll." und die Ortsliste, nur eine Stufe größer: Es ist
   der letzte Satz der Seite.

   ✅ Runde 19, von Björn gewählt (Fassung w1): weiß mit orangem „deine".
   Vorher war es umgekehrt. Der Unterschied ist größer, als er klingt — in der
   ersten Fassung war der Satz ein Signal und das hervorgehobene Wort eine
   Unterbrechung darin. So herum ist der Satz eine Aussage, und das Orange
   sticht als einziger Punkt heraus: Das Auge landet zuerst auf „deine", also
   auf der Person, die gerade liest. */
.abschluss .satz{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--ab-satz);line-height:1.02;
  letter-spacing:var(--tr-h2);text-transform:uppercase;
  color:var(--ink);max-width:17ch;
}
.abschluss .satz i{font-style:normal;color:var(--orange)}

.abschluss .avor{
  margin-top:22px;color:var(--ink-2);max-width:52ch;
}

.abschluss .awege{
  margin-top:clamp(28px,4vh,44px);
  display:flex;align-items:center;flex-wrap:wrap;
  gap:18px clamp(24px,3vw,44px);
}

/* Rufnummer wie im Hero: kleine graue Ansage, große orange Nummer.
   Bewusst noch eine zweite Fassung derselben Regeln — welche Form gewinnt,
   entscheidet Björn; erst danach wandert die Zeile als gemeinsame Klasse in
   cta.css, statt sie jetzt an zwei Stellen zugleich umzubauen. */
.abschluss .aruf{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 14px}
.abschluss .aruf .vorwort{
  font-size:var(--fs-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--ink-3);
}
.abschluss .aruf a{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(20px,2vw,27px);line-height:1;letter-spacing:.01em;
  color:var(--orange);text-decoration:none;padding-bottom:4px;
  background-image:linear-gradient(var(--orange),var(--orange));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
  transition:background-size .34s cubic-bezier(.2,.7,.3,1),color .25s ease;
}
.abschluss .aruf a:hover,.abschluss .aruf a:focus-visible{
  background-size:100% 2px;color:var(--orange-hell);
}
.abschluss .aruf svg{width:.62em;height:.62em;flex:0 0 auto;opacity:.9}

/* ---------- 1 · Zeile ----------
   Randlos wie das Videoband oben, dunkler als der Rest der Seite, sonst nichts.
   Kein Bild, keine Randspalte, keine Aufzählung: Der Satz steht allein da und
   der Knopf darunter. Die kürzeste mögliche Antwort auf „Wie geht es weiter?" */
.abschluss.v-zeile{
  background:var(--bg-2);
  padding:clamp(64px,11vh,140px) var(--pad);
}
.abschluss.v-zeile .lbl{display:block;margin-bottom:18px;color:var(--orange)}
.abschluss.v-zeile .satz{--ab-satz:clamp(34px,5.4vw,86px);max-width:15ch}

/* ---------- 2 · Sektion 07 ----------
   Dieselbe Grammatik wie 01 bis 06: Nummer und Kurztitel in der Randspalte,
   Inhalt in der Lesespalte. Die Seite endet damit im selben Takt, in dem sie
   gelesen wurde — kein Bruch, aber auch keine Steigerung. */
.abschluss.v-sektion{
  background:var(--bg-2);
  padding:var(--space-section) var(--pad);
}
.abschluss.v-sektion .satz{margin-bottom:0}

/* Die drei Wege als Abschlusszeile: Formular, Telefon, Mail nebeneinander,
   in derselben Bauart wie die Kennzahlen unter der Galerie. */
.abschluss .drei{
  margin-top:clamp(34px,5vh,52px);
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.abschluss .drei > *{padding:20px 0;text-decoration:none;display:block}
.abschluss .drei b{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(17px,1.8vw,22px);text-transform:uppercase;
  color:var(--ink);letter-spacing:.01em;
  transition:color .25s ease;
}
.abschluss .drei a:hover b,.abschluss .drei a:focus-visible b{color:var(--orange)}
.abschluss .drei span{
  display:block;margin-top:7px;
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- 3 · Band ----------
   Gegenstück zum Videoband am Seitenanfang: Oben läuft die Werkstatt, unten
   steht sie still. Das Bild trägt den Satz, der Verlauf hält ihn lesbar —
   ohne ihn steht heller Text auf hellem Metall.

   Die Ecken sind dieselben Winkel wie am Feed. Sie sind hier nicht Deko: Sie
   sagen, dass Anfang und Ende derselben Aufnahme entstammen. */
.abschluss.v-band{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(76px,15vh,180px) var(--pad);
  background:#000;
}
/* Der Anschnitt ist nicht die Bildmitte, sondern etwas darüber.
   Das Band ist gut doppelt so breit wie hoch, die Aufnahme steht im 3:2 —
   bei einem mittigen Schnitt fällt die Kappe oben aus dem Bild und der Kopf
   klebt an der Kante. 36 % holen sie ganz herein und lassen dem Kopf Luft;
   unten bleiben die Hände am Bauteil, worum es ja geht.

   Das Bild ist dunkler und wärmer als die Werkzeugaufnahme davor, deshalb
   trägt es mehr Deckkraft und weniger Entsättigung: Das Lampenlicht auf der
   Werkbank hat fast denselben Ton wie das Markenorange, und das soll man
   sehen. */
.abschluss.v-band img.grund{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:50% 36%;
  opacity:.55;filter:grayscale(.2) contrast(1.04);
}
/* Auf schmalen Schirmen steht der Text über dem Bild statt daneben — dann
   zählt das Gesicht mehr als die Hände. */
@media(max-width:1000px){
  .abschluss.v-band img.grund{object-position:52% 30%}
}
.abschluss.v-band::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,
    var(--bg) 0%,color-mix(in srgb,var(--bg) 82%,transparent) 42%,transparent 88%);
}
.abschluss.v-band .lbl{display:block;margin-bottom:18px;color:var(--orange)}
.abschluss.v-band .satz{--ab-satz:clamp(34px,5vw,78px);max-width:15ch}
.abschluss.v-band .avor{color:var(--ink)}
.abschluss.v-band .corner{position:absolute;width:18px;height:18px;border:1px solid color-mix(in srgb,var(--orange) 80%,transparent)}
.abschluss.v-band .c1{top:14px;left:14px;border-right:0;border-bottom:0}
.abschluss.v-band .c2{top:14px;right:14px;border-left:0;border-bottom:0}
.abschluss.v-band .c3{bottom:14px;left:14px;border-right:0;border-top:0}
.abschluss.v-band .c4{bottom:14px;right:14px;border-left:0;border-top:0}
.abschluss.v-band .tag{
  position:absolute;bottom:16px;right:44px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);
}

/* ---------- 4 · Karte ----------
   Die Formensprache, die beim Ablauf gewonnen hat: abgerundeter Rahmen,
   Verlauf aus der oberen rechten Ecke, deckender Grund. Der Abschluss ist
   damit ein Gegenstand auf der Seite statt eines Bandes darunter — und die
   drei Wege stehen als Zeilen darin, nicht als Reihe darunter. */
.abschluss.v-karte{
  padding:var(--space-section) var(--pad);
  border-top:1px solid var(--line);
}
.abschluss.v-karte .karte-a{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(28px,3.4vw,52px);
  border:1px solid var(--line);border-radius:18px;
  background:var(--panel);
  transition:border-color .35s ease;
}
.abschluss.v-karte .karte-a::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%,
    color-mix(in srgb,var(--orange) 12%,transparent) 0%,transparent 62%);
}
.abschluss.v-karte .satz{--ab-satz:clamp(28px,3.6vw,52px)}
.abschluss.v-karte .drei{
  border-top:1px solid var(--line-2);grid-template-columns:1fr;
}
.abschluss.v-karte .drei > *{
  padding:16px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
}
.abschluss.v-karte .drei > *:last-child{border-bottom:0;padding-bottom:0}
.abschluss.v-karte .drei span{margin-top:0}

@media(max-width:1000px){
  .abschluss.v-sektion .sec{grid-template-columns:1fr}
  .abschluss .drei{grid-template-columns:1fr}
  .abschluss .drei > *{border-bottom:1px solid var(--line);padding:16px 0}
  .abschluss .drei > *:last-child{border-bottom:0}
  .abschluss.v-band::before{
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 70%,transparent) 0%,
      color-mix(in srgb,var(--bg) 88%,transparent) 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  .abschluss .aruf a,.abschluss .drei b,.abschluss.v-karte .karte-a{transition:none}
}