/* -----------------------------------------------------------------------------
   betreuungsverein.eu — eigene Styles
   Einzige Datei fuer handgeschriebenes CSS. Fremdcode liegt in vendor/css/
   und wird nur als ganze Datei getauscht, nie einzeln editiert.
   Herkunft: Custom-CSS-Feld des frueheren Blocs-Projekts (Blocs abgeloest 22.07.2026).
----------------------------------------------------------------------------- */

a:link, a:visited {
    text-decoration: none;
   }
   
   .notextdecoration a:link, a:visited {
    text-decoration: none;
   }
   
   .hr1 {
       border: 0;
       max-width:450px;
       margin-top: 5px;
       margin-bottom: 5px;
       background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(82, 72, 131, 1), rgba(0, 0, 0, 0));
   }

   


   /* TEXT MARKIERUNG FÜR SMARTPHONE UND DESKTOP LIKE BETREUUNGSVEREIN TEXT HEADER*/
   /* Stile für Smartphones */
   @media (max-width: 768px) {
       .impmarker-mobile {
           background-color: var(--swatch-var-5341);
           color: var(--swatch-var-4532) !important;
           padding-top: 0px;
           padding-right: 0px;
           padding-left: 0px;
           border-radius: 10px 10px 10px 10px;
           border-width: 10px 30px 10px 30px;
           border-color: var(--swatch-var-5341) !important;
           border-style: solid;
           font-weight: bold;
       }

       .impmarker-mobile-white {
        background-color: #ffffff;
           color: var(--swatch-var-5341) !important;
           padding-top: 0px;
           padding-right: 0px;
           padding-left: 0px;
           border-radius: 10px 10px 10px 10px;
           border-width: 10px 30px 10px 30px;
           border-color: #ffffff !important;
           border-style: solid;
           font-weight: bold;
       }
   }
   
   /* Stile für Tablets und Desktops */
   @media (min-width: 769px) {
       .impmarker-desktop {
           background-color: var(--swatch-var-5341);
           color: var(--swatch-var-4532) !important;
           padding-top: 0px;
           padding-right: 0px;
           padding-left: 0px;
           border-radius: 10px 10px 10px 10px;
           border-width: 10px 30px 10px 30px;
           border-color: var(--swatch-var-5341) !important;
           border-style: solid;
           font-weight: bold;
       }

       .impmarker-desktop-white {
        background-color: #ffffff;
           color: var(--swatch-var-5341) !important;
           padding-top: 0px;
           padding-right: 0px;
           padding-left: 0px;
           border-radius: 10px 10px 10px 10px;
           border-width: 10px 30px 10px 30px;
           border-color: #ffffff !important;
           border-style: solid;
           font-weight: bold;
       }
    
   }
   

   /* LINK MARKER UM TEXTE MIT .linkmarker IN EINER FARBE ZU MARKIEREN */
   .linkmarker {
    background-color: var(--swatch-var-5341);
    color: var(--swatch-var-4532) !important;
    border-width: 2px 10px 2px 10px;
    border-style: solid;
    border-color: var(--swatch-var-5341) !important;
    border-radius: 10px 10px 10px 10px;
    text-decoration: none;
}



/* Link Signalisierung durch Mauspointer */
.clickable {
 cursor: pointer;
}


/* Link Zoomeffekt */
.zoom-effect {
 transition: transform 0.3s ease; /* Glatte Animation */
}

.zoom-effect:hover {
 transform: scale(1.1); /* Vergrößert das Element um 10% */
}

/* =============================================================================
   FAQ-Akkordeon (Startseite, #accordion-48975)
   Umgebaut am 23.07.2026. Basis bleibt das Bootstrap-Collapse-Verhalten
   (inkl. data-bs-parent: es ist immer nur ein Punkt offen).
   ========================================================================== */

.faq-accordion {
  /* Hoehe des sichtbaren Teasers im zugeklappten Zustand */
  --faq-teaser: 3.1em;
}

/* --- Abstand zwischen den Punkten --- */
.faq-accordion .card {
  margin-bottom: 18px;
  background: transparent;
  border: 0;
  overflow: visible;
}
.faq-accordion .card:last-child { margin-bottom: 0; }

/* --- Kopfzeile: einheitlich 10px abgerundet --- */
.faq-accordion .card-header {
  border-radius: 10px;
  border: 0;
  padding: 14px 20px;
  cursor: pointer;
  transition: filter .2s ease;
}
.faq-accordion .card-header:hover { filter: brightness(1.06); }

/* die Ueberschrift im Header traegt den Klick-Handler */
.faq-accordion .card-header .ak-header {
  margin: 0 !important;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: .6em;
}

/* --- Plus/Minus als Icon ---
   Bewusst aus zwei Balken gebaut statt als Schrift-Icon: unabhaengig davon,
   ob FontAwesome geladen ist, und der Uebergang Plus -> Minus laesst sich
   sauber animieren (der senkrechte Balken dreht sich weg). */
.faq-accordion .faq-toggle-icon {
  flex: 0 0 auto;
  position: relative;
  width: .62em;
  height: .62em;
  align-self: center;
}
.faq-accordion .faq-toggle-icon::before,
.faq-accordion .faq-toggle-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 1px;
}
.faq-accordion .faq-toggle-icon::before {          /* Querbalken - bleibt immer */
  width: 100%;
  height: .12em;
  transform: translate(-50%, -50%);
}
.faq-accordion .faq-toggle-icon::after {           /* Laengsbalken - macht das Plus */
  width: .12em;
  height: 100%;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .25s ease;
}
.faq-accordion [aria-expanded="true"] .faq-toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* --- Antworttext --- */
.faq-accordion .faq-body {
  padding: 16px 22px 20px;
}

/* Zugeklappt: erste Zeile bleibt sichtbar und laeuft nach unten aus.
   Bootstrap wuerde hier display:none setzen - bewusst ueberschrieben. */
.faq-accordion .collapse:not(.show) {
  display: block;
  height: var(--faq-teaser);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 35%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 35%, transparent 100%);
  opacity: .8;
  pointer-events: none;   /* der Teaser selbst ist nicht anklickbar */
}

/* Waehrend der Animation nicht unter die Teaser-Hoehe fallen - sonst
   springt die Box am Ende des Zuklappens sichtbar zurueck. */
.faq-accordion .collapsing {
  min-height: var(--faq-teaser);
  transition: height .32s ease;
}

/* Aufgeklappt: voller Text, kein Verlauf */
.faq-accordion .collapse.show {
  opacity: 1;
  -webkit-mask-image: none;
          mask-image: none;
}

@media (prefers-reduced-motion: reduce) {
  .faq-accordion .collapsing,
  .faq-accordion .faq-toggle-icon { transition: none; }
}


/* =============================================================================
   Mobile-Korrekturen (bis 767px)
   Der Blocs-Export ist ueber das Bootstrap-Grid grundsaetzlich responsiv;
   hier werden nur Stellen nachgezogen, die auf kleinen Screens klemmen.
   ========================================================================== */

@media (max-width: 767.98px) {

  /* Logo im Kopfbereich: .img-style bringt aus blocs.min.css ein
     margin-top:-28px mit. Auf dem Desktop unauffaellig, auf dem Handy
     ragt das Logo damit oben aus dem sichtbaren Bereich. */
  #herogrfx .img-style {
    margin-top: 0;
    width: auto;
    max-width: 260px;
  }

  /* FAQ: Frage und Antwort einheitlich linksbuendig statt Frage links /
     Antwort zentriert. Zentrierter Fliesstext liest sich auf schmalen
     Screens ausserdem schlechter. */
  .faq-accordion .faq-body p,
  .faq-accordion .faq-body {
    text-align: left !important;
  }

  /* etwas mehr Luft zwischen den Punkten, dafuer kompaktere Kopfzeilen */
  .faq-accordion .card { margin-bottom: 14px; }
  .faq-accordion .card-header { padding: 12px 16px; }
  .faq-accordion .faq-body { padding: 14px 16px 16px; }

  /* Teaser darf zwei Zeilen zeigen - bei den langen Fragen wirkt eine
     einzelne Zeile sonst wie ein Darstellungsfehler. */
  .faq-accordion { --faq-teaser: 4.4em; }

  /* Abschnitts-Abstaende: blocs.min.css setzt bei .bloc-lg/.bloc-md
     100px oben und unten - auch auf dem Handy. Das sind 200px Luft pro
     Abschnitt und der Hauptgrund, warum die Seite mobil endlos scrollt. */
  .bloc-lg .container,
  .bloc-lg,
  .container.bloc-lg { padding-top: 52px; padding-bottom: 52px; }
  .bloc-md .container,
  .container.bloc-md { padding-top: 40px; padding-bottom: 40px; }
  .container.bloc-sm { padding-top: 20px; padding-bottom: 20px; }

  /* Kleine Deko-/Icon-Grafiken zentrieren. Die Blocs-Klassen im Markup
     sind text-sm-center / text-md-center - Bootstrap laesst die aber erst
     ab 576px bzw. 768px greifen, darunter bleibt alles linksbuendig. */
  .bloc .col > img.img-fluid:not(.d-block),
  .bloc .col > picture > img.img-fluid:not(.d-block) {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* Fliesstext auf schmalen Screens.
     blocs.min.css setzt Absaetze global auf 20px, die Blocs-Textklassen
     heben das auf 24px. Bei 375px Breite bleiben davon nur ~2,4 Woerter
     pro Zeile uebrig - gut lesbar sind 8-12. 18px ist immer noch deutlich
     groesser als der Browser-Standard und passt zur Zielgruppe, macht die
     Zeilen aber wieder lesbar. Desktop bleibt unveraendert. */
  .bloc p,
  .bloc li,
  .faq-accordion .faq-body p {
    font-size: 18px;
    line-height: 1.5;
  }
}