/* author: Gemini & Fabrice Schaller
    description: Unified Version based on v1.9.0
    version: 2.1.0
*/

:root {
  --logo-purple: #5d2a5f;
  --primary-color: #a8b9a1;
  --accent-color: #e9c46a;
  --bg-color: #f2e9f4;
  --text-color: #4a4a4a;
  --white: #ffffff;
  --secondary-color: #d9a7a7;
  --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.05);
  --radius-lg: 20px;
  --radius-sm: 8px;
  --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. RESET & BASICS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  overflow-x: hidden;
}

/* 2. HEADER & NAVIGATION */
header {
  background-color: var(--white);
  padding: 1rem 2rem;
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999;
  border-bottom: 1px solid rgba(93, 42, 95, 0.05);
  transition: var(--transition-smooth);
  position: fixed; /* Fixed ist hier besser als sticky */
  top: 0;
  width: 100%;
  z-index: 9999;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.4s ease,
    background-color 0.4s ease;
}

header.header-hidden {
  transform: translateY(-100%);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-side {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  text-decoration: none; /* Verhindert blaue Linien */
  transition: var(--transition-smooth);
}

.logo-wrapper:hover .header-logo {
  transform: scale(1.05); /* Dezentes Vergrößern beim Drüberfahren */
  filter: brightness(1.1); /* Ganz leichtes Aufhellen */
}

.logo-wrapper:active .header-logo {
  transform: scale(0.95); /* "Druck"-Effekt beim Klicken */
}

.header-logo {
  height: 80px;
  width: auto;
  transition: var(--transition-smooth);
}

.header-logo:hover {
  transform: rotate(-3deg) scale(1.05);
}

.main-title h3 {
  font-weight: 400;
  color: var(--logo-purple);
  font-style: italic;
  font-size: 1rem;
}

/* Navigation Links */
.main-nav {
  display: flex;
  gap: 5px;
  align-items: center;
}

.nav-link {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 600;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
  font-size: 0.95rem;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--logo-purple);
  background-color: rgba(93, 42, 95, 0.05);
}

/* Dropdown Logik */
.nav-dropdown {
  position: relative;
}

.dropdown-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: var(--white);
  min-width: 240px;
  box-shadow: var(--shadow-strong);
  border-radius: var(--radius-sm);
  padding: 12px 0;
  transition: var(--transition-smooth);
  border-top: 3px solid var(--logo-purple);
  z-index: 1000;
}

.dropdown-content a {
  color: var(--text-color);
  padding: 10px 20px;
  text-decoration: none;
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.dropdown-content a:hover {
  background-color: var(--bg-color);
  color: var(--logo-purple);
  padding-left: 25px;
}

/* Desktop Hover Effekt */
@media (min-width: 992px) {
  .nav-dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.arrow {
  font-size: 0.7rem;
  vertical-align: middle;
  opacity: 0.5;
  margin-left: 4px;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 10001;
}

.mobile-menu-toggle span {
  width: 25px;
  height: 3px;
  background: var(--logo-purple);
  border-radius: 3px;
  transition: var(--transition-smooth);
}

/* Animation für den Hamburger zu Kreuz */
.mobile-menu-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-20px);
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* 3. MOBILE RESPONSIVENESS (Navigation) */
@media (max-width: 1150px) {
  .main-title {
    display: none;
  }
}

@media (max-width: 991px) {
  .mobile-menu-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    top: 0;
    right: -100%; /* Versteckt rechts außerhalb */
    height: 100vh;
    width: 300px;
    background: var(--white);
    display: flex; /* Sicherstellen, dass es Flex bleibt */
    flex-direction: column;
    padding: 100px 20px;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000; /* Unter dem Toggle, aber über dem Content */
    visibility: visible; /* Sicherstellen, dass es nicht auf hidden steht */
    z-index: 10000;
  }

  /* Diese Klasse muss greifen! */
  .main-nav.active {
    right: 0 !important;
  }

  .nav-dropdown {
    width: 100%;
  }

  .dropdown-content {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    box-shadow: none;
    padding-left: 15px;
    border-top: none;
    border-left: 2px solid var(--bg-color);
    margin: 5px 0 15px 10px;
    min-width: unset;
    display: block;
  }

  .nav-link {
    width: 100%;
    display: block;
  }

  .dropdown-content {
    display: none; /* Initial verstecken */
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    box-shadow: none;
    padding-left: 20px;
    border-left: 2px solid var(--primary-color);
    margin: 0;
    width: 100%;
  }

  /* Wenn das Eltern-Element die Klasse .open hat, zeige das Dropdown */
  .nav-dropdown.open .dropdown-content {
    display: block;
    animation: fadeInSlideUp 0.3s ease;
  }

  /* Pfeil-Animation bei Klick */
  .nav-dropdown.open .arrow {
    transform: rotate(180deg);
    display: inline-block;
  }
}
/* 3. MAIN CONTENT AREA */
main {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  min-height: 80vh;
  padding-top: 80px;
  transition: padding 0.4s ease;
}

/* 4. REUSABLE COMPONENTS (Standardized Grid) */
.view-section {
  animation: fadeInSlideUp 0.6s ease-out;
  padding: 20px 0;
}
.intro-text {
  text-align: center;
  margin-bottom: 50px;
}

/* Hier habe ich offer-selection-grid und selection-grid zusammengefasst */
.offer-selection-grid,
.selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 50px;
}

.selection-card {
  background: var(--white);
  padding: 50px 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  transition: var(--transition-smooth);
  border-top: 6px solid transparent;
  margin-top: 50px;
}

.green-teaser {
  border-top-color: var(--primary-color);
}
.purple-teaser {
  border-top-color: var(--logo-purple);
}

.selection-card:hover {
  transform: translateY(-10px);
}
.card-icon {
  font-size: 3.5rem;
  margin-bottom: 20px;
}

/* --- HOME HERO SECTION --- */
.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh; /* Etwas höher für mehr Präsenz */
  text-align: center;
  /* Wir entfernen das Padding, damit die Box Platz hat */
  padding: 60px 0;
  margin-top: 20px;
  width: 100%;
}

/* --- HERO ANIMATION REFINEMENT --- */

.hero-title {
    text-align: center;
    width: 100%;
    margin-bottom: 40px; 
    z-index: 2;
    position: relative;
    padding-top: 100px;
}

.hero-title span {
    display: block;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px); /* Leichte Bewegung von unten nach oben */
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform, filter; /* Optimierung für den Browser */
}

/* Wenn die Klasse vom JS hinzugefügt wird */
.hero-title span.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.line-1 {
    font-size: clamp(3rem, 10vw, 5.5rem);
    font-weight: 800;
    color: var(--logo-purple);
    font-family: "Georgia", serif;
    font-style: italic;
    /* Nutzt jetzt automatisch .reveal-item Logik */
}

.line-2 {
    font-size: clamp(2rem, 6vw, 3.5rem);
    color: var(--primary-color);
    font-weight: 700;
}

.line-3 {
    font-size: clamp(2rem, 6vw, 3.5rem);
    color: var(--logo-purple);
    font-weight: 700;
}

/* --- LANDINGPAGE REVEAL STYLES --- */

/* Der gesamte Hero-Bereich bekommt eine Mindesthöhe und Flexbox, 
   damit wir alles schön in der Mitte ausrichten können. */
/* --- HERO SECTION LAYOUT --- */

#hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 100px 20px;
    gap: 40px;
    overflow: hidden; /* Verhindert Scrollbars beim Einfliegen */
}

.butterfly-interactive-container {
    position: relative;
    width: 200px; /* Hier die Gesamtgröße steuern */
    height: 160px; 
    perspective: 1200px;
    cursor: pointer;
    z-index: 10;
}

/* --- BUTTERFLY SOLID-COLOR SYNCHRON-FLAP --- */

.butterfly-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transform-origin: 18% 50%; 
    will-change: transform;
}

/* 1. INITIALER FLAP (Beim Laden) */
.butterfly-back {
    z-index: 1;
    filter: brightness(0.75); 
    clip-path: inset(0 0 0 18%); 
    /* Nutzt die 'Initial'-Keyframes */
    animation: doubleFlapBack 0.4s ease-in-out 1.2s 1;
}

.butterfly-front {
    z-index: 2;
    filter: drop-shadow(-2px 4px 6px rgba(0,0,0,0.1));
    /* Nutzt die 'Initial'-Keyframes */
    animation: doubleFlapFront 0.4s ease-in-out 1.2s 1;
}

/* 2. HOVER TRIGGER (Mit neuem Namen 'HoverFlap') */
.butterfly-interactive-container:hover .butterfly-back {
    animation: doubleFlapBackHover 0.4s ease-in-out 1 forwards !important;
}

.butterfly-interactive-container:hover .butterfly-front {
    animation: doubleFlapFrontHover 0.4s ease-in-out 1 forwards !important;
}

/* --- KEYFRAMES FÜR INITIAL (Beim Laden) --- */
@keyframes doubleFlapBack {
    0%, 50%, 100% { transform: rotateY(0deg) translateZ(-5px); }
    25% { transform: rotateY(-60deg) rotateZ(-10deg) translateZ(-20px) translateX(15px); }
    75% { transform: rotateY(-50deg) rotateZ(-8deg) translateZ(-15px) translateX(12px); }
}
@keyframes doubleFlapFront {
    0%, 50%, 100% { transform: rotateY(0deg) translateZ(5px); }
    25% { transform: rotateY(55deg) rotateZ(2deg) translateZ(25px) translateX(-5px); }
    75% { transform: rotateY(45deg) rotateZ(1deg) translateZ(20px) translateX(-3px); }
}

/* --- KEYFRAMES FÜR HOVER (Exakte Kopie, aber anderer Name) --- */
/* Das zwingt den Browser, die Animation beim Hover neu zu starten! */
@keyframes doubleFlapBackHover {
    0%, 50%, 100% { transform: rotateY(0deg) translateZ(-5px); }
    25% { transform: rotateY(-60deg) rotateZ(-10deg) translateZ(-20px) translateX(15px); }
    75% { transform: rotateY(-50deg) rotateZ(-8deg) translateZ(-15px) translateX(12px); }
}
@keyframes doubleFlapFrontHover {
    0%, 50%, 100% { transform: rotateY(0deg) translateZ(5px); }
    25% { transform: rotateY(55deg) rotateZ(2deg) translateZ(25px) translateX(-5px); }
    75% { transform: rotateY(45deg) rotateZ(1deg) translateZ(20px) translateX(-3px); }
}

/* --- TYPOGRAFIE REFINEMENT --- */

.hero-title-group {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.line-text {
    display: block;
    will-change: transform, opacity, filter;
}

.text-small { font-size: 1.5rem; color: var(--text-dark); font-style: italic; }
.text-large { font-size: clamp(3rem, 8vw, 5rem); font-weight: 800; color: var(--logo-purple); line-height: 1; }
.text-medium { font-size: 2rem; color: var(--text-dark); font-weight: 600; }
.text-medium-purple { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--logo-purple); line-height: 1; }
.text-welcome {
    font-family: 'Dancing Script', cursive;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: var(--logo-purple);
    display: inline-block; /* Wichtig für die Animation */
    white-space: nowrap;
    overflow: hidden;
    
    /* Die Animation: Dauer 1.5s, startet nach 0.2s */
    animation: handWrite 1.5s ease-out forwards;
    animation-delay: 0.2s;
    
    /* Startzustand: Komplett unsichtbar (links abgeschnitten) */
    clip-path: inset(0 100% 0 0);
}

@keyframes handWrite {
    0% {
        clip-path: inset(0 100% 0 0);
        transform: translateX(-10px) rotate(-2deg);
        opacity: 0;
    }
    100% {
        clip-path: inset(0 0% 0 0);
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

/* --- UNIFIED BUTTON SYSTEM --- */

/* Basis für alle Buttons */
.btn-primary,
.btn-outline {
  display: inline-flex; /* Besser als inline-block für Zentrierung */
  align-items: center;
  justify-content: center;
  padding: 13px 28px; /* Einheitliches Padding */
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition-smooth);
  cursor: pointer;
  border: 2px solid transparent; /* Platzhalter für Border */
  line-height: 1.2;
  text-align: center;
  margin-top: 20px;
}

/* Green Button (ehemals btn-primary) */
.btn-primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  box-shadow: 0 4px 15px rgba(168, 185, 161, 0.3);
}

.btn-primary:hover {
  transform: translateY(-3px);
  background: #97a890; /* Leicht dunkleres Grün */
  border-color: #97a890;
  box-shadow: 0 6px 20px rgba(168, 185, 161, 0.5);
}

/* Purple Button (ehemals btn-outline) */
.btn-outline {
  background: transparent;
  border-color: var(--logo-purple);
  color: var(--logo-purple);
}

.btn-outline:hover {
  transform: translateY(-3px);
  background: var(--logo-purple);
  color: white;
  box-shadow: 0 6px 20px rgba(93, 42, 95, 0.2);
}

/*-----------------*/

/* --- HERO CONTENT REFINEMENT --- */
.hero-content-columns {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    margin: 60px auto;
    gap: 40px; /* DEFINITIVER ABSTAND zwischen den Boxen */
}

.hero-box-wrapper {
    background: var(--white);
    padding: 3rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    width: 90%;
    position: relative;
    
    /* WICHTIG: Schneidet den Streifen exakt an den Rundungen ab */
    overflow: hidden; 
    
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(30px);
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease;
}

/* Versatz ohne Überlappung */
.hero-box-wrapper:nth-of-type(1) { align-self: flex-start; }
.hero-box-wrapper:nth-of-type(2) { align-self: flex-end; }
.hero-box-wrapper:nth-of-type(3) { align-self: center; width: 100%; }

/* --- DER FIX FÜR DIE STREIFEN --- */
.hero-box-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Deckt die gesamte Breite ab */
    height: 8px;
    z-index: 10;
    /* Wir entfernen hier den Radius, da 'overflow: hidden' der Box 
       den Streifen automatisch an den Ecken der Box abrundet! */
}

/* Farben erzwingen */
.detail-purple::before {
    background-color: var(--logo-purple) !important;
}

.detail-green::before {
    background-color: var(--primary-color) !important;
}

/* Text-Anpassung */
.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-color);
    line-height: 1.7;
    margin: 0;
}

.button-group {
  display: flex;       /* Aktiviert Flexbox */
  justify-content: center; /* Zentriert horizontal */
  gap: 15px;          /* Abstand zwischen den Buttons (moderner als Margin) */
  margin-top: 20px;   /* Etwas Luft nach oben zum Text */
  flex-wrap: wrap;    /* Falls der Platz auf dem Handy eng wird, brechen sie um */
}

/*-----------------*/

/* --- ANIMATIONEN --- */
@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.hero-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.float-icon {
  position: absolute;
  font-size: 2rem;
  opacity: 0.2;
  animation: floating 6s ease-in-out infinite;
}
.float-icon:nth-child(1) {
  top: 20%;
  left: 10%;
}
.float-icon:nth-child(2) {
  bottom: 30%;
  right: 15%;
  animation-delay: 2s;
}
.float-icon:nth-child(3) {
  top: 60%;
  left: 20%;
  animation-delay: 4s;
}
@keyframes floating {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* 5. DETAIL VIEW STRUCTURE */
.back-nav {
  text-align: left;
  margin-bottom: 20px;
}
.btn-back {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-color);
  font-weight: 600;
  padding: 10px 20px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  transition: var(--transition-smooth);
}
.btn-back:hover {
  transform: translateX(-5px);
  color: var(--logo-purple);
}
.detail-view-wrapper {
  background: var(--white);
  padding: 50px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  text-align: left;
  position: relative;
  overflow: hidden;
  margin-bottom: 50px;
}
.detail-view-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
}
.detail-green::before {
  background: var(--primary-color);
}
.detail-purple::before {
  background: var(--logo-purple);
}
.detail-header {
  margin-bottom: 30px;
}
.detail-header h2 {
  font-size: 2.2rem;
  color: var(--text-color);
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin: 30px 0;
}
.info-card {
  background: var(--bg-color);
  padding: 25px;
  border-radius: var(--radius-sm);
}
/* Standard-Farbe (Fallback) */
.info-card h4 {
  margin-bottom: 10px;
  transition: var(--transition-smooth);
}

/* Wenn der Wrapper grün ist -> h4 wird grün */
.detail-green .info-card h4 {
  color: var(--primary-color);
}

/* Wenn der Wrapper lila ist -> h4 wird lila */
.detail-purple .info-card h4 {
  color: var(--logo-purple);
}

.custom-list li {
  display: flex;
  align-items: flex-start; /* Icon bleibt oben, auch wenn der Text mehrzeilig ist */
  gap: 15px;               /* Der Abstand zwischen Icon und Text */
  margin-bottom: 12px;
  padding-left: 0;         /* Wir brauchen kein Padding mehr, Flex macht das! */
}

.custom-list li::before {
  content: "";
  flex-shrink: 0;          /* Verhindert, dass das Icon zusammengedrückt wird */
  width: 20px;
  height: 20px;
  margin-top: 3px;         /* Feinjustierung zur ersten Textzeile */
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../assets/Herz.png');
}

/* 6. TEAM & BANK DETAILS */
.team-grid {
  display: grid;
  /* Wir definieren ein 6-Spalten-Layout als Basis für maximale Flexibilität */
  grid-template-columns: repeat(6, 1fr); 
  gap: 30px;
  margin-top: 50px;
}

.team-card {
  background: var(--white);
  padding: 30px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: visible;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.team-card::before {
  content: "";
  position: absolute;
  top: -5px; /* 1px überlappen, um Lücken zu vermeiden */
  left: 0px; 
  right: 0px;
  height: 9px; /* Etwas dicker wegen dem Überlapp */
  
  /* Wir nutzen hier den Radius der Card */
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  
  /* Falls die Card einen Border hat, hier auch einen setzen */
  z-index: 1;
}

/* Die beiden Co-Präsidentinnen (1. & 2. Karte) */
.team-card:nth-child(1),
.team-card:nth-child(2) {
  grid-column: span 3; /* Nehmen jeweils die Hälfte der 6 Spalten ein */
}

/* Zentrierung der oberen Reihe: 
   Falls das Grid zu breit wird, hilft ein spezieller Margin-Kniff oder 
   wir definieren die Startpunkte explizit: */
.team-card:nth-child(1) { grid-column: 2 / 4; } /* Startet bei Linie 2, geht bis 4 */
.team-card:nth-child(2) { grid-column: 4 / 6; } /* Startet bei Linie 4, geht bis 6 */

/* Die restlichen drei Mitglieder (3., 4. & 5. Karte) */
.team-card:nth-child(n+3) {
  grid-column: span 2; /* Nehmen jeweils 1/3 der 6 Spalten ein */
}

/* Mobile Optimierung: Auf kleinen Screens alles untereinander */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
  .team-card:nth-child(n) {
    grid-column: span 1;
  }
}


.team-card:hover {
  z-index: 100; /* Damit die Sprechblase über die Nachbarkarten ragen kann */
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Optional: Das Bild im Inneren leicht vergrössern beim Hover */
.team-card:hover .member-image {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}

.team-card:hover .member-quote {
  opacity: 1;
  /* Erhöht von -60px auf -100px, damit Platz für das 1.2x Bild ist */
  transform: translateX(-50%) translateY(-100px) scale(1); 
}

/* --- 2. DIE SPRECHBLASE (FLACHERER WINKEL) --- */
.member-quote {
  position: absolute;
  top: 0; 
  left: 52%; /* Noch ein Stück näher ans Bild gerückt */
  transform: scale(0) rotate(-5deg); 
  transform-origin: bottom left; 
  background: var(--white);
  padding: 18px 22px;
  border-radius: 20px 20px 20px 5px;
  box-shadow: var(--shadow-soft);
  width: 210px; 
  z-index: 20;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  border: 1px solid #f0f0f0;
  z-index: 50;
}

.member-quote::after {
  content: "";
  position: absolute;
  bottom: -12px; /* Etwas tiefer, damit der Pfeil mehr Platz hat */
  left: 15px; 
  
  /* MASSIVE BASIS: 30px links, 30px rechts = 60px Gesamtbreite */
  /* GERINGE HÖHE: 12px sorgt für den flachen Winkel */
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 12px solid var(--white); 
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.05)); /* Optional: Schatten für den Pfeil */
}

/* --- 3. HOVER FEINTUNING --- */
.team-card:hover .member-quote {
  opacity: 1;
  /* Die Blase landet jetzt präzise diagonal über der Schulter */
  transform: translateY(-90px) translateX(10px) scale(1) rotate(2deg);
}

/* Der Text in der Blase */
.member-quote p {
  font-size: 1.05rem; /* Größer und besser lesbar */
  font-weight: 600; /* Etwas kräftiger */
  line-height: 1.2;
  color: var(--text-color);
  margin: 0;
  font-style: italic;
}


.member-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: var(--bg-color);
  margin: 0 auto 15px;
  background-size: cover;
  background-position: center 10%;
}

.bank-info-box {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  background: var(--bg-color);
  padding: 35px;
  border-radius: var(--radius-sm);
}
.iban {
  display: block;
  font-family: monospace;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--logo-purple);
  background: var(--white);
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
}
.twint-wrapper {
  text-align: center;
  border: 2px dashed var(--secondary-color);
  padding: 20px;
  border-radius: var(--radius-sm);
}
.twint-qr-placeholder {
  width: 450;
  height: 200px;
  background: #ddd;
  margin: 15px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #666;
}
.cta-box {
  margin-top: 40px;
  padding: 30px;
  border: 2px dashed var(--primary-color);
  border-radius: var(--radius-sm);
  text-align: center;
}

/* 7. ANIMATIONS & MISC */
@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.swal2-popup {
  border-radius: var(--radius-lg) !important;
  font-family: inherit !important;
}

@media (max-width: 768px) {
  .detail-view-wrapper {
    padding: 30px 20px;
  }
  .hero-title {
    font-size: 2.5rem;
  }
}

/* --- FOOTER STYLES --- */
.main-footer {
  background-color: var(--white);
  padding: 60px 0 20px;
  margin-top: 80px;
  border-top: 1px solid rgba(93, 42, 95, 0.1);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
}

.footer-logo {
  height: 60px;
  margin-bottom: 20px;
  filter: grayscale(0.2); /* Etwas dezenter im Footer */
}

.footer-brand p {
  max-width: 300px;
  color: #777;
  font-size: 0.95rem;
}

.footer-links h4,
.footer-contact h4 {
  color: var(--logo-purple);
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.footer-links ul {
  list-style: none;
}

.footer-links ul li {
  margin-bottom: 10px;
}

.footer-links ul li a {
  text-decoration: none;
  color: var(--text-color);
  transition: var(--transition-smooth);
  font-size: 0.95rem;
}

.footer-links ul li a:hover {
  color: var(--logo-purple);
  padding-left: 5px;
}

.footer-contact p {
  color: #777;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.footer-contact a {
  color: var(--logo-purple);
  text-decoration: none;
  font-weight: 600;
}

.footer-bottom {
  max-width: 1200px;
  margin: 60px auto 0;
  padding: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  text-align: center;
  font-size: 0.85rem;
  color: #999;
}

.footer-bottom a {
  color: #999;
  text-decoration: none;
  margin: 0 10px;
}

.footer-bottom a:hover {
  color: var(--logo-purple);
}

/* Responsive Footer */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .footer-brand p {
    margin: 0 auto;
  }
}

/* --- 404 MINI CARDS --- */
.mini-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  max-width: 700px;
  margin: 40px auto 0;
}

.mini-card {
  background: var(--white);
  padding: 20px 15px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-color);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--transition-smooth);
  border-top: 4px solid transparent;
}

.mini-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Farben passend zum System */
.mini-card.is-green {
  border-top-color: var(--primary-color);
}
.mini-card.is-purple {
  border-top-color: var(--logo-purple);
}

.mini-icon {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.mini-card h5 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-color);
}

.mini-card:hover h5 {
  color: var(--logo-purple);
}

/* Error Logo Container (aus dem vorherigen Schritt) */
.error-logo-container {
  width: 100px;
  height: 100px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  box-shadow: var(--shadow-soft);
}

.error-logo {
  width: 65px;
  height: auto;
  opacity: 0.9;
}

.error-bridge-text {
  /* Wir nutzen die exakten Werte deiner .hero-subtitle oder .info-card p */
  font-size: 1.1rem;
  color: var(--text-color); /* Gleiche Farbe wie überall */
  opacity: 0.8; /* Dezenter als die Headline, aber gleiche Schriftart/Gewicht */
  margin: 30px auto 45px;
  max-width: 550px;
  line-height: 1.6;
  text-align: center;
}

/* Der dezente Trenner – jetzt in der Akzentfarbe deiner Seite */
.error-bridge-text::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px; /* Dünner ist oft edler */
  background: var(--logo-purple);
  opacity: 0.2; /* Sehr subtil, wie eine feine Naht */
  margin: 25px auto 0;
}

.error-footer-text p {
  margin-top: 20px;
}

/* Dezent pulsierende Animation für das Logo */
@keyframes pulseSlow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* Hilfsklasse für Links im Text */
.text-link {
  color: var(--logo-purple);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--transition-smooth);
}

.text-link:hover {
  border-bottom-color: var(--logo-purple);
}

/* --- CONTACT PAGE PREMIUM REFINEMENT --- */
/* --- CONTACT PAGE PREMIUM REFINEMENT (v4.1) --- */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 50px;
  align-items: stretch;
  margin-top: 40px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 30px; /* Mehr Platz zwischen den Karten */
}

/* Die Karten links: Jetzt rund und mit Farbstreifen */
.contact-info .info-card {
  position: relative;
  overflow: hidden; /* Wichtig für den Streifen */
  margin-bottom: 0;
  text-align: center;
  padding: 50px 30px;
  background: var(--white);
  border-radius: var(--radius-lg); /* Schön rund wie die anderen */
  box-shadow: var(--shadow-md);
  transition: var(--transition-smooth);
  border: 1px solid rgba(0, 0, 0, 0.02);
}

/* Der Farbstreifen oben (wie bei den selection-cards) */
.contact-info .info-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--logo-purple); /* Standard: Lila */
}

/* Optional: Die zweite Karte (Sitz) in Grün für Abwechslung */
.contact-info .info-card:nth-child(2)::before {
  background: var(--primary-color);
}

.contact-info .info-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.contact-info .card-icon {
  font-size: 3rem;
  margin-bottom: 15px;
  display: block;
}

/* Rechte Box (FAQ) bleibt konsistent */
.contact-extra .detail-view-wrapper {
  padding: 50px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: none;
  position: relative;
  overflow: hidden;
}

/* Auch hier der Streifen oben für das "Set-Gefühl" */
.contact-extra .detail-view-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--logo-purple);
}

@media (max-width: 991px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
  }
}

/* --- UNIVERSAL SCROLL REVEAL SYSTEM --- */

.reveal-item {
    opacity: 0;
    visibility: hidden;
    filter: blur(15px);
    transform: translateY(40px);
    /* Transition für das Ausblenden (schneller) */
    transition: all 0.4s ease-in; 
    will-change: opacity, transform, filter;
}

.reveal-item.is-visible {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transform: translateY(0) !important;
    transform: translateX(0) !important;
    /* Transition für das Einblenden (schöner/langsamer) */
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-left { transform: translateX(-80px) translateY(40px); }
.reveal-right { transform: translateX(80px) translateY(40px); }

/* Delays nur, wenn is-visible aktiv ist */
.reveal-item.is-visible.delay-100 { transition-delay: 0.1s; }
.reveal-item.is-visible.delay-200 { transition-delay: 0.2s; }
.reveal-item.is-visible.delay-300 { transition-delay: 0.3s; }
.reveal-item.is-visible.delay-400 { transition-delay: 0.4s; }
.reveal-item.is-visible.delay-500 { transition-delay: 0.5s; }
.reveal-item.is-visible.delay-600 { transition-delay: 0.6s; }
.reveal-item.is-visible.delay-700 { transition-delay: 0.7s; }
.reveal-item.is-visible.delay-800 { transition-delay: 0.8s; }
.reveal-item.is-visible.delay-900 { transition-delay: 0.9s; }
.reveal-item.is-visible.delay-1000 { transition-delay: 1.0s; }