/* seite-kontakt.css – nur /kontakt, wird nach site.css geladen.
   Kontaktkarten (Bento), Anliegen-Auswahl, Vertraulich-Zeile. Keine Rahmenlinien: Trennung ueber Flaechen, Schatten, Goldschein. */

/* ---------- Kontaktwege (Bento) ---------- */
.kanaele { padding-block: var(--abschnitt); }
.kanaele__intro { max-width: 22rem; color: var(--text-2); }
/* Runde 6: Formular direkt nach dem Hero; hier nur noch Telefon und WhatsApp, E-Mail als Textzeile (kein CTA) */
.kanaele__raster { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .kanaele__raster { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1.25rem; } }
.kanaele .kanal__link { min-height: clamp(10.5rem, 24vw, 15rem); }
.kanal--telefon .kanal__wert { font-size: clamp(1.75rem, 1rem + 3vw, 3.25rem); }
.kanaele__mail { margin-top: 1.25rem; color: var(--text-2); }
.kanaele__mail a { color: var(--hell-100); font-weight: 600; text-underline-offset: .2em; }

.kanal { position: relative; min-width: 0; border-radius: var(--radius-l); }

/* Karte als Link */
.kanal__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  min-height: clamp(12.5rem, 30vw, 19rem);
  padding: clamp(1.4rem, 2.6vw, 2.25rem);
  overflow: hidden;
  border-radius: inherit;
  color: var(--ivory);
  text-decoration: none;
  background: linear-gradient(155deg, rgba(10, 22, 96, .66) 0%, rgba(3, 10, 69, .48) 55%, rgba(0, 2, 46, .62) 100%);
  box-shadow: var(--schatten-tief), inset 0 1px 0 rgba(198, 208, 238, .07);
  transition: translate .8s var(--ease-aus), box-shadow .7s var(--ease-weich);
}
.kanal__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(80% 90% at 100% 0%, rgba(22, 38, 127, .55), rgba(22, 38, 127, 0) 62%), radial-gradient(60% 70% at 0% 100%, rgba(198, 208, 238, .13), rgba(198, 208, 238, 0) 70%);
  opacity: .85;
  transition: opacity .8s var(--ease-weich);
}
.kanal--telefon .kanal__link { min-height: clamp(14rem, 30vw, 19rem); }

.kanal__kopf { display: flex; align-items: center; gap: .9rem; }
.kanal__icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 50%; color: var(--hell-200); background: rgba(198, 208, 238, .12); transition: background .5s, color .4s, transform .8s var(--ease-aus); }
.kanal__icon .icon { position: relative; width: 1.45rem; height: 1.45rem; }
.kanal__label { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }

.kanal__wert {
  margin-top: auto;
  font-size: clamp(1.15rem, .9rem + .9vw, 1.6rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--ivory);
  overflow-wrap: anywhere;
  background-image: var(--text-verlauf);
  background-size: 220% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  transition: color .6s var(--ease-weich), background-position 1.3s var(--ease-weich);
}
.kanal--telefon .kanal__wert { font-size: clamp(1.75rem, 1rem + 3.9vw, 4.4rem); line-height: 1; letter-spacing: -.045em; white-space: nowrap; overflow-wrap: normal; }

.kanal__cta { display: inline-flex; align-self: flex-start; align-items: center; gap: .6rem; min-height: 48px; padding: .7em 1.35em; border-radius: 999px; font-size: .9375rem; font-weight: 600; color: var(--ivory); background: var(--glas-hell); box-shadow: inset 0 1px 0 rgba(198, 208, 238, .08); transition: color .4s, background .6s, box-shadow .6s; }
.kanal__cta .icon { width: 1.1rem; height: 1.1rem; transition: transform .6s var(--ease-aus); }

/* Grosses, feines Icon als Wasserzeichen */

/* Goldband (inspiriert von den Satinbaendern), zeichnet sich bei Hover/Fokus */
.kanal__band-spur { stroke: rgba(198, 208, 238, .13); stroke-width: 1.2; }

/* Puls am Telefon-Icon */

/* Hover = Fokus */
.kanal__link:is(:hover, :focus-visible) { translate: 0 -8px; box-shadow: var(--schatten-tief), inset 0 1px 0 rgba(198, 208, 238, .12); }
.kanal__link:is(:hover, :focus-visible)::before { opacity: 1; }
.kanal__link:is(:hover, :focus-visible) .kanal__icon { color: var(--navy-950); background: var(--flaeche-hell); transform: rotate(-10deg) scale(1.06); }
.kanal__link:is(:hover, :focus-visible) .kanal__wert { color: transparent; background-position: 0% 50%; }
.kanal__link:is(:hover, :focus-visible) .kanal__cta { color: var(--navy-950); background: var(--flaeche-hell); background-size: 200% 100%; box-shadow: 0 16px 40px -14px rgba(198, 208, 238, .7); }
.kanal__link:is(:hover, :focus-visible) .kanal__cta .icon { transform: translateX(5px); }
.kanal__link:is(:hover, :focus-visible) .kanal__deko { color: rgba(198, 208, 238, .17); transform: rotate(-10deg) scale(1.08); }
.kanal__link:focus-visible { outline-offset: 5px; border-radius: var(--radius-l); }

@media (prefers-reduced-motion: no-preference) {
  .kanal--telefon .kanal__link:is(:hover, :focus-visible) .kanal__icon .icon { animation: kanal-klingeln .9s var(--ease-aus); }
}
@keyframes kanal-puls { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes kanal-klingeln { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 40% { transform: rotate(13deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }

/* Ansprechpartnerin auf Satin: grosses Monogramm, Name unten */
.kanal--person { display: flex; min-height: clamp(21rem, 60vw, 26rem); overflow: hidden; background-position: 100% 60%; box-shadow: var(--schatten-tief); transition: background-position 2.4s var(--ease-weich), box-shadow .8s var(--ease-weich); }
.kanal__vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(62% 40% at 50% 40%, rgba(0, 1, 24, .5) 0%, rgba(0, 1, 24, 0) 72%), linear-gradient(180deg, rgba(0, 1, 24, .12) 0%, rgba(0, 1, 24, .22) 45%, rgba(0, 1, 24, .9) 100%); }
.kanal__person { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: clamp(1.4rem, 2.6vw, 2.25rem); }
.kanal__mono { align-self: center; width: clamp(120px, 52%, 230px); height: auto; margin-block: auto; padding-block: 1.25rem; filter: none; transition: transform 1.1s var(--ease-aus), filter .8s; }
.kanal__person-text { width: 100%; }
.kanal__marke { margin: .55rem 0 0; }
.kanal__marke .marke-zeile__name { font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem); line-height: 1.25; text-wrap: balance; }
.kanal__marke .marke-zeile__slogan { font-size: .75rem; }
.kanal__ort { display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; font-size: .875rem; color: var(--text-2); }
.kanal__ort .icon { width: 1.15rem; height: 1.15rem; flex: none; color: var(--hell-300); }
.kanal--person:is(:hover, :focus-within) { background-position: 80% 40%; box-shadow: var(--schatten-tief); }
.kanal--person:is(:hover, :focus-within) .kanal__mono { transform: scale(1.06) rotate(-3deg); filter: none; }

@media (min-width: 600px) and (max-width: 1099px) {
  .kanal--person { min-height: 15rem; }
  .kanal__person { flex-direction: row; align-items: center; gap: clamp(1.5rem, 5vw, 3.5rem); }
  .kanal__mono { width: clamp(120px, 20vw, 180px); flex: none; margin-block: 0; padding-block: 0; }
  .kanal__person-text { width: auto; }
}

/* ---------- Formular: Anliegen-Auswahl (Aufbau und Chips seit Runde 5 Formulare in formulare.css) ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-nachricht-label-ziel].ist-wechsel { display: inline-block; animation: label-wechsel .45s var(--ease-aus); }
}
@keyframes label-wechsel { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ---------- Formular-Info ---------- */
.kontakt-vertraulich { display: flex; align-items: center; gap: .7rem; margin-top: 1.4rem; font-size: .875rem; color: var(--text-2); }
.kontakt-vertraulich .icon { width: 1.2rem; height: 1.2rem; flex: none; color: var(--hell-300); }

/* ===== Runde 5 (Gestaltung, 15.09.2026): ruhige Karten ohne Satin/Glow ===== */
.kanal--person { background-color: var(--karte); box-shadow: none; }
.kanal__link { background: var(--karte); box-shadow: none; }
.kanal__link::before { opacity: .45; }
.kanal__link:is(:hover, :focus-visible) { translate: 0 -3px; background: var(--karte-2); box-shadow: none; }
.kanal__wert { background-image: none; -webkit-background-clip: border-box; background-clip: border-box; }
.kanal__link:is(:hover, :focus-visible) .kanal__wert { color: var(--ivory); }
.kanal__link:is(:hover, :focus-visible) .kanal__cta { background: var(--hell-100); color: var(--navy-900); box-shadow: none; }
.kanal__mono { width: clamp(96px, 40%, 170px); filter: none; }
.kanal--person:is(:hover, :focus-within) { box-shadow: none; }
.kanal--person:is(:hover, :focus-within) .kanal__mono { transform: none; filter: none; }