@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDarker: #1e282d;
    --textDark: #11488B;
    --textMedium: rgba(38, 50, 56, 0.7);
    --borderMedium: rgba(38, 50, 56, 0.2);
    --borderLight: rgba(38, 50, 56, 0.075);
    --accent: #11488B;
    --accentDarker: #11488B;
    --light: rgba(38, 50, 56, 0.035);
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------

.map::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}
*/
/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {filter: contrast(0.11) sepia(1) hue-rotate(340deg) contrast(13)!important;}


/*------------------------ CSS overrides below ------------------------*/


a.logo {font-size:1.2rem;font-weight: bold; text-decoration: none; color: var(--textDark)}
footer .logo > div.has_subtitle {line-height: 1.2; min-width: 22rem;font-size:1.2rem; color: white;}
a.logo > div.has_subtitle {
    gap: 1rem;
    min-width: 22rem;
}

section.wide {
    max-width: 200rem;
    text-align: center;
}

/*------------------------*/
/* Overrides, die früher direkt im Theme standen (base.css / header-footer.css)
/*------------------------*/

/* base.css */
body {font-size: 1.2rem;}
a.logo img.inline {height: 3rem;}
.map:not(section)::after {filter: invert(0.9);}
section.bgimage .overlay {background: rgb(17, 72, 139, 0.45);}
#als-meisterbetrieb {color: white;}
#noch-fragen {color: white !important;}

/* header-footer.css */
body.transparent_header .preheader .container a.icon img {filter: invert(1)!important;}
header > .container {padding-top: 0.5rem; padding-bottom: 0.5rem;}
footer .container > div:first-child {flex: 2;}


/*------------------------*/
/* brick_partners
/*------------------------*/

section.image.alt.partners .container {text-align: center; direction: ltr;} /* .image.alt setzt rtl */
section.partners .text {max-width: 48rem; margin: 0 auto;}
ul.partnerlogos {list-style: none; margin-left: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 2.5rem;}
ul.partnerlogos li {flex: 0 1 16rem;}
ul.partnerlogos a {display: flex; align-items: center; justify-content: center; height: 7rem; padding: 1.25rem 1.5rem; background: white; border-radius: 1rem; box-shadow: 0 0.25rem 1rem rgba(17, 72, 139, 0.08); transition: transform 0.2s, box-shadow 0.2s;}
ul.partnerlogos a:hover {transform: translateY(-0.2rem); box-shadow: 0 0.5rem 1.5rem rgba(17, 72, 139, 0.15);}
ul.partnerlogos img {max-height: 100%; max-width: 100%; width: auto; border-radius: 0;}
/* Partner-Section ab 60rem: Text links, Logos rechts (Links-Rechts-Prinzip wie Intro/Ausbildung).
   Logos untereinander, leicht versetzt. Slider-Folie „Starke Partner“ bleibt zentriert. */
@media (min-width: 60rem) {
    section.image.alt.partners .container {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: center; text-align: left;}
    section.partners .text {max-width: none; margin: 0; text-align: right;} /* rechtsbündig, zu den Logos hin */
    section.image.alt.partners .container {column-gap: clamp(3rem, 8vw, 8rem);} /* mehr Luft zwischen Text und Logos */
    section.partners ul.partnerlogos {flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 1.25rem; margin: 0;}
    section.partners ul.partnerlogos li {flex: none; width: 78%;}
    section.partners ul.partnerlogos li:nth-child(odd) {align-self: flex-end;} /* versetzt: 1. und 3. rechts, mittleres links */
    section.partners ul.partnerlogos a {height: 6.5rem;}
}

/*------------------------*/
/* brick_slider
/*------------------------*/

section.slider {position: relative; overflow: hidden;}
section.slider .slides {display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none;}
section.slider .slides::-webkit-scrollbar {display: none;}
section.slider .slide {flex: 0 0 100%; min-height: clamp(28.5rem, 31.5vw, 40.5rem); scroll-snap-align: start; background: var(--bg) var(--pos, center) / cover no-repeat;} /* Höhe wächst mit der Breite, sonst Panoramastreifen auf großen Monitoren */
section.slider .container h1, section.slider .container h2 {text-wrap: balance; font-size: clamp(2.9rem, 3.6vw, 3.6rem);}
section.slider .slide:not(.split) .container.small {max-width: 56rem;} /* breiter, damit große Überschriften zweizeilig bleiben */
section.slider .container p {max-width: 40rem; margin-left: auto; margin-right: auto; font-size: clamp(1.3rem, 1.45vw, 1.5rem); line-height: 1.5; text-wrap: balance;}
section.slider .container .button {margin-top: 1rem;}
/* Theme: header + section.bgimage .container {padding-top: 11.5rem !important} - viel Leerraum.
   Header (72px) liegt absolut über dem Slider, 7rem lassen darunter ~2.5rem Luft.
   Alle Folien sind so hoch wie die höchste (Partner-Folie), deshalb dort flachere Kacheln. */
@media (min-width: 45.01rem) {
    body:not(.transparent_header) header + section.slider .slide .container {padding-top: 7rem !important; padding-bottom: 4rem;}
    section.slider .slide .partnerlogos {margin-top: 1.25rem;}
    section.slider .slide .partnerlogos a {height: 6.25rem;}
}

/* section.slider > … ist nötig: intersectionobserver.css setzt auf section > * position: relative + transform */
section.slider > .slider-arrow {position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; background: rgba(17, 72, 139, 0.55); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background 0.2s;}
section.slider > .slider-arrow svg.icon {display: block; width: 1.35rem; height: 1.35rem;} /* eigener SVG-Pfeil (runde Enden, Stärke per stroke-width im Shortcode), exakt mittig */
section.slider > .slider-arrow:hover, section.slider > .slider-arrow:focus-visible {background: rgba(17, 72, 139, 0.85); transform: translateY(-50%);}
section.slider > .slider-arrow.prev {left: 1.5rem;}
section.slider > .slider-arrow.next {right: 1.5rem;}

section.slider > .slider-dots {position: absolute; bottom: 1.75rem; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 0.25rem; transform: none;}
section.slider > .slider-dots button {width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; transform: none;}
section.slider > .slider-dots button::before {content: ""; display: block; width: 0.7rem; height: 0.7rem; margin: auto; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(17, 72, 139, 0.45); transition: background 0.2s, transform 0.2s;}
section.slider > .slider-dots button[aria-current]::before {background: white; box-shadow: 0 0 0 2px var(--accent); transform: scale(1.3);}

@media (max-width: 45rem) {
    section.slider .slide {min-height: 32rem; background-image: var(--bg-m);}
    section.slider .container h1, section.slider .container h2 {font-size: 2.1rem; hyphens: auto; -webkit-hyphens: auto;}
    section.slider .container {padding-bottom: 5rem;}
    section.slider > .slider-arrow {display: none;}
}

@media (prefers-reduced-motion: reduce) {
    section.slider .slides {scroll-behavior: auto;}
}


/* Slider-Folie ohne Bild, z. B. Partner-Logos */
section.slider .slide .overlay {background: linear-gradient(rgb(0 0 0 / var(--dim, 0)), rgb(0 0 0 / var(--dim, 0))), rgb(17 72 139 / var(--ov, 0.45));} /* pro Folie per Bildtitel "overlay 0.3 dim 0.15" */
/* Folie "split" (Bildtitel enthält split): links Foto, weich ins Blau überblendet, Text rechts daneben. Mobil normale Folie. */
@media (min-width: 45.01rem) {
    section.slider .slide.split {position: relative; background: linear-gradient(90deg, var(--accent) 0%, #1a559e 66%, #b9cde5 100%);} /* rechtes Drittel läuft Richtung Hellblau aus */
    section.slider .slide.split::before {content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 58%; background: var(--bg) var(--pos, center) / cover no-repeat; -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 38%); mask-image: linear-gradient(270deg, transparent 0%, #000 38%);}
    section.slider .slide.split .overlay {display: none;}
    section.slider .slide.split .container {position: relative; z-index: 2; max-width: 32rem; margin-left: 50%; margin-right: auto; padding-left: 1rem; padding-right: 4.75rem; text-align: left;} /* Text beginnt in der Mitte, nah an Axel; rechts Platz für den Slider-Pfeil */
    section.slider .slide.split .container p {margin-left: 0;}
}
@media (min-width: 70rem) {
    /* Option "oneline": Überschrift einzeilig (z. B. „Beratung & Förderung“), Detailtext behält seine Breite */
    section.slider .slide.split .container {max-width: 46rem;} /* breite Bildschirme: Text nicht zu schmal */
    section.slider .slide.split.oneline .container {max-width: none;}
    section.slider .slide.split.oneline .container h2 {white-space: nowrap;}
    section.slider .slide.split.oneline .container p {max-width: 36rem;}
}
/* split-r: gespiegelt (Text links, Foto rechts) */
@media (min-width: 45.01rem) {
    section.slider .slide.split-r {background: linear-gradient(270deg, var(--accent) 0%, #1a559e 66%, #b9cde5 100%);}
    section.slider .slide.split-r::before {left: auto; right: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%);}
    section.slider .slide.split-r .container {max-width: 34rem; margin-left: auto; margin-right: 50%; padding-left: 4.75rem; padding-right: 2rem;} /* Textblock endet an der Bildmitte */
}
/* text-r (Bildtitel): Text rechtsbündig, z. B. auf split-r-Folien zum Foto hin */
@media (min-width: 45.01rem) {
    section.slider .slide.text-r .container {text-align: right;}
    section.slider .slide.text-r .container p {margin-left: auto; margin-right: 0;}
}
/* Option "fade": Bild läuft links und rechts in Weiß aus, Text bleibt zentriert auf dem Bild */
@media (min-width: 45.01rem) {
    section.slider .slide.fade .overlay {background: linear-gradient(90deg, rgb(255 255 255 / 0.6) 0%, rgb(255 255 255 / 0.25) 9%, rgb(255 255 255 / 0) 22%, rgb(255 255 255 / 0) 78%, rgb(255 255 255 / 0.25) 91%, rgb(255 255 255 / 0.6) 100%), linear-gradient(rgb(0 0 0 / var(--dim, 0)), rgb(0 0 0 / var(--dim, 0))), rgb(17 72 139 / var(--ov, 0.45));}
}
section.slider .slide.split .button {background: white; color: var(--accent);}
section.slider .slide.split .button:hover {background: rgba(255, 255, 255, 0.9);}
section.slider .slide.plain {background: radial-gradient(ellipse at 50% 35%, #ffffff 0%, #eaf0f7 70%, #dfe7f1 100%);}
section.slider .slide.plain .container, section.slider .slide.plain .container h1, section.slider .slide.plain .container h2 {color: var(--textDark);}
/* Partner-Folie im Split-Stil: links Logos auf Hell, rechts Text auf Firmenblau (wie die Foto-Folien). Mobil unverändert. */
@media (min-width: 45.01rem) {
    section.slider .slide.plain:has(.partnerlogos) {background: linear-gradient(90deg, #f4f7fb 0%, #e4ebf4 38%, var(--accent) 56%, #1a559e 80%, #b9cde5 100%);}
    section.slider .slide.plain:has(.partnerlogos) .container.small {display: grid; grid-template-columns: 50% 50%; grid-template-rows: auto auto auto; align-content: center; max-width: none; width: 100%; margin: 0; padding-left: 0; padding-right: 0; text-align: left;}
    section.slider .slide.plain:has(.partnerlogos) .container > :not(.partnerlogos) {grid-column: 2; max-width: 40rem; padding-left: 1rem; padding-right: 4.75rem; margin-left: 0;}
    section.slider .slide.plain:has(.partnerlogos) .container h2, section.slider .slide.plain:has(.partnerlogos) .container p {color: white;}
    section.slider .slide.plain:has(.partnerlogos) ul.partnerlogos {grid-column: 1; grid-row: 1 / 4; align-self: center; justify-self: end; margin-right: clamp(2.5rem, 5vw, 5rem) !important; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0.9rem; width: min(22rem, 68%); margin: 0;}
    section.slider .slide.plain:has(.partnerlogos) ul.partnerlogos li {flex: none; width: 82%; max-width: none;}
    section.slider .slide.plain:has(.partnerlogos) ul.partnerlogos li {align-self: flex-start;}
    section.slider .slide.plain:has(.partnerlogos) ul.partnerlogos li:nth-child(2) {align-self: flex-end;} /* rechtsbündig zum Text hin, OVUM ragt am weitesten nach rechts */
    section.slider .slide.plain:has(.partnerlogos) .slide .partnerlogos a, section.slider .slide.plain:has(.partnerlogos) ul.partnerlogos a {height: 4.5rem; padding: 0.8rem 1.25rem;}
    section.slider .slide.plain:has(.partnerlogos) .button {background: white; color: var(--accent);}
}
/* Logo-Reihe darf breiter als die schmale Textspalte (.container.small) werden */
section.slider .partnerlogos {margin-top: 1.75rem; gap: 1.25rem; flex-wrap: nowrap; width: min(56rem, 92vw); margin-left: calc(50% - min(28rem, 46vw));}
section.slider .partnerlogos li {flex: 1 1 0; min-width: 0; max-width: 17rem;}
section.slider .partnerlogos a {height: 8.5rem; padding: 1.25rem 1.75rem; box-shadow: 0 0.5rem 1.5rem rgba(17, 72, 139, 0.12);}
@media (max-width: 45rem) {
    section.slider .partnerlogos {gap: 0.5rem;}
    section.slider .partnerlogos a {height: 5rem; padding: 0.6rem;}
}

/*------------------------*/
/* Redesign 2026-10: Icons, Vertrauensleiste, Leistungen, Kontakt, Footer
/*------------------------*/

/* Sprunglinks: Theme rechnet mit 10rem Header, der Sticky-Header ist nur ~5rem hoch */
html {scroll-padding-top: 5rem;}

svg.icon {width: 1.5em; height: 1.5em; flex-shrink: 0; vertical-align: middle;}

/* Abschnitts-Kopf zentriert */
.section-head {text-align: center; max-width: 44rem; margin: 0 auto 3rem;}

/* Vertrauensleiste */
section.usps + section {margin-top: 0;}
section.usps {padding: 2.25rem 0; background: white; border-bottom: 1px solid var(--borderLight);}
ul.usplist {list-style: none; margin-left: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem;}
ul.usplist li {display: flex; align-items: center; gap: 0.9rem;}
.usp-icon {display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: rgba(17, 72, 139, 0.08); color: var(--accent); font-size: 1.35rem; flex-shrink: 0;}
.usp-text {display: flex; flex-direction: column; line-height: 1.3; font-size: 0.95rem; color: var(--textMedium);}
.usp-text strong {color: var(--textDark); font-size: 1.05rem;}

/* Intro (brick_teamintro): Foto mit weichem Schatten + Badge, optional Dachzeile, Kontakt-Button */
section.teamintro {background: var(--light); padding: 5rem 0;}
section.teamintro .twocols {align-items: center;}
section.teamintro p.eyebrow + h2 {margin-top: 0; padding-top: 0;}
section.teamintro figure {position: relative; margin: 0; overflow: visible;} /* Theme: figure {overflow: hidden} */
section.teamintro .twocols > div.image img {position: relative; display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: center top; border-radius: 1.25rem; box-shadow: 0 0.75rem 2.5rem rgba(17, 72, 139, 0.18);} /* weich wie bei den Leistungs-Icons */
.intro-badge {position: absolute; left: -1.25rem; bottom: 1.75rem; display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.25rem; background: white; border-radius: 1rem; box-shadow: 0 0.75rem 2rem rgba(17, 72, 139, 0.2);}
.intro-badge strong {font-size: 2rem; line-height: 1; color: var(--accent);}
.intro-badge span {font-size: 0.9rem; line-height: 1.25; color: var(--textMedium); max-width: 6rem;}
section.teamintro p.eyebrow {display: inline-block; align-self: flex-start; margin: 0 0 0.75rem; padding: 0.3rem 0.8rem; border-radius: 2rem; background: rgba(17, 72, 139, 0.08); color: var(--accent); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;}
section.teamintro .intro-cta {display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1rem;}
section.teamintro .intro-cta span {font-size: 0.95rem; color: var(--textMedium);}
section.teamintro .intro-cta span a {color: var(--accent); font-weight: 500; white-space: nowrap;}
@media (max-width: 45rem) {
    section.teamintro {padding: 3rem 0;}
    section.teamintro .twocols {row-gap: 2.5rem;}
    .intro-badge {left: -0.5rem; bottom: 1rem; padding: 0.65rem 1rem;}
    .intro-badge strong {font-size: 1.6rem;}
}

/* Leistungen */
section.leistungen {background: white;}
ul.leistungsgrid {list-style: none; margin-left: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.5rem;} /* margin-left: Theme setzt ul {margin-left: 1rem} */
ul.leistungsgrid li {min-width: 0;}
ul.leistungsgrid li {padding: 1.75rem 1.5rem; background: white; border: 1px solid var(--borderLight); border-radius: 1rem; box-shadow: 0 0.25rem 1rem rgba(17, 72, 139, 0.05); transition: transform 0.2s, box-shadow 0.2s;}
ul.leistungsgrid li:hover {transform: translateY(-0.2rem); box-shadow: 0 0.75rem 2rem rgba(17, 72, 139, 0.12);}
.leistung-icon {display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 0.9rem; background: rgba(17, 72, 139, 0.08); color: var(--accent); font-size: 1.6rem; margin-bottom: 1.1rem;}
ul.leistungsgrid h3 {font-size: 1.1rem; line-height: 1.3; color: var(--textDark); margin: 0 0 0.5rem; padding: 0;}
ul.leistungsgrid p {font-size: 0.95rem; line-height: 1.55; margin: 0; padding: 0;}
/* Akzente: Hintergrundverlauf, kräftige Icon-Kacheln, Akzentstrich (wird beim Hover breiter) */
section.leistungen {background: linear-gradient(180deg, #ffffff 0%, #eef3f9 100%);}
ul.leistungsgrid li {position: relative; overflow: hidden; border-color: rgba(17, 72, 139, 0.1);}
ul.leistungsgrid li::before {content: ""; position: absolute; top: 0; left: 1.5rem; width: 2.5rem; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); transition: width 0.3s;}
ul.leistungsgrid li:hover::before {width: calc(100% - 3rem);}
ul.leistungsgrid li:hover {border-color: rgba(17, 72, 139, 0.25);}
.leistung-icon {background: linear-gradient(135deg, var(--accent) 0%, #2a6bc0 100%); color: white; box-shadow: 0 0.4rem 1rem rgba(17, 72, 139, 0.25); transition: transform 0.2s;}
ul.leistungsgrid li:hover .leistung-icon {transform: translateY(-2px) scale(1.05);}

/* Beratung & Förderung (brick_beratung): Ablauf in 4 Schritten + Förderbox */
section.beratung {background: white;}
ol.ablauf {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; position: relative; counter-reset: none;}
ol.ablauf::before {content: ""; position: absolute; top: 2rem; left: 12.5%; right: 12.5%; height: 2px; background: linear-gradient(90deg, rgba(17, 72, 139, 0.15), rgba(17, 72, 139, 0.35), rgba(17, 72, 139, 0.15));} /* Verbindungslinie zwischen den Icons */
ol.ablauf li {position: relative; text-align: center; padding: 0;}
.ablauf-icon {position: relative; display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, #2a6bc0 100%); color: white; font-size: 1.8rem; box-shadow: 0 0.4rem 1rem rgba(17, 72, 139, 0.25); margin-bottom: 1rem;}
.ablauf-nr {position: absolute; top: -0.25rem; right: -0.35rem; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: white; color: var(--accent); font-size: 0.8rem; font-weight: 600; box-shadow: 0 0.15rem 0.5rem rgba(17, 72, 139, 0.25);}
ol.ablauf h3 {font-size: 1.1rem; line-height: 1.3; color: var(--textDark); margin: 0 0 0.4rem; padding: 0;}
ol.ablauf p {font-size: 0.95rem; line-height: 1.55; margin: 0; padding: 0;}
.foerderbox {display: flex; align-items: center; gap: 1.5rem; margin-top: 3rem; padding: 1.75rem 2rem; border-radius: 1.25rem; background: linear-gradient(135deg, var(--accent) 0%, #2a6bc0 100%); color: rgba(255, 255, 255, 0.9); box-shadow: 0 0.75rem 2.5rem rgba(17, 72, 139, 0.2);}
.foerderbox-icon {flex: none; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.15); color: white; font-size: 1.8rem;}
.foerderbox-text {flex: 1;}
.foerderbox h3 {color: white; font-size: 1.25rem; margin: 0 0 0.3rem; padding: 0;}
.foerderbox p {margin: 0; padding: 0; font-size: 0.95rem; line-height: 1.55;}
.foerderbox .button {flex: none; background: white; color: var(--accent); white-space: nowrap;}
.foerderbox .button:hover {background: rgba(255, 255, 255, 0.9);}
@media (max-width: 60rem) {
    ol.ablauf {grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem;}
    ol.ablauf::before {display: none;}
    .foerderbox {flex-wrap: wrap;}
}
@media (max-width: 45rem) {
    ol.ablauf {grid-template-columns: 1fr; gap: 1.5rem;}
    ol.ablauf li {display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; text-align: left;}
    .ablauf-icon {grid-row: 1 / 3; width: 3.25rem; height: 3.25rem; font-size: 1.5rem; margin: 0;}
    .foerderbox {padding: 1.5rem; gap: 1rem; align-items: flex-start;}
    .foerderbox .button {width: 100%; text-align: center;}
}

/* Ausbildung (CTA) */
/* Ausbildung (layouts/partials/brick_cta.html): Foto links wie Intro/Kontakt (Radius 1.25rem, weicher Schatten), Text rechts */
section.cta.ausbildung {padding: 4.5rem 0;}
.cta-karte {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: center;} /* wie Intro: zwei gleiche Spalten, vertikal zentriert */
.cta-bild {position: relative;}
.cta-bild p {margin: 0; padding: 0;}
section.cta .cta-bild img {display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 1.25rem; margin: 0; box-shadow: 0 0.75rem 2.5rem rgba(17, 72, 139, 0.18);} /* identisch zum Intro-Foto */
.cta-text {padding: 1rem 0;}
section.cta p.cta-label {display: inline-block; margin: 0 0 0.9rem; padding: 0.3rem 0.85rem; border-radius: 2rem; background: rgba(17, 72, 139, 0.08); color: var(--accent); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;}
.cta-text h2 {margin: 0 0 0.4rem; padding: 0;}
section.teamintro .text h2 {margin-bottom: 0.4rem;}
.cta-text h3, section.partners .text h3, section.teamintro .text h3 {margin: 0 0 1rem; padding: 0; font-size: 1.15rem; color: var(--accent);} /* Untertitel wie im Ausbildungs-CTA */
.cta-text p {font-size: 1.05rem; line-height: 1.65;}
.cta-text .button {margin-top: 0.75rem;}
@media (max-width: 60rem) {
    .cta-karte {grid-template-columns: 1fr;}
    .cta-text {padding: 0;}
    .cta-karte {gap: 2rem;}
}

/* Kontakt */
section.hasbackgroundcolor + section.kontakt {margin-top: 3.5rem;} /* Theme: hasbackgroundcolor ohne Padding, sonst klebt die Box am Blau */
section.kontakt {background: var(--accent); color: rgba(255, 255, 255, 0.85);}
section.kontakt h2, section.kontakt h3 {color: white;}
section.kontakt {padding: 3.5rem 0 4rem;}
section.kontakt .twocols {grid-template-columns: 3fr 2fr; align-items: stretch;}
section.kontakt h2 {margin-bottom: 0.5rem;}
section.kontakt .text > p {margin-bottom: 0; padding-bottom: 0;}
/* Foto nimmt die Höhe der Textspalte an, statt sie vorzugeben */
section.kontakt .image {position: relative; min-height: 20rem;}
section.kontakt .twocols > div.image img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: 1.25rem; box-shadow: 0 0.75rem 2.5rem rgba(4, 18, 40, 0.35);} /* weicher Schatten wie Intro-Foto, dunkel wegen blauem Hintergrund */
ul.kontaktkarten {list-style: none; display: grid; grid-template-columns: 1fr 1fr 1.45fr; gap: 0.75rem; margin: 1.5rem 0 1.75rem; padding: 0;}
ul.kontaktkarten a {display: flex; flex-direction: column; gap: 0.15rem; height: 100%; padding: 1rem 1.1rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); color: white; text-decoration: none; transition: background 0.2s;}
ul.kontaktkarten a:hover {background: rgba(255, 255, 255, 0.18);}
ul.kontaktkarten svg.icon {font-size: 1.3rem; margin-bottom: 0.35rem;}
ul.kontaktkarten span {font-size: 0.85rem; opacity: 0.8; line-height: 1.2;}
ul.kontaktkarten strong {font-size: 1rem; line-height: 1.3; white-space: nowrap;}
.kontaktinfos {display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem 2rem;}
.kontaktinfos h3 {font-size: 1.05rem; margin: 0 0 0.5rem; padding: 0; display: flex; align-items: center; gap: 0.4rem;}
.kontaktinfos p {margin: 0 0 0.5rem; padding: 0; line-height: 1.6;}
.kontaktinfos a {color: white;}

/* Öffnungszeiten-Tabelle (Kontakt + Footer) */
table.zeiten {border-collapse: collapse; line-height: 1.7;}
table.zeiten th {text-align: left; font-weight: normal; padding: 0 1.25rem 0 0; white-space: nowrap;}
table.zeiten td {padding: 0; white-space: nowrap;}

/* Footer */
footer.sitefooter {margin-top: 0; font-size: 0.95rem;}
footer .container.footer-grid {display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem 3rem; align-items: start; padding-top: 3.5rem; padding-bottom: 3rem;}
footer .container.footer-grid > div {text-align: left;}
footer.sitefooter .footer-brand p {margin-top: 1.25rem; max-width: 22rem;}
footer.sitefooter h4 {font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--textDark); margin-bottom: 0.75rem;}
footer.sitefooter p {margin: 0 0 0.75rem; padding: 0; line-height: 1.6;}
footer.sitefooter .footer-grid a {color: var(--textDark);}
footer .footer-bottom .container {justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 2rem;}
footer .footer-bottom ul {justify-content: flex-end;}

@media (max-width: 60rem) {
    section.kontakt .twocols {grid-template-columns: 1fr; row-gap: 2rem;}
    section.kontakt .image {min-height: 22rem;}
    ul.usplist {grid-template-columns: repeat(2, minmax(0, 1fr));}
    footer .container.footer-grid {grid-template-columns: 1fr 1fr;}
    footer .footer-brand {grid-column: 1 / -1;}
}
@media (max-width: 45rem) {
    ul.usplist {gap: 1.25rem 1rem;}
    .usp-icon {width: 2.75rem; height: 2.75rem; font-size: 1.15rem;}
    .usp-text {font-size: 0.85rem;}
    .usp-text strong {font-size: 0.95rem;}
    footer .container.footer-grid {grid-template-columns: 1fr;}
    footer .footer-bottom .container {justify-content: center; text-align: center;}
    section.kontakt .image {display: none;}
    section.kontakt .twocols {grid-template-columns: 1fr;}
    ul.kontaktkarten {grid-template-columns: 1fr;}
    ul.kontaktkarten a {display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; padding: 0.8rem 1.1rem;}
    ul.kontaktkarten svg.icon {grid-row: 1 / 3; margin: 0;}
    ul.leistungsgrid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem;} /* minmax(0, …): lange Wörter dürfen eine Spalte nicht verbreitern */
    ul.leistungsgrid li {padding: 1.1rem 0.9rem;}
    .leistung-icon {width: 2.75rem; height: 2.75rem; font-size: 1.3rem; margin-bottom: 0.75rem;}
    ul.leistungsgrid h3 {font-size: 0.95rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;}
    ul.leistungsgrid p {font-size: 0.85rem;}
    section.partners ul.partnerlogos {flex-wrap: nowrap; gap: 0.5rem;}
    section.partners ul.partnerlogos li {flex: 1 1 0; min-width: 0;}
    section.partners ul.partnerlogos a {height: 5rem; padding: 0.6rem;}
}