/* custom-kontakt.css — Schlossberginstitut Stil (mobil-fest) */
:root{
  --sb-red:#d60525;
  --sb-pink:#fbb7a5;
  --text:#111111;
  --muted:#5a5a5a;
  --bg:#ffffff;

  --radius-lg:24px;
  --radius-md:16px;
  --radius-pill:9999px;

  --space-1:6px;
  --space-2:10px;
  --space-3:16px;
  --space-4:24px;
  --space-5:36px;

  /* Effekte */
  --shadow-gray:0 8px 24px rgba(0,0,0,.08);           /* leichter grauer Schatten */
  --shadow-gray-strong:0 10px 28px rgba(0,0,0,.12);   /* beim Berühren stärker */
  --shadow-sm:0 2px 10px rgba(251,183,165,.35);       /* kleiner Bildschatten */
  --pink-tint: rgba(251,183,165,.14);                 /* zarter rosa Schimmer (innen) */
  --pink-tint-strong: rgba(251,183,165,.20);
}

/* Container */
.sb-contact{
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
  background: var(--bg);
  color: var(--text);
  font-family: Verdana, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14.5px; /* ~11pt */
  line-height: 1.65;
}

/* Header */
.page-header{ margin-bottom: var(--space-4); }
.page-header h1{
  margin: 0 0 var(--space-2) 0;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: .2px;
}
.page-sub{ color: var(--muted); margin: 0; }

/* Karten untereinander */
.grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* verhindert Überlauf */
  gap: var(--space-4);
}

/* Card */
.card{
  position: relative;          /* für Schimmer-Overlay */
  overflow: hidden;            /* Schimmer bleibt innerhalb der Karte */
  display: flex;
  flex-direction: column;
  border: 1px solid #f2f2f2;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: #fff;
  transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease;
  min-height: 360px;
}

/* Zarter rosa Schimmer auf der Karte SELBST (innen) */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 70% at 0% 0%, var(--pink-tint), transparent 60%),
    linear-gradient(0deg, var(--pink-tint), var(--pink-tint));
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}

/* Hover/Focus: rosa Schimmer innen + grauer Schatten dahinter */
.card:hover::before,
.card:focus-within::before{ opacity:1; }

.card:hover,
.card:focus-within{
  box-shadow: var(--shadow-gray);
}

/* Active/Touch: etwas stärkerer Schimmer + stärkerer Schatten */
.card:active::before{ opacity:1; background:
  radial-gradient(120% 70% at 0% 0%, var(--pink-tint-strong), transparent 60%),
  linear-gradient(0deg, var(--pink-tint-strong), var(--pink-tint-strong));
}
.card:active{ box-shadow: var(--shadow-gray-strong); }

/* Card-Header */
.card-head{
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-width: 0; /* verhindert Überlauf bei langen Texten */
}

/* Rechteckige Bilder mit abgerundeten Ecken */
.avatar{
  width: 120px;
  height: 150px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: var(--shadow-sm);
}

/* Person-Infos */
.who{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0; /* wichtig für Text-Umbruch */
}

.badge{
  display: inline-block;
  width: max-content;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--sb-pink);
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .2px;
  overflow-wrap: anywhere;  /* bricht lange Begriffe */
  white-space: normal;      /* erlaubt 2 Zeilen */
}

.badge + .name{ margin-top: var(--space-2); }
.name{ font-size: 18px; font-weight: 800; margin: 0; }
.role{ margin: 0; color: var(--muted); font-weight: 600; }

.card-body{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.email{ overflow-wrap: anywhere; }
.email a{
  color: var(--sb-red);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid rgba(214,5,37,.15);
}
.email a:hover{ border-color: rgba(214,5,37,.4); }

/* Buttons unten ausrichten */
.card-actions{
  margin-top: auto;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  text-decoration: none;
  border: 0;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  will-change: transform;
}

/* Hintergrundfarben */
.btn-primary{ background: var(--sb-red); }
.btn-secondary{ background: var(--sb-pink); }

/* Schrift IMMER weiß – in allen Zuständen */
.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:focus,
.btn:active{
  color: #fff !important;
  text-decoration: none;
}

/* Haptik */
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

/* Abschlusszeile */
.closing{ margin-top: var(--space-5); font-weight: 600; }

/* ————— Mobile Fixes ————— */
@media (max-width: 600px){
  .sb-contact{ padding: var(--space-4) var(--space-3); }

  /* Kopfbereich stapeln, damit nichts „rausfällt“ */
  .card-head{
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Bild responsiv, bleibt rechteckig */
  .avatar{
    width: 100%;
    max-width: 240px;     /* optische Begrenzung */
    aspect-ratio: 4 / 5;  /* behält das Format bei */
    height: auto;
  }

  .who{ width: 100%; }
  .name, .role{ word-break: break-word; hyphens: auto; }

  /* Buttons einspaltig für klare Bedienung */
  .card-actions{ flex-direction: column; }
  .card-actions .btn{ width: 100%; }
}
/* ————— Mobile Fixes ————— */
@media (max-width: 600px){
  .sb-contact{ padding: var(--space-4) var(--space-3); }

  /* Kopfbereich stapeln, damit nichts „rausfällt“ */
  .card-head{
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Fotos etwas kleiner auf Mobil */
  .avatar{
    width: 100%;
    max-width: 160px;     /* vorher 240px – jetzt kleiner */
    aspect-ratio: 4 / 5;  /* behält das Format bei */
    height: auto;
  }

  .who{ width: 100%; }
  .name, .role{ word-break: break-word; hyphens: auto; }

  /* Buttons einspaltig + mehrzeiliger Text IM Button */
  .card-actions{ flex-direction: column; gap: var(--space-2); }
  .card-actions .btn{
    width: 100%;
    display: block;              /* statt inline-flex -> Text darf umbrechen */
    white-space: normal;         /* erlaubt Zeilenumbruch */
    overflow-wrap: anywhere;     /* bricht lange Begriffe bei Bedarf */
    line-height: 1.3;            /* bessere Lesbarkeit bei 2 Zeilen */
    text-align: center;
    padding: 12px 16px;          /* behält die Pillenform */
  }
}
/* Schimmer-Overlay sicher über dem Kartenhintergrund platzieren */
.card{ position: relative; z-index: 0; }
.card::before{ z-index: 1; }  /* Overlay-Ebene */

/* FOTO vor das Overlay holen – Schimmer wirkt nicht auf die Bilder */
.avatar{
  position: relative;
  z-index: 2;                 /* Bild über dem Schimmer */
}