/* ==========================================================================
   Baustein: Kontakt-Panel (Sektion 11)
   Datei: css/bausteine/kontakt-panel.css
   Gebraucht auf: index.html, kontakt.html, Schluss-CTA der Leistungsseiten
   Bauvorschrift: DESIGN.md, Baustein "Kontakt-Panel", N4
   Regeln: docs/entwicklung.md. Klassen-Präfix dieser Datei siehe unten,
   Tokens und Rollen kommen aus css/style.css und werden hier nicht neu definiert.
   ========================================================================== */

/* Präfix: .contact-* */
/* Seit D20 (2026-09-14) trägt die Sektion das Blau von Kante zu Kante (surface--blue,
   Radius und Versatz aus style.css), das Panel ist der 1240-px-Inhaltscontainer.
   Kopf mittig wie der Hero, Awesomic setzt den Schluss-CTA mittig. overflow: clip an
   der Sektion beschneidet den Deko-Kreis an der gerundeten Kante. Es ist kein
   Scroll-Container und bricht kein sticky, deshalb zulässig (D15), hier gibt es
   ohnehin nichts Klebendes. */
.contact {
  padding-top: var(--sec-top);
  padding-bottom: calc(var(--sec-bottom) + var(--r-section));
  overflow: clip;
}
.contact-panel {
  color: #fff;
  max-width: var(--container); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  position: relative;
}
.contact-panel::after {
  content: ''; position: absolute; width: 620px; height: 620px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  right: -190px; top: -200px;
  box-shadow: 0 0 0 80px rgba(255,255,255,.04), 0 0 0 160px rgba(255,255,255,.03);
}
.contact-top { display: flex; justify-content: center; position: relative; z-index: 2; }
/* Kein Eyebrow mehr (D20), die Zeile trägt nur die Verfügbarkeit in Weiß (8.45 auf Blau) */
.contact-available { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .12em; }
.contact-available i {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--yellow); margin-right: 7px; /* D17: Signal auf Blau, 4.19 */
  box-shadow: 0 0 0 4px rgba(241,169,16,.14);
}
.contact-panel h2 { position: relative; z-index: 2; margin: 30px auto 0; max-width: 1040px; }
.contact-bottom { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 36px; position: relative; z-index: 2; }
.contact-bottom > p { color: var(--paper); line-height: 1.55; font-size: var(--fs-body); max-width: 650px; }
.contact-actions { display: flex; align-items: center; justify-content: center; gap: 25px; }
.contact-phone { font-size: var(--fs-body-s); border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 4px; }

@media (max-width: 980px) {
  .contact-bottom { gap: 30px; }
}

@media (max-width: 640px) {
  .contact-available { display: block; }
  .contact-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .contact-phone { text-align: center; padding: 10px; }
}