/* ============================================================================
   COFFEE FESTIVAL EUROPE — Abschnitt 07, „Stay close"
   ----------------------------------------------------------------------------
   Der Abschnitt bat um eine Anmeldung und zeigte dabei nichts: eine
   Ueberschrift, drei Striche, sechs Felder. Er sah aus wie ein Formular auf
   einer beliebigen Seite, und genau das war er auch.

   Jetzt steht ein Handfilter daneben — und der ist kein Schmuck. Sein Pegel
   IST der Fortschritt des Formulars:

     Adresse eingetragen   → ein Drittel
     Rolle gewaehlt        → zwei Drittel
     Zustimmung gesetzt    → voll

   Voll heisst abschickbar. Das steht nirgends geschrieben und ist trotzdem zu
   verstehen — eine Anzeige, die man nicht lesen muss.

   Bewegt werden ausschliesslich `transform`, `opacity` und zwei eigene
   Eigenschaften. Kein Filter, kein Schatten in einer Schleife, nichts, was
   den Hauptstrang beschaeftigt. Unter „Bewegung reduzieren" steht alles
   still — der Pegel bleibt, denn er ist Information, keine Bewegung.
   ========================================================================= */

/* ---- Der Platz im Raster --------------------------------------------------
   Vorher: Einleitung 1–5, Formular 6–12. Jetzt bekommt die Bruehe die Spalten
   dazwischen; sie ist schmal und hoch, wie das Geraet selbst. */
/* Die Spaltenzahl steht schon in main.css und wird dort auf schmalen Schirmen
   auf eine einzige gesetzt. Sie hier noch einmal zu nennen, hiesse: die
   Regel fuer das Telefon ueberschreiben, weil dieses Blatt spaeter geladen
   wird — genau so sah es beim ersten Versuch auch aus. */
.news__intro{grid-column:1/span 4}
.brue{grid-column:5/span 2;position:relative;align-self:stretch;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:clamp(300px,34vw,420px);padding-block:clamp(8px,1.4vw,20px)}
.news .form{grid-column:7/span 6}

/* ---- Das Feld dahinter ----------------------------------------------------
   Drei Ringe, sehr leise, mit verschiedenen Umlaufzeiten. Sie geben dem
   Geraet einen Ort, ohne selbst gesehen werden zu wollen. */
.brue__feld{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.brue__ring{position:absolute;border-radius:50%;border:1px solid rgba(244,238,228,.06)}
.brue__ring:nth-child(1){width:78%;aspect-ratio:1}
.brue__ring:nth-child(2){width:104%;aspect-ratio:1;border-color:rgba(226,85,30,.09)}
.brue__ring:nth-child(3){width:132%;aspect-ratio:1;border-color:rgba(244,238,228,.035)}

.brue__svg{position:relative;z-index:1;width:100%;max-width:238px;height:auto;
  overflow:visible;stroke-linecap:round;stroke-linejoin:round}

/* Ein warmer Schein hinter dem Geraet, damit es auf der Flaeche steht statt
   auf ihr zu schweben. Er waechst mit dem Pegel: je voller, desto waermer. */
.brue::before{content:'';position:absolute;left:50%;top:52%;translate:-50% -50%;
  width:78%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(226,85,30,.20),rgba(226,85,30,0) 68%);
  opacity:calc(.25 + var(--fuell,0) * .75);
  transition:opacity 1.05s cubic-bezier(.16,1,.3,1)}

/* ---- Das Geraet -----------------------------------------------------------
   Haarlinien, wie der Rest der Seite. Das Glas ist eine Spur heller als der
   Trichter, damit man sieht, wo etwas hineinlaeuft. */
.brue__linie{stroke:rgba(244,238,228,.34);stroke-width:1.4}
.brue__hell{stroke:rgba(244,238,228,.16);stroke-width:1}
.brue__glas{stroke:rgba(244,238,228,.46);stroke-width:1.5;fill:rgba(244,238,228,.02)}
/* Die drei Marken leuchten nacheinander auf. Sie sagen dasselbe wie der
   Pegel, nur abzaehlbar — wer eine Anzeige nicht deutet, zaehlt sie. */
.brue__mark{stroke:rgba(244,238,228,.18);stroke-width:1.2;
  transition:stroke .5s var(--e-out-cubic),stroke-width .5s var(--e-out-cubic)}
.brue[data-n="1"] .brue__mark[data-n="1"],
.brue[data-n="2"] .brue__mark[data-n="1"],
.brue[data-n="2"] .brue__mark[data-n="2"],
.brue[data-n="3"] .brue__mark{stroke:var(--ember);stroke-width:1.8}

/* ---- Die Tasse -----------------------------------------------------------
   Sie steht erst da, wenn abgeschickt ist. Vorher waere sie ein Versprechen
   ohne Deckung. */
.brue__tasse{opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--e-out-cubic),transform .7s var(--e-out-expo)}
.brue.is-fertig .brue__tasse{opacity:1;transform:none;transition-delay:.15s}
.brue__tinte{fill:var(--ember);
  transform:translateY(28px);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1) .55s}
.brue.is-fertig .brue__tinte{transform:translateY(6px)}

/* ---- Der Pegel ------------------------------------------------------------
   `--fuell` laeuft von 0 bis 1 und wird von news-brew.js gesetzt. Der Kasten
   ist immer gleich hoch und wird nach unten geschoben; so gibt es keine
   Groessenaenderung, nur eine Verschiebung — das ist billiger und laeuft
   ruhiger. Der Ausschnitt uebernimmt die Form der Kanne. */
/* Ein einziger Kasten von der Innenhoehe der Kanne (110), geschoben statt
   gedehnt: eine Verschiebung ist billiger als eine Groessenaenderung, und der
   Ausschnitt uebernimmt die Form. Bei --fuell:0 steht er vollstaendig
   unterhalb des Ausschnitts, bei 1 genau darin.

   Beim ersten Versuch stand der Kasten von y=0 bis 262 und wurde um 112
   geschoben — bei leerem Stand fuellte er die Kanne trotzdem, weil der
   Ausschnitt bei 151 beginnt. Die Hoehe des Kastens MUSS die Innenhoehe
   sein, sonst schiebt man ins Leere. */
.brue__pegel{transform:translateY(calc((1 - var(--fuell,0)) * 110px));
  transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
/* Beim Abschicken giesst die Kanne aus, waehrend die Tasse fuellt — dieselbe
   Bewegung, nur andersherum, und mit demselben Zeitmass. */
.brue.is-fertig .brue__pegel{transform:translateY(110px);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1) .5s}
.brue__stand{fill:rgba(226,85,30,.30)}
.brue__welle{fill:var(--ember)}

/* ---- Der Tropfen ----------------------------------------------------------
   Er faellt in Schleife, aber nicht wie ein Metronom: die Pause ist laenger
   als der Fall, und genau das macht den Unterschied zwischen einem Tropfen
   und einem Blinken. */
.brue__tropf{fill:var(--ember-lo);opacity:0}
/* Der Ring sitzt IM Pegel und faehrt mit ihm — ein Aufschlag gehoert auf die
   Oberflaeche, nicht an eine feste Hoehe. */
.brue__schlag{stroke:var(--ember-lo);stroke-width:1.2;fill:none;opacity:0;
  transform-box:fill-box;transform-origin:center}

/* ---- Der Dampf ------------------------------------------------------------ */
.brue__dampf path{stroke:rgba(244,238,228,.3);stroke-width:1.3;
  stroke-dasharray:52;stroke-dashoffset:52;opacity:0}
.brue.is-warm .brue__dampf path{opacity:1}

/* ---- Die Zahl -------------------------------------------------------------
   Wer eine Anzeige nicht deutet, soll sie lesen koennen. */
.brue__zahl{margin-top:.9rem;font-size:.66rem;letter-spacing:.16em;color:var(--muted)}
.brue__zahl b{color:var(--ember-lo);font-weight:inherit}

@media (prefers-reduced-motion:no-preference){
  .brue__ring:nth-child(1){animation:brRing 26s linear infinite}
  .brue__ring:nth-child(2){animation:brRing 38s linear infinite reverse}
  .brue__ring:nth-child(3){animation:brAtem 14s ease-in-out infinite}
  @keyframes brRing{to{transform:rotate(360deg)}}
  @keyframes brAtem{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.5}}

  /* Fall, Aufschlag, Pause — 2,6 s im Ganzen, davon 0,55 s Fall. */
  .brue.is-sicht .brue__tropf{animation:brFall 2.6s cubic-bezier(.55,0,.85,.4) infinite}
  @keyframes brFall{
    0%{opacity:0;transform:translateY(0) scaleY(.8)}
    6%{opacity:1;transform:translateY(2px) scaleY(1)}
    20%{opacity:1;transform:translateY(56px) scaleY(1.35)}
    21%{opacity:0;transform:translateY(56px) scaleY(1.35)}
    100%{opacity:0;transform:translateY(0) scaleY(.8)}}
  .brue.is-sicht .brue__schlag{animation:brSchlag 2.6s cubic-bezier(.16,1,.3,1) infinite}
  @keyframes brSchlag{
    0%,20%{opacity:0;transform:scale(.2)}
    24%{opacity:.9;transform:scale(.45)}
    46%{opacity:0;transform:scale(1)}
    100%{opacity:0;transform:scale(1)}}

  .brue.is-warm .brue__dampf path{animation:brDampf 5.2s ease-in-out infinite}
  .brue.is-warm .brue__dampf path:nth-child(2){animation-delay:1.7s}
  @keyframes brDampf{
    0%{stroke-dashoffset:52;opacity:0}
    18%{opacity:.85}
    70%{opacity:.5}
    100%{stroke-dashoffset:-52;opacity:0}}

  /* Der Aufschlag beim Steigen: die Kanne bekommt einen kurzen Stoss. */
  .brue.is-stoss .brue__glas{animation:brStoss .5s var(--e-out-expo)}
  @keyframes brStoss{0%{transform:translateY(0)}30%{transform:translateY(1.6px)}100%{transform:translateY(0)}}
}
.brue__glas{transform-box:fill-box;transform-origin:center}
.brue__tropf{transform-box:fill-box;transform-origin:center top}

/* ============================================================================
   DAS FORMULAR, ZUM THEMA
   Dieselbe Sprache wie das Geraet daneben: was fertig ist, faerbt sich ein
   und laeuft von links voll — wie eine Tasse.
   ========================================================================= */
/* Die Unterlinie eines gefuellten Feldes laeuft von links ein. */
.news .field{position:relative}
.news .field .field__line::after{content:'';position:absolute;left:0;bottom:0;
  height:1px;width:100%;background:var(--ember);
  transform:scaleX(0);transform-origin:left;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.news .field.is-voll .field__line::after{transform:scaleX(1)}

/* Die drei Rollen: beim Wechsel laeuft eine Crema-Welle durch den Knopf. */
.news .seg__opt span{position:relative;overflow:hidden}
.news .seg__opt span::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-120%)}
@media (prefers-reduced-motion:no-preference){
  .news .seg__opt input:checked + span::after{animation:nsCrema .8s var(--e-out-expo)}
  @keyframes nsCrema{to{transform:translateX(120%)}}
}

/* Der Haken zeichnet sich, statt zu erscheinen. */
.news .check__box svg path{stroke-dasharray:16;stroke-dashoffset:16;
  transition:stroke-dashoffset .42s var(--e-out-cubic)}
.news .check input:checked + .check__box svg path{stroke-dashoffset:0}

/* Der Knopf wird erst hell, wenn die Kanne voll ist. Er bleibt die ganze Zeit
   bedienbar — wer trotzdem drueckt, bekommt die Fehlermeldung, die es schon
   gab. Gesperrte Knoepfe erklaeren nichts. */
.news .form__submit .btn--primary{transition:box-shadow .6s var(--e-out-cubic),
  background-color .6s var(--e-out-cubic)}
.news .form.is-voll .btn--primary{box-shadow:0 0 0 1px rgba(226,85,30,.5),
  0 14px 44px rgba(226,85,30,.34)}

/* Ab 1200 Punkten abwaerts stellt main.css den Abschnitt auf EINE Spalte.
   Von da an ist die Bruehe keine Saeule mehr, sondern eine Zeile: das Geraet
   links, die Zahl daneben, ueber dem Formular. Aufrecht bliebe sie ein
   schmaler hoher Kasten mitten im Lesefluss. */
@media (max-width:1200px){
  .news__intro,.brue,.news .form{grid-column:auto}
  .brue{min-height:0;flex-direction:row;align-items:center;
    justify-content:flex-start;gap:1.2rem;padding-block:2px}
  .brue__svg{max-width:104px}
  .brue__feld{display:none}
  .brue__zahl{margin-top:0}
}

/* ============================================================================
   DIE DREI PUNKTE LINKS
   Vorher drei Striche in einer Spalte. Jetzt eine gezaehlte Reihe mit
   Haarlinie — dieselbe Sprache wie die Kapitel und die Klebesaetze auf den
   Unterseiten. Die Nummer steht in der Mono, weil sie eine Marke ist und
   kein Wort.
   ========================================================================= */
.news__points{list-style:none;margin:clamp(26px,3.2vw,44px) 0 0;padding:0;
  display:grid;gap:0}
.news__points li{position:relative;display:grid;grid-template-columns:2.4rem 1fr;
  align-items:baseline;gap:.6rem;padding:.92rem 0;
  border-top:1px solid rgba(244,238,228,.1);
  font-size:var(--t-small);color:var(--bone)}
.news__points li:last-child{border-bottom:1px solid rgba(244,238,228,.1)}
.news__points li::before{content:none}
.news__n{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;
  color:var(--ember-lo)}
/* Die Linie darueber faehrt beim Erscheinen von links ein. */
@media (prefers-reduced-motion:no-preference){
  .news__points li{--i:0}
  .news__points li:nth-child(2){--i:1}
  .news__points li:nth-child(3){--i:2}
  [data-reveal] .news__points li,
  .news__intro .news__points li{opacity:0;transform:translateY(8px);
    animation:nsPunkt .7s var(--e-out-expo) both calc(.15s + var(--i) * .09s)}
  @keyframes nsPunkt{to{opacity:1;transform:none}}
}

/* ============================================================================
   NACH DEM ABSCHICKEN
   Vorher legte sich ein schwarzer Kasten ueber das Formular. Er hatte
   dieselbe Farbe wie der Abschnitt, aber nicht dessen Tiefe — und der Schein
   des Knopfes lugte darunter hervor, weil ein Schatten ueber den Kasten
   hinausreicht. Uebrig blieb ein Haken in einem Loch.

   Jetzt: derselbe Platz, aber mit Grund. Ein Schein von oben links, eine
   Haarlinie als Kante, und die Teile kommen nacheinander — Haken, Zeile,
   Adresse. Daneben giesst die Kanne in die Tasse.
   ========================================================================= */
.news .form__done{position:absolute;inset:-6px -10px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:.9rem;padding:clamp(22px,2.6vw,34px);
  border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,rgba(226,85,30,.10),rgba(11,8,6,.94) 46%),var(--ink);
  border:1px solid rgba(226,85,30,.18)}
.form__glanz{position:absolute;left:-18%;top:-42%;width:74%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(226,85,30,.26),rgba(226,85,30,0) 70%)}
.news .form__tick{position:relative;z-index:1}
.news .form__donehead,.news .form__done .lead{position:relative;z-index:1}
.form__ziel{position:relative;z-index:1;margin-top:.2rem;font-size:.68rem;
  letter-spacing:.12em;color:var(--ember-lo);word-break:break-all}

/* Der Schein des Knopfes reicht ueber das Formular hinaus — beim Abschicken
   muss er weg, sonst steht er neben der Bestaetigung im Nichts. */
.news .form.is-fertig .btn--primary{box-shadow:none}

@media (prefers-reduced-motion:no-preference){
  .news .form__done{animation:nsDone .7s var(--e-out-expo) both}
  @keyframes nsDone{from{opacity:0;transform:translateY(14px) scale(.985)}
    to{opacity:1;transform:none}}
  .form__glanz{animation:nsGlanz 1.1s var(--e-out-expo) both .1s}
  @keyframes nsGlanz{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
  /* Der Haken zeichnet sich, statt aufzutauchen. */
  .news .form__tick svg circle{stroke-dasharray:114;stroke-dashoffset:114;
    animation:nsRing .8s var(--e-out-expo) both .18s}
  .news .form__tick svg path{stroke-dasharray:26;stroke-dashoffset:26;
    animation:nsHaken .45s var(--e-out-cubic) both .62s}
  @keyframes nsRing{to{stroke-dashoffset:0}}
  @keyframes nsHaken{to{stroke-dashoffset:0}}
  .news .form__donehead{animation:nsAuf .6s var(--e-out-expo) both .5s}
  .news .form__done .lead{animation:nsAuf .6s var(--e-out-expo) both .6s}
  .form__ziel{animation:nsAuf .6s var(--e-out-expo) both .72s}
  @keyframes nsAuf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}