/* ================================
   HERO – Einheitliches 3:2 Layout
   ================================ */

/* Hero-Container im normalen Flow */
.hero,
.hero-scroll {
  position: relative;
  display: block;
  max-width: 100%;
  margin: 0 auto;
  z-index: 1;
  overflow: hidden; /* Keine Überlappung */
}

/* <picture> und <img> – volle Breite, feste Höhe aus dem 3:2 Thumb */
.hero picture,
.hero img {
  display: block;
  width: 100%;
  height: auto; /* Höhe kommt vom Thumb (3:2), kein CSS-Zwang nötig */
  object-fit: cover; /* Safety – greift nur, falls Bildformat nicht passt */
}

/* Titel-Overlay – unten im Bild, lesbar, nicht klickbar */
.hero-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: clamp(1.5rem, 3vw, 3rem);
  font-weight: 700;
  color: white;
  text-align: center;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
  pointer-events: none; /* Overlay blockiert keine Klicks auf Bildlinks */
}

@media (min-width: 768px) {
  .hero-scroll.scrolled {
    width: 66vw;
    margin-left: auto;
    margin-right: auto;
    left: auto;
    transition: width 2s cubic-bezier(0.65, 0, 0.35, 1);
  }
}

.hero-scroll {
  transition: width 0.1s linear; /* klein, nur für Micro-Glättung */
}

/* Mobile: Titel immer sichtbar */
@media (max-width: 767px) {
  .hero-title {
    font-size: clamp(1.25rem, 5vw, 2rem);
  }
}

/* Abstand nach Hero für nächste Sektion */
.hero + * {
  margin-top: 2rem;
}

/* Motion-Preference: Transitionen abschalten */
@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero-title {
    transition: none !important;
  }
}

/* ================================
   KATEGORIE
   ================================ */

.profil-kategorien {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}
.profil-kategorien span {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-primary-dark);
  background-color: var(--color-bg-alt);
  padding: 0.4rem 1rem;
  border: 2px solid var(--color-border-dark);
  user-select: none;
  cursor: default;
  box-shadow: none;
  transition: none;
}
.profil-motto {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: 1.4rem;
}
.profil-teaser {
  text-align: center;
  font-size: 1.1rem;
  color: var(--color-text);
  margin-bottom: 2rem;
  max-width: 48rem;
  margin-inline: auto;
}

/* ================================
   2‑Spalten‑Layout unter dem Teaser
================================ */
/* full-bleed + zentriert auf max‑width:75vw */
.profil-2spalten-layout.full-bleed {
  grid-column: full;
  width: 100vw;
  max-width: 75vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 0 1rem;
  box-sizing: border-box;
}

/* beide Spalten als flex‑Stack */
.profil-main-col,
.profil-side-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Cards: Desktop Only */
.profil-card {
  background: var(--color-bg);
  box-shadow: 0 8px 32px rgba(44,44,44,0.22);
  border-radius: 0;
  padding: 2rem 1.5rem;
  margin-bottom: 0;
  transition: background 0.4s;
}
.profil-card h3 {
  margin-top: 0;
  font-size: 1.5rem;
  font-weight: 700;
}
.desktop-only {
  display: block;
}
.mobile-only {
  display: none !important;
}

/* =======================================
   Zwei‑Spalten‑Layout: Desktop wieder aktivieren
   ======================================= */
@media (min-width: 901px) {
  .profil-2spalten-layout.full-bleed {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
  }
}

/* ================================
   Mobile‑Fallback: einspaltig, keine Cards
================================ */
@media (max-width: 900px) {
  .profil-2spalten-layout.full-bleed {
    display: block;
    width: 98vw;
    max-width: 100vw;
    margin-left: 0;
    transform: none;
    padding: 0 0.5rem;
  }
  .profil-main-col,
  .profil-side-col {
    gap: 1.5rem;
  }
  .profil-card {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
  }
  .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: block !important;
  }
}

/* ============
   Masonry Galerie: immer volle Breite!
=============== */
.profile-gallery.full-bleed {
  width: 90vw;
  max-width: 90vw;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  margin-top: 3rem;
  margin-bottom: 3rem;
  box-sizing: border-box;
}

/* =============
   Interview Accordion
=============== */

.interview-summary {
  padding: 0;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
}

.interview-summary h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-text);
  margin: 0;
  padding: 0.25rem 0;
  display: inline-block;
}

.interview-summary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

.interview-summary:hover::after,
details[open] > .interview-summary::after {
  width: 100%;
}

.interview-accordion[open] summary {
  border-bottom: 1px solid var(--color-border);
}

.interview-content {
  padding: 1.5rem 0 0 0;
}

details[open] > .interview-summary {
  position: sticky;
  top: var(--header-height);  /* Immer dynamische Höhe */
  background: var(--color-bg);
  z-index: 10;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}



@media (min-width: 768px) {
  .interview-content {
    padding: 2rem 2.5rem 0 0;
  }
}

/* =======================================
   Interview-Accordion: eigenes Icon
   Geschlossen: „+“, offen: „▾“
   ======================================= */

/* 1) Browser-Marker ausblenden */
.interview-summary { 
  list-style: none;             /* Firefox/Chromium */
  padding-left: 1.75rem;        /* Platz fürs Icon */
}
.interview-summary::marker { content: ""; }          /* Firefox/Chromium */
.interview-summary::-webkit-details-marker{ display:none; } /* Safari/WebKit */

/* 2) Eigenes Icon */
.interview-summary::before{
  content: "+";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
}

/* 3) Offen: nach unten zeigendes Dreieck */
details[open] > .interview-summary::before{
  content: "▾";
}

/* 4) A11y-Fokus sichtbar machen */
.interview-summary:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* ==========================
   Vorlieben Accordion (prefs)
   ========================== */

/* --- Summary-Button-Reset & Layout --- */
.prefs-summary {
  padding: 0;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
}

.prefs-summary h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-text);
  margin: 0;
  padding: 0.25rem 0;
  display: inline-block;
}

/* Unterstreichung animiert */
.prefs-summary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.3s ease;
}
.prefs-accordion[open] > .prefs-summary::after,
.prefs-summary:hover::after {
  width: 100%;
}

/* Border unter Summary bei offenem Zustand */
.prefs-accordion[open] summary {
  border-bottom: 1px solid var(--color-border);
}

/* --- Inhaltspadding --- */
.prefs-content {
  padding: 1.5rem 0 0 0;
}
@media (min-width: 768px) {
  .prefs-content {
    padding: 2rem 2.5rem 0 0;
  }
}

/* ==============================
   Eigenes Icon (statt Browser)
   ============================== */

/* 1) Browser-Marker ausblenden + Platz links fürs Icon */
.prefs-summary {
  list-style: none;
  padding-left: 1.75rem; /* Platz für Icon */
}
.prefs-summary::marker { content: ""; }               /* Firefox/Chromium */
.prefs-summary::-webkit-details-marker { display: none; } /* Safari/WebKit */

/* 2) Geschlossen: „+“ */
.prefs-summary::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
}

/* 3) Offen: „▾“ */
.prefs-accordion[open] > .prefs-summary::before {
  content: "▾";
}

/* 4) Fokus sichtbar */
.prefs-summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* Optional: Sticky-Summary bei offenem Zustand (wie Interview) */
.prefs-accordion[open] > .prefs-summary {
  position: sticky;
  top: var(--header-height);
  background: var(--color-bg);
  z-index: 10;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

/* ======================================
   Lieblingsaktivitäten im Interview (identisch zum Vorlieben-Accordion)
   ====================================== */
.interview-activities {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0;
}

.interview-activities li {
  position: relative;
  padding-left: 1.75rem; /* Platz für Symbol */
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--color-text);
}

.interview-activities li::before {
  content: "▸"; /* statt ► für mehr optische Nähe zum Gastaufenthalt */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* vertikal zentrieren */
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
}


/* ===============
   Utility: Section Abstand zu Galerie
=============== */
.profile-gallery + .boxed-content,
.profile-gallery + .boxed-content.profil-sections {
  margin-top: 3rem;
}


/* Sprachen: ohne Bullet, mit deutlichem Abstand (keine Kommata) */
.profil-lang-list { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  display: flex; 
  flex-wrap: wrap; 
  gap: .25rem 1rem;   /* vert./horiz. Abstand zwischen Codes */
}
.profil-lang-item { margin: 0; }
.profil-lang-code { text-decoration: none; } /* optional: Unterstreichung entfernen */

/* Falls noch nicht vorhanden: Screenreader-only */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Sprachen: Komma-Separatoren in Profil-Cards zuverlässig entfernen */
.profil-card .profil-lang-list li::before,
.profil-card .profil-lang-list li::after,
.profil-card .profil-lang-list li + li::before,
.profil-card .profil-lang-item::before,
.profil-card .profil-lang-item::after,
.profil-card .profil-lang-item + .profil-lang-item::before {
  content: none !important;
}

/* Layout ohne Bullets, mit Abstand (kein Komma) */
.profil-card .profil-lang-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
}
.profil-card .profil-lang-item{ margin: 0; }