/*
 Theme Name:   Vantage Child
 Description:  Ein Child Theme für das Vantage Theme.
 Author:       Andreas Krug
 Template:     vantage
 Version:      1.0.0
 Text Domain:  vantage-child
*/

.page-id-511 nav {
    display: none;
}

.page-id-511 footer {
    display: none;
}

.page-id-511 logo {
    display: none;
}

.single .blog-meta {
    visibility: hidden;
}


/**Menu**/
.mobile-nav-frame {
    background-color: #fce3db !important;
}
/**
 * Footer
 */
#footer-widgets .widget .widget-title {
    margin-bottom: 7px;
!important;
}

footer {
    padding-top: 0 !important;
}

div.vertikal-zentrierte-logos {
    display: flex !important;
    align-items: center !important;
}


/**
* Global Styles
 */
body.kb-site-bg-white div#main {
    background-color: white;
}

div.kb-kindertagespflege-accordions .sow-accordion-panel-header-container {
    font-weight: bolder;
}

/* Definition der dezenteren "Pochen"-Animation */
@keyframes kachel-pochen-dezent {
    0% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.02); /* Von 1.07 auf 1.04 reduziert */
    }
    100% {
        transform: scale(1.01); /* Von 1.04 auf 1.02 reduziert */
    }
}

/* Kachel im Normalzustand */
.kb-kindertagespflege-kachel {
    transition: all 0.3s ease-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Kachel beim Hovern */
.kb-kindertagespflege-kachel:hover {
    animation: kachel-pochen-dezent 0.4s ease-out forwards;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Schatten auch etwas reduziert */
    cursor: pointer;
}

/* 1. Die Kachel für die Positionierung vorbereiten */
.panel-widget-style.kb-kindertagespflege-kachel {
    position: relative !important; /* Diese Regel ist weiterhin entscheidend! */
    transition: all 0.3s ease-in-out;
}

/* 2. Der Hover-Effekt für die Kachel */
.panel-widget-style.kb-kindertagespflege-kachel:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

/* 3. Den neuen Pfeil positionieren und stylen */
.kachel-pfeil {
    /* Positionierung */
    position: absolute;
    right: 20px;
    bottom: 15px;

    /* Aussehen */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 25px;
    font-weight: bold;
    color: white;
    line-height: 1; /* Verhindert unerwünschten Zeilenabstand */

    /* Verhalten */
    transition: all 0.3s ease-in-out;
}

/* 4. Den Pfeil beim Hovern der Kachel bewegen */
.panel-widget-style.kb-kindertagespflege-kachel:hover .kachel-pfeil {
    transform: translateX(5px);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}


/*************************************************************************************
 * Startseite
 *************************************************************************************/
body.kb-homepage div#main {
    background-color: #fce3dc;
}


.sow-blog-posts article {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

}

.sow-blog-posts .sow-entry-thumbnail {
    flex: 0 0 200px;
    margin-right: 15px;
}

.sow-blog-posts .sow-blog-content-wrapper {
    flex: 1;
}

.sow-blog-posts article {
    background-color: #fcceb3;
    padding: 15px;

}

@media (max-width: 600px) {
    .sow-blog-posts article {
        flex-direction: column;
    }

    .sow-blog-posts .sow-entry-thumbnail {
        margin-right: 0;
        margin-bottom: 15px;
        width: 100%;
    }

    div.sow-entry-thumbnail img {
        width: 100%;
    }
}

/* Kacheln Startseite */
div.kb-bereiche-row {
    padding-top: 0;
    padding-bottom: 0;
}

div.kb-bereiche-row div.panel-widget-style {
    min-height: 135px;
}

#kb-bereiche-title {
    margin-bottom: 15px;
}

#kb-news-second-row {
    padding-bottom: 25px;
}


/*************************************************************************************
 * Kindertagespflege Seite und Unterseiten (Formen und Kinderbetreuungspersonen)
 *************************************************************************************/
div#kb-kindertagespflege-vorteile-title .widget-title {
    color: #1d5a8c;
}

div#kb-kindertagespflege-vorteile-title .sow-accordion-panel-header-container {
    font-weight: bolder;
}

div.kb-formen-rows-image-alignment {
    display: flex;
!important;
    align-items: center !important;
}


/*************************************************************************************
 * Kindertagespflegeperson Seite
 *************************************************************************************/
/* Wählt den Container aus, der die Liste enthält, und gestaltet ihn als Notizzettel */
.kb-kindertagespflegeperson-list {
    background-color: #fff7d1; /* Ein typisches "Haftnotiz"-Gelb */
    padding: 25px !important; /* Innenabstand, damit der Text nicht am Rand klebt */
    font-family: 'Patrick Hand', 'Comic Sans MS', cursive; /* Eine handschriftlichere Schriftart */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Ein leichter Schatten für 3D-Effekt */
    max-width: 700px; /* Begrenzt die Breite, damit es nicht über den ganzen Bildschirm geht */
    margin: 30px auto;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    /* Zentriert den Zettel auf der Seite und gibt ihm etwas Abstand */
}

/* Stil für die Liste innerhalb des Notizzettels */
.kb-kindertagespflegeperson-list ul {
    list-style: none;
    padding-left: 0; /* Entfernt den linken Einzug der Liste */
    margin-left: 0;
}

/* Stil für die einzelnen Listenpunkte */
.kb-kindertagespflegeperson-list li {
    padding-bottom: 12px; /* Etwas Abstand zwischen den Punkten */
    font-size: 1.1em; /* Macht die Schrift etwas größer und besser lesbar */
    border-bottom: 1px dotted #c9c3a7; /* Eine gepunktete Linie wie auf einem Notizblock */
    margin-bottom: 12px;
}

/* Der letzte Punkt braucht keine Linie und keinen Abstand darunter */
.kb-kindertagespflegeperson-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.kb-kindertagespflegeperson-list li::before {
    content: '✔';
    color: #28a745;
    margin-right: 10px;
    margin-left: -25px;
    font-weight: bold;
}

.kb-kindertagespflegeperson-ul ul {
    margin-bottom: 10px !important;
}

/* Die Kacheln der Seite */
.kb-kindertagespflegeperson-kachel-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 30px !important;
    min-height: 300px;
}

.kb-kindertagespflegeperson-kachel-row .panel-grid-cell {
    display: flex !important;
    flex-direction: column !important;
}

.kb-kindertagespflegeperson-kachel-row .panel-grid-cell .panel-cell-style {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;

    justify-content: center !important;

    align-items: center !important;
    text-align: center !important;

    padding: 2.5em !important;
    box-shadow: 0 4px 6px 2px rgba(0, 0, 0, 0.05), 0 2px 4px 4px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease !important;
}


/************************************************************************************************************************************
 *
 * Großtagespflege Seite
 *
 ************************************************************************************************************************************/
/* Die Kachel (das Widget) stylen */
.kb-grosstagespflege-kachel-row .so-panel {
    width: 100%; /* Nimmt die volle Breite des Containers ein */
    /* Optik der Kachel */
    box-shadow: 0 4px 6px 2px rgba(0, 0, 0, 0.05), 0 2px 4px 4px rgba(0, 0, 0, 0.04) !important;
    background: #dcf1fe; /* Wichtig, damit der Schatten gut aussieht */
    /* Zentrierung des Inhalts */
    text-align: center !important;
}

/* Grund-Styling für die Tabelle */
.vergleichstabelle {

    color: #1d5a8c;
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0; /* Etwas Abstand oben und unten */
    font-family: sans-serif; /* Standard-Schriftart, passt sich meist an */
}

/* Styling für die Kopfzeile */
.vergleichstabelle th {
    background-color: #dcf1fe; /* Heller grauer Hintergrund für die Header */
    padding: 15px;
    text-align: left;
    font-weight: bold;
    border-bottom: 2px solid #dcf1fe;
}

td.klassische-zelle {
    width: 30%;
}

/* Styling für die Zellen */
.vergleichstabelle td {
    padding: 15px;
    border: 1px solid #dcf1fe; /* Dünne Linie zwischen den Zeilen */
    vertical-align: top;
}

/* Spezielles Styling für die Vorteils-Spalte */
.vergleichstabelle .vorteil-zelle {
    background-color: #f9fff6; /* Sehr heller grüner Hintergrund für die Vorteile */
}

.vergleichstabelle .vorteil-zelle strong {
    color: #2E7D32; /* Dunkelgrüne Farbe für die Hervorhebung */
}

/* WICHTIG: Macht die Tabelle auf mobilen Geräten lesbar */
@media (max-width: 680px) {
    .vergleichstabelle thead {
        display: none; /* Kopfzeile auf Mobilgeräten ausblenden */
    }

    .vergleichstabelle tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #ddd;
    }

    .vergleichstabelle td {
        display: block;
        text-align: left;
        border-bottom: 1px solid #eee;
    }

    .vergleichstabelle td:last-child {
        border-bottom: none;
    }

    /* Fügt die "Überschrift" vor jeder Zelle wieder ein */
    .vergleichstabelle td[data-label]::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
        color: #555;
    }

    td.klassische-zelle {
        width: inherit;
    }
}

/* ----------------------------------------- */
.gtp-karten-container-2col {
    display: flex; /* Aktiviert das flexible Layout-Modell */
    flex-wrap: wrap; /* Erlaubt den Karten, in die nächste Zeile umzubrechen */
    gap: 25px; /* Der Abstand zwischen den Karten */
    margin: 2em 0;
    font-family: sans-serif;
    color: #1d5a8c;
}

.gtp-karte-2col {
    min-height: 275px;
    /* Jede Karte soll 50% der Breite einnehmen, abzüglich des halben Abstands */
    flex-basis: calc(50% - 12.5px);
    flex-grow: 1;

    /* Visuelles Styling der Karte */
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 20px 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Styling für die Inhalte in der Karte */
.karten-titel-2col {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
}

.standort-liste-2col {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    line-height: 1.6;
}

.standort-liste-2col li {
    margin-bottom: 20px;
}

.standort-liste-2col a {
    color: #2E7D32; /* Beispiel-Linkfarbe */
    text-decoration: none;
    font-weight: bold;
}

/* Sorgt dafür, dass die Karten auf kleinen Bildschirmen untereinander stehen */
@media (max-width: 768px) {
    .gtp-karte-2col {
        flex-basis: 100%; /* Jede Karte nimmt die volle Breite ein */
    }
}


/************************************************************************************************************************************
 *
 * Kontakt Seite
 *
 ************************************************************************************************************************************/
div#kb-kontakt-contact-row {
    display: flex !important;
    align-items: center !important;
}

/* Zentriert den gesamten Listen-Block */
#kb-kontakt-unser-angebot-list-col {
    text-align: center;
}

/* Stellt sicher, dass die Liste sich wie ein Block verhält,
   der zentriert werden kann, der Text innen aber linksbündig bleibt */
#kb-kontakt-unser-angebot-list-col ul {
    display: inline-block;
    text-align: left;
    list-style: none;
}

#kb-kontakt-unser-angebot-list-col ul li {
    padding-bottom: 10px;
}

/* -- HIER KÖNNEN SIE DIE FARBEN ANPASSEN -- */
:root {
    --karte-hintergrund: #ffffff; /* Weißer Hintergrund für die Karte */
    --karte-rand-farbe: #eaeaea; /* Farbe des Kartenrahmens */
    --karte-schatten: rgba(0, 0, 0, 0.08); /* Farbe des Schattens */
    --name-farbe: #2c3e50; /* Dunkle, fast schwarze Farbe für den Namen */
    --rolle-farbe: #7f8c8d; /* Graue Farbe für die Rolle */
    --button-hintergrund: #e67e22; /* Warme orange Akzentfarbe für den Button */
    --button-hintergrund-hover: #d35400; /* Etwas dunkleres Orange beim Drüberfahren */
}

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

.team-karten-container {
    display: grid;
    /* Erstellt automatisch so viele Spalten wie passen, jede mind. 250px breit */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px; /* Abstand zwischen den Karten */
    margin: 2em 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.team-karte {
    background-color: var(--karte-hintergrund);
    border: 1px solid var(--karte-rand-farbe);
    border-radius: 12px; /* Etwas rundere Ecken */
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 10px var(--karte-schatten);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-karte:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px var(--karte-schatten);
}

.team-foto {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* Macht das Bild rund */
    object-fit: cover; /* Stellt sicher, dass das Bild den Kreis füllt, ohne sich zu verzerren */
    margin-bottom: 20px;
    border: 3px solid var(--karte-rand-farbe);
}

.team-name {
    font-size: 1.25em;
    font-weight: 600;
    color: var(--name-farbe);
    margin: 0 0 5px 0;
}

.team-rolle {
    font-size: 0.95em;
    color: var(--rolle-farbe);
    margin: 0 0 20px 0;
    font-style: italic;
}

.team-email-button {
    display: inline-block;
    background-color: #b6e5d3;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.team-email-button:hover {
    background-color: #91b5a7;
    color: #ffffff;
}


/************************************************************************************************************************************
 *
 * Elternberatung Seite
 *
 ************************************************************************************************************************************/
.kb-elternberatung-kacheln-container {
    border: 1px solid #eaeaea;
    padding: 20px 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.kb-elternberatung-kacheln-container:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px var(--karte-schatten);
}


div.kb-elternbetreung-h2 h2 {
    margin-bottom: 10px;
}

div.kb-elternbetreung-h2 div.decoration {
    margin-top: 0 !important;
}

button.kb-elternberatung-beitragsliste-btn {
    background-color: #ffd28f !important;
    border: none !important;
    font-weight: bold !important;
    color: #1d5a8c !important;
}

button.kb-elternberatung-beitragsliste-btn:hover {
    background-color: #ffd28f !important;
    color: #145374 !important;
    cursor: pointer !important;
}

#kb-elternberatung-image-center .so-widget-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

:root {
    --text-farbe: #1e5a8c;
    --rand-farbe: #e0e0e0;
    --titel-farbe: #1e5a8c; /* Beispiel: Ein dunkles Blau */
    --loesung-hintergrund: #e3f3c0;
}

/* ----------------------------------------- */
.problem-loesung-section {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-farbe);
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 8px;
    margin: 2em 0;
}

.problem-loesung-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.problem-loesung-section .intro-text {
    line-height: 1.6;
    margin-bottom: 30px;
}

.vergleichs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei gleich breite Spalten */
    gap: 30px; /* Abstand zwischen den Spalten */
}

.grid-spalte {
    padding: 20px;
}

.grid-spalte.herausforderungen {
    background-color: #f9f9f9;
}

.grid-spalte.loesungen {
    background-color: var(--loesung-hintergrund);
    border-radius: 8px;
}

.grid-spalte h4 {
    font-size: 1.3em;
    color: var(--titel-farbe);
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--rand-farbe);
}

.grid-spalte ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.grid-spalte li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    line-height: 1.5;
}

.grid-spalte .icon {
    font-size: 1.5em;
    margin-right: 15px;
    margin-top: -2px;
}

/* Responsive: Auf kleinen Bildschirmen werden die Spalten untereinander dargestellt */
@media (max-width: 768px) {
    .vergleichs-grid {
        grid-template-columns: 1fr; /* Nur noch eine Spalte */
    }

    .problem-loesung-section {
        padding: 20px;
    }
}


/************************************************************************************************************************************
 *
 * Fachliche Beratung Seite
 *
 ************************************************************************************************************************************/
:root {
    --tab-akzentfarbe: #ffd28f; /* für den aktiven Tab */
    --tab-hintergrund: #f1f1f1;
    --tab-textfarbe: #333;
    --karte-hintergrund: #ffffff;
    --karte-rand-farbe: #eaeaea;
}

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

.tab-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 2em 0;
    color: var(--text-farbe);
}

.tab-buttons {
    display: flex;
    border-bottom: 2px solid var(--tab-hintergrund);
}

.tab-button {
    background-color: var(--tab-hintergrund);
    border: 1px solid var(--tab-hintergrund);
    border-bottom: none;
    padding: 14px 20px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    color: var(--text-farbe);
    transition: background-color 0.3s ease;
}

.tab-button:hover {
    background-color: #ddd;
    border-color: #ddd;
}

.tab-button.active {
    background-color: #fff;
    border: 2px solid var(--tab-hintergrund);
    border-bottom: 2px solid #fff; /* Lässt den Tab mit dem Inhalt verschmelzen */
    position: relative;
    top: 2px;
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--tab-akzentfarbe);
}

.tab-content {
    display: none; /* Standardmäßig alle Inhalte ausblenden */
    padding: 25px;
    border: 2px solid var(--tab-hintergrund);
    border-top: none;
}

.tab-content.active {
    display: block; /* Nur den aktiven Inhalt anzeigen */
}

/* Styling für das Akkordeon im "Eltern"-Tab */
.accordion details {
    margin-bottom: 10px;
    border: 1px solid var(--karte-rand-farbe);
}

.accordion summary {
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
    list-style: none; /* Standard-Pfeil entfernen */
    background-color: var(--tab-akzentfarbe);
}

.accordion summary:hover {
    background-color: #e6b87c;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion summary::before {
    content: '+';
    margin-right: 10px;
}

.accordion details[open] summary::before {
    content: '−';
}

.accordion .details-content {
    padding: 20px 20px 20px 20px;
    line-height: 1.6;
}

.accordion .details-content ul {
    margin: 0;
}

.accordion .details-content ul li {
    padding-bottom: 5px;
    padding-top: 5px;
}

/* Styling für die Karten im "KTPP"-Tab */
.ktpp-karten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.ktpp-karte {
    background-color: var(--karte-hintergrund);
    border: 1px solid var(--karte-rand-farbe);
    padding: 20px;
    text-align: center;
}

.ktpp-karte .icon {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: var(--tab-akzentfarbe);
}

.ktpp-karte h4 {
    margin-top: 0;
    font-size: 1.2em;
}

@media (max-width: 600px) {
    .tab-buttons {
        flex-direction: column; /* Stapelt die Buttons untereinander */
    }

    .tab-button {
        margin-right: 0; /* Entfernt den seitlichen Abstand zwischen den Buttons */
        border-radius: 0; /* Setzt die Ecken zurück für einen sauberen Look */
    }

    .tab-button:first-child {
        border-radius: 8px 8px 0 0; /* Obere Ecken nur beim ersten Button */
    }

    /* Logik für den aktiven Button anpassen */
    .tab-button.active {
        top: 0;
        border: 2px solid var(--tab-hintergrund);
        border-bottom: 2px solid var(--tab-akzentfarbe); /* Linie unten für den aktiven Tab */
    }

    .tab-content {
        hyphens: auto;
        -webkit-hyphens: auto; /* Für ältere Browser */
        -ms-hyphens: auto; /* Für Microsoft Browser */
    }

    .ktpp-karten-grid {
        display: grid;
        grid-template-columns: none;
        gap: 20px;
    }
}


/************************************************************************************************************************************
 *
 * Vermittlungsseite
 *
 ************************************************************************************************************************************/
/* Alle Variablen haben jetzt den Prefix "vm-" */
:root {
    --vm-primary-color: #cae2ff; /* Ein freundliches Blau */
    --vm-bubble-color: #4b3c90;
    --vm-bubble-color-light: #f3f1fe;
    --vm-secondary-color: #f8f9fa; /* Heller Hintergrund für Blöcke */
    --vm-text-color: #333;
    --vm-heading-color: #2c3e50;
    --vm-border-color: #dee2e6;
}

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

.vermittlung-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--vm-text-color);
    line-height: 1.7;
}

.vermittlung-page h3 {
    color: var(--vm-heading-color);
    font-size: 1.8em;
    text-align: center;
    margin: 40px 0 20px 0;
}

.intro-text {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
    font-size: 1.1em;
}

/* --- Styling für den Prozess --- */
.prozess-schritte {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.schritt {
    text-align: center;
    flex-basis: 250px;
    border: 1px solid #eaeaea;
    padding: 20px 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.schritt-nummer {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background-color: var(--vm-bubble-color);
    color: white;
    font-weight: bold;
    margin-bottom: 10px;
}

/* --- Styling für den Little Bird Block --- */
.little-bird-block {
    display: flex; /* Bleibt flex, um den Inhalt vertikal zu zentrieren */
    align-items: center;
    justify-content: center; /* Zentriert den Text-Container horizontal */
    background-color: var(--vm-bubble-color-light);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--vm-bubble-color-light);
}

.little-bird-text {
    flex: 1;
    max-width: 70%;
    text-align: center; /* Zentriert Überschrift, Text und Button */
}

.little-bird-qr {
    flex-basis: 150px;
    text-align: center;
}

.little-bird-qr img {
    max-width: 150px;
    height: auto;
}

.little-bird-button {
    display: inline-block;
    background-color: var(--vm-bubble-color);
    color: white !important;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
}

.little-bird-button:hover {
    background-color: #3a2c70; /* Etwas dunkleres Blau beim Drüberfahren */
    color: white !important;
    text-decoration: none;
}

/* --- Styling für die Qualitäts-Kacheln --- */
.qualitaet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.qualitaet-kachel {
    background-color: #fff;
    border: 1px solid var(--vm-border-color);
    border-radius: 8px;
    padding: 25px;
}

.qualitaet-kachel .icon {
    font-size: 2.5em;
    color: var(--vm-primary-color);
}

.qualitaet-kachel h4 {
    margin: 10px 0;
    font-size: 1.2em;
    color: var(--vm-heading-color);
}

.qualitaet-kachel ul {
    padding-left: 20px;
    margin: 0;
}

.schritt {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px var(--karte-schatten);
}


/************************************************************************************************************************************
 *
 * Qualifizierung und Weiterbildung Seite
 *
 ************************************************************************************************************************************/
:root {
    --qw-primary-color: #1d5a8c; /* Ein professionelles Dunkelblau */
    --qw-secondary-color: #f8f9fa; /* Heller Hintergrund für Blöcke */
    --qw-accent-color: #7EC588; /* Warme Akzentfarbe (z.B. Orange) */
    --qw-text-color: #1d5a8c;
    --qw-heading-color: #1d5a8c;
    --qw-border-color: #dee2e6;
    --qw-background-color: #e3f3c0;
}

.qw-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--qw-text-color);
    line-height: 1.7;
}

.qw-page h3 {
    color: var(--qw-heading-color);
    font-size: 1.8em;
    text-align: center;
    margin: 40px 0 20px 0;
}

.qw-page h4 {
    color: var(--qw-heading-color);
    font-size: 1.3em;
    margin-top: 30px;
}

.qw-intro-text {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
    font-size: 1.1em;
}

/* --- Kompetenzen-Liste --- */
.qw-kompetenzen-liste {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.qw-kompetenzen-liste li {
    display: flex;
    align-items: center;
}

.qw-kompetenzen-liste .icon {
    font-size: 1.5em;
    color: var(--qw-primary-color);
    margin-right: 10px;
}

/* --- Akkordeon für Kursinhalte --- */
.qw-accordion details {
    margin-bottom: 10px;
    background-color: #fff;
}

.qw-accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
    list-style: none;
    background-color: var(--qw-background-color);
}
.qw-accordion summary:hover {
    background-color: #c7ddaf;
}

.qw-accordion summary::-webkit-details-marker {
    display: none;
}

.qw-accordion summary::after {
    content: '+';
    font-size: 1.5em;
}

.qw-accordion details[open] summary::after {
    content: '−';
}

.qw-accordion .qw-details-content {
    padding: 20px 20px 20px 20px;
    line-height: 1.6;
}

.qw-accordion .qw-details-content ul li{
    padding-bottom: 5px;
    padding-top: 5px;
}

/* --- Call-to-Action Block für aktuellen Kurs --- */
.qw-kurs-cta {
    border: 1px solid var(--qw-border-color);
    border-left: 5px solid var(--qw-accent-color);
    padding: 25px;
    margin: 40px 0;
}
.qw-kurs-cta {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px var(--karte-schatten);
}

.qw-kurs-cta h4 {
    margin-top: 0;
    color: var(--qw-accent-color);
}

/* --- Weiterbildungs-Block --- */
.qw-weiterbildung-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media (max-width: 768px) {
    .qw-weiterbildung-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Kinderschutz-Block --- */
.qw-kinderschutz-block {
    background-color: var(--qw-secondary-color);
    border-top: 3px solid var(--qw-primary-color);
    padding: 25px;
    margin-top: 40px;
}

.qw-kinderschutz-block blockquote {
    border-left: 3px solid var(--qw-primary-color);
    padding-left: 15px;
    font-style: italic;
    color: #555;
}