/* ==========================================================================
   components.css – Wiederverwendbare UI-Komponenten
   ==========================================================================
   INHALTSVERZEICHNIS
   --------------------------------------------------------------------------
   1. Buttons (Primär / Klein)
   2. Panels (Textpanel)
   3. Cards (Startseite „Was wir tun“)
   4. Marker (Mint & Purple Hintergründe)
   5. Wave Divider (Hero)
   6. Grid Helfer (Card-Grid)
   7. Bilder
   8. FAQ ACCORDION – PFEILE
   9. PDF-Button – größer + Marker-Hintergrund
   ========================================================================== */


/* ==========================================================================
   1. BUTTONS
   ========================================================================== */

.btn-primary-small {
    background: var(--farbe-mint-kraeftig);
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-m);
    color: var(--color-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-block;
    transition: 0.2s;
}

.btn-primary-small:hover {
    background: var(--farbe-mint-dunkel);
}


/* ==========================================================================
   2. PANELS
   ========================================================================== */

.panel {
    background: var(--color-panel);
    padding: var(--spacing-l);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-soft);
}

.panel-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text);
}


/* ==========================================================================
   3. CARDS – Startseite
   ========================================================================== */

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-l);
}

.card {
    background: var(--color-panel);
    padding: var(--spacing-l);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-soft);
    text-align: left;
    transition: 0.2s;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.card h3 {
    margin-top: 0;
    font-family: var(--font-family-title);
    font-size: 1.3rem;
}


/* ==========================================================================
   4. MARKER
   --------------------------------------------------------------------------
   Der Marker wird durch ein Hintergrundbild erzeugt, das hinter dem Text
   positioniert ist. Die Bilder müssen in assets/img/ liegen.
   ========================================================================== */

.marker {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center left;
}
/* Basis für alle Marker-Hintergründe */
.marker-base {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;   /* komplette Marker-Grafik in der Höhe sichtbar */
    padding: 1.25rem 1.6rem;      /* genug Platz links/rechts, damit nichts abgeschnitten wird */
}

.marker-bg {
    background-image: var(--marker-purple);
    background-repeat: no-repeat;

    /* WICHTIG: größer skalieren, damit rechts & links nichts abgeschnitten wird */
    background-size: 100% 80%;

    /* weiter nach links verschieben */
    background-position: -1px 16px;

    /* Abstand um den Text herum verkleinern, damit der Marker „rausläuft“ */
    padding: 1.15rem 2.45rem;

    display: inline-block;
}


.marker-mint {
    background-image: var(--marker-mint);
}

.marker-purple {
    background-image: var(--marker-purple);
}
/* Marker für Navigation */
.marker-nav {
    padding: 0.2rem 0.4rem;
    background-image: var(--marker-mint);
    background-repeat: no-repeat;
    background-size: 100% 90%;
    background-position: center;
    border-radius: var(--radius-s);
}
/* Marker für Hero Button */
.hero-cta {
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text);
}

/* Hero-spezifischer Marker */
.marker-hero {
    background-image: var(--marker-mint); /* oder direkt url(...) */
    background-size: 100% 95%;
}

/* Kombination: Button + Marker */
.hero-cta.marker-hero {
    /* falls nötig: hero-spezifisches Padding noch etwas größer */
    padding: 0.3rem 1.8rem;
}


/* ==========================================================================
   5. WAVE DIVIDER (HERO)
   ========================================================================== */

.wave-divider {
    display: block;
    width: 100%;
    margin-top: -4px;
}
/* ============================================================
   WAVE DECORATION (WHITE)
   Hinweis: CSS liegt unter assets/css/, Bilder unter assets/img/
   ============================================================ */

.section.has-wave-top,
.section.has-wave-bottom {
  position: relative;
  overflow: hidden;
}

.section.has-wave-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 90px;
  background: url("../img/wave-white-top.svg") no-repeat center top;
  background-size: 100% 50%;
  pointer-events: none;
  z-index: 1;
}

.section.has-wave-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 90px;
  background: url("../img/wave-white-bottom.svg") no-repeat center bottom;
  background-size: 100% 50%;
  pointer-events: none;
  z-index: 1;
}

.section.has-wave-top > .container,
.section.has-wave-bottom > .container {
  position: relative;
  z-index: 2;
}



/* ==========================================================================
   6. GRID HELFER
   ========================================================================== */

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-l);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-l);
}

@media (max-width: 900px) {
    .card-grid {
        grid-template-columns: 1fr;
    }

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   7. Bilder
   ========================================================================== */
/* ============================================================
   GLOBALE SEKTIONBILDER (für S2, S3, S4 ...)
   ============================================================ */

.img-section {
    width: 94%;
    height: 540px;              /* Einheitliche Bildhöhe */
    object-fit: cover;          /* Crop statt Verzerren */
    border-radius: 24px;        /* Einheitlicher Radius */
    box-shadow: var(--shadow-soft);
    display: block;
}

/* ============================================================
   8. FAQ ACCORDION – PFEILE
   ============================================================ */

.section-faq .faq-list {
    max-width: none;
    margin: 0;
}

.faq-item {
    background: #ffffff;
    border-radius: 18px;
    padding: 1rem 1.25rem;
    margin-bottom: var(--spacing-m);
    box-shadow: var(--shadow-soft);
}

/* SUMMARY */
.faq-item summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    position: relative;
    padding-left: 2rem;
    user-select: none;
}

/* Standard-Marker entfernen (Chrome/Safari) */
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Pfeil – geschlossen (nach unten) */
.faq-item summary::before {
    content: "▼";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: var(--farbe-mint-kraeftig);
    transition: transform 0.2s ease;
}

/* Pfeil – geöffnet (nach oben) */
.faq-item[open] summary::before {
    content: "▲";
}

/* Antworttext */
.faq-item p {
    margin-top: 0.75rem;
    margin-bottom: 0;
    line-height: 1.6;
}
.faq-item summary:hover {
    color: var(--farbe-mint-kraeftig);
}
/* ============================================
   9. PDF-Button – größer + Marker-Hintergrund
/* =========================================================
   PDF-BUTTON – Marker wie im Hero ("Mitglied werden")
   ========================================================= */

.form-actions {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.button-pdf {
    position: relative;
    display: inline-block;

    padding: 0.6rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2b32;

    background: none;
    border: none;
    cursor: pointer;
    z-index: 1;
}

/* Marker-Hintergrund (Pinselgrafik) */
.button-pdf::before {
    content: "";
    position: absolute;

    left: -28px;                 /* Marker links überstehen */
    right: -28px;                /* Marker rechts überstehen */
    top: 50%;

    height: 44px;                /* Höhe wie im Hero */
    transform: translateY(-50%);

    background-image: url("../img/marker-bg-mint.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;

    z-index: -1;
}

/* Optional: Hover wie im Hero */
.button-pdf:hover {
    transform: translateY(-1px);
}