/* NORDIX — Anfrage-Button
   Portierung der 21st.dev-Komponente „anti-metal-button" nach Vanilla-CSS.
   Übernommen: dunkler Grundkörper, links ein Akzentfeld, das beim Überfahren
   auf volle Breite aufzieht, darin eine Punktwelle mit versetzter Taktung.
   Geändert gegenüber der Vorlage:
     - Akzent ist das Markenorange statt Limette
     - im Akzentfeld laufen nur die Pfeilreihen, kein Logo
     - der Text wechselt beim Aufziehen auf Dunkel; in der Vorlage bleibt er
       hell und steht dann unlesbar auf hellem Grund
   Alle Maße hängen an --cta-h, damit die Tweaks-Bar daran drehen kann. */

:root{
  --cta-h:58px;
  --cta-r:12px;
  --cta-pad:5px;
  --cta-pfeil:24px;   /* Breite EINES Pfeils */
  --cta-innen:11px;   /* Innenabstand des Akzentfelds */
}

.cta-a{
  position:relative;display:inline-flex;align-items:center;
  height:var(--cta-h);min-width:296px;border-radius:var(--cta-r);
  overflow:hidden;text-decoration:none;isolation:isolate;
  background:linear-gradient(180deg,#1c2022 0%,#0d1011 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 20px rgba(0,0,0,.4);
  transition:transform .18s ease,box-shadow .25s ease;
}
.cta-a:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 28px color-mix(in srgb,var(--orange) 22%,transparent)}
.cta-a:active{transform:scale(.985)}
.cta-a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* Beschriftung sitzt rechts und wechselt die Farbe, sobald das Feld darunterläuft */
.cta-a .lab{
  position:absolute;right:22px;z-index:2;
  font-family:var(--font-body);font-size:13px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:#fff;
  transition:color .2s ease .06s;
}
.cta-a:hover .lab,.cta-a:focus-visible .lab{color:var(--bg)}

/* Akzentfeld
   Die Ruhebreite ist gerechnet, nicht gesetzt: genau ein Pfeil plus Innenabstand
   auf beiden Seiten. Vorher stand hier eine runde Zahl (52 px), die nicht zur
   Pfeilbreite passte — es blieben 6 px vom Zwischenraum übrig, und der sah aus
   wie der angeschnittene Rand des nächsten Pfeils. Der kleine Button in der
   Menüleiste traf die Breite zufällig und wirkte deshalb sauber. */
.cta-a .panel{
  position:absolute;left:var(--cta-pad);top:var(--cta-pad);bottom:var(--cta-pad);
  width:calc(var(--cta-pfeil) + var(--cta-innen) * 2);
  z-index:1;display:flex;align-items:center;gap:11px;
  padding:0 var(--cta-innen);overflow:hidden;border-radius:calc(var(--cta-r) - 4px);
  background:linear-gradient(180deg,var(--orange-hell) 0%,var(--orange) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 4px rgba(0,0,0,.14),
             0 2px 5px rgba(0,0,0,.18);
  transition:width .26s cubic-bezier(.65,0,.35,1);
}
.cta-a:hover .panel,.cta-a:focus-visible .panel{width:calc(100% - var(--cta-pad) * 2)}

.cta-a .wave{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.cta-a .wave svg{display:block;overflow:visible}

@keyframes cta-dot{
  0%,70%,100%{opacity:.25;transform:scale(.85)}
  35%{opacity:1;transform:scale(1)}
}
.cta-a .dot{transform-box:fill-box;transform-origin:center;
  animation:cta-dot 1.4s ease-in-out infinite}

/* Kleine Fassung für die Menüleiste.
   Gleiche Bauart, gleiche Bewegung — nur kleiner. Die Rangfolge entsteht über
   die Größe, nicht über eine zweite Formensprache. Zwei Pfeilreihen statt vier,
   sonst stößt die letzte an die Beschriftung. */
.cta-a.mini{
  --cta-h:40px;--cta-r:9px;--cta-pad:4px;
  --cta-pfeil:19px;--cta-innen:9px;
  min-width:198px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 3px 10px rgba(0,0,0,.3);
}
.cta-a.mini:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 16px color-mix(in srgb,var(--orange) 20%,transparent)}
.cta-a.mini .lab{right:15px;font-size:11px;letter-spacing:.13em}
/* Nur noch der Zwischenraum — Breite und Innenabstand rechnet die Grundregel
   aus --cta-pfeil und --cta-innen. Eine eigene width-Regel hier hätte dieselbe
   Gewichtung wie die Hover-Regel, stünde aber später: Der kleine Button hätte
   dann nie aufgezogen. */
.cta-a.mini .panel{gap:8px}

/* Reihenfolge im Hero: Headline, dann der Button, dann der Fließtext.
   Der Button steht damit im ersten Blickfeld, bevor erklärt wird. */
.hero .heroact{margin-top:clamp(30px,4.5vh,48px);display:flex;align-items:center;
  gap:26px;flex-wrap:wrap}
.hero .heroled{margin-top:clamp(26px,3.5vh,40px);max-width:46ch;color:var(--ink-2)}

@media(prefers-reduced-motion:reduce){
  .cta-a .dot{animation:none;opacity:1}
  .cta-a,.cta-a .panel,.cta-a .lab{transition:none}
}
@media(max-width:560px){
  .cta-a{min-width:0;width:100%}
  .cta-a .lab{right:auto;left:calc(var(--cta-h) + 14px)}
}

/* ---------- Der zweite Weg: anrufen ----------
   Die Rufnummer stand bisher als dritter unscheinbarer Nebenlink neben
   „So läuft's ab" — gleiche Größe, gleiche Farbe, gleiche Zurückhaltung. Als
   Angebot war sie damit nicht zu erkennen; sie sah aus wie eine Fußnote.

   Jetzt steht sie in einer eigenen Zeile unter dem Knopf, mit einer Ansage
   davor. Der erklärende Teil bleibt klein und grau, die Nummer trägt die
   Aufmerksamkeit: Anzeigeschrift, deutlich größer, Markenorange. Genau dieses
   Gefälle macht sie lesbar als „das hier kannst du auch tun" — zwei gleich
   starke Angebote nebeneinander würden sich gegenseitig schwächen. */
.hero .heroruf{
  margin-top:clamp(14px,1.8vh,20px);
  display:flex;align-items:baseline;flex-wrap:wrap;
  gap:6px clamp(10px,1.4vw,18px);
  /* `.hero p` ist auf 44 Zeichen begrenzt — richtig für Fließtext, hier aber
     der Grund, warum Ansage und Nummer untereinander rutschten. Sie gehören
     in eine Zeile; auf schmalen Fenstern bricht `flex-wrap` sie trotzdem um. */
  max-width:none;
}
.hero .heroruf .vorwort{
  font-size:var(--fs-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--ink-3);
}
.hero .heroruf a{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(21px,2.1vw,29px);line-height:1;
  letter-spacing:.01em;color:var(--orange);
  text-decoration:none;
  /* Der Unterstrich wächst beim Überfahren von links — dieselbe Geste wie bei
     den Menüpunkten, damit es nicht nach einem fremden Bauteil aussieht. */
  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;
}
.hero .heroruf a:hover,.hero .heroruf a:focus-visible{
  background-size:100% 2px;color:var(--orange-hell);
}
/* Der Hörer ist kleiner als die Ziffern und sitzt optisch auf der Grundlinie —
   ein gleich großes Symbol würde mit der Nummer um die Aufmerksamkeit ringen. */
.hero .heroruf svg{width:.62em;height:.62em;flex:0 0 auto;opacity:.9}

@media(prefers-reduced-motion:reduce){
  .hero .heroruf a{transition:none}
}