/*
 * kathspirit – Gestaltung ohne Bootstrap Package (ab Version 1.2.0, an das Original angeglichen in 1.2.1)
 * Farben und Schrift kommen als CSS-Variablen aus den Site-Einstellungen
 * (Configuration/Sets/SitePackage/settings.definitions.yaml → TypoScript/theme.typoscript).
 * Die Werte hinter dem Komma sind nur Ersatzwerte.
 */

/* ---------- Schrift (lokal eingebunden, keine Verbindung zu Google) ---------- */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../Fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("../Fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../Fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("../Fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 700; font-display: swap; src: url("../Fonts/source-sans-3-latin-700-italic.woff2") format("woff2"); }

/* ---------- Grundlagen ---------- */
:root {
    --container: 1140px;
    --gutter: 1rem;
    --color-dark: #313131;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-family, "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--color-text, #222);
    background: var(--color-background, #fff);
}

img { max-width: 100%; height: auto; }

a { color: var(--color-primary, #4faf98); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.25; margin: 0 0 .75em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.625rem; }
h3 { font-size: 1.375rem; }
p { margin: 0 0 1em; }
b, strong { font-weight: 700; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; padding: .5rem 1rem; background: #fff; }

/* ---------- Kopf: Logo links, Navigation daneben ---------- */
.page-header { background: #fff; border-bottom: 1px solid #ddd; }
.header-inner { display: flex; align-items: center; gap: 2.5rem; padding-top: 1rem; padding-bottom: 1rem; }
.logo img { display: block; width: auto; height: 70px; }

/* ---------- Hauptnavigation ---------- */
.main-navigation ul { list-style: none; margin: 0; padding: 0; }
.main-navigation > ul { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.main-navigation li { position: relative; }
.main-navigation a {
    display: block;
    padding: .25rem 0;
    color: var(--color-primary, #4faf98);
    font-size: 1.25rem;
    border-bottom: 2px solid transparent;
}
.main-navigation a:hover, .main-navigation a:focus { text-decoration: none; border-bottom-color: currentColor; }
.main-navigation li.active > a { border-bottom-color: var(--color-primary, #4faf98); }

/* Pfeil bei Menüpunkten mit Unterseiten */
.main-navigation > ul > li.has-children > a::after {
    content: "";
    display: inline-block;
    width: .45em; height: .45em;
    margin-left: .6em;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-.25em) rotate(45deg);
}

/* Unterpunkte als Aufklappmenü */
.main-navigation li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 14rem;
    z-index: 50;
    padding: .5rem 1rem;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.main-navigation li ul a { font-size: 1.0625rem; }
.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul { display: block; }

/* Menü-Knopf für kleine Bildschirme */
.nav-toggle { display: none; margin-left: auto; padding: .5rem; border: 0; background: transparent; cursor: pointer; }
.nav-toggle-bar { display: block; width: 26px; height: 3px; margin: 5px 0; background: var(--color-primary, #4faf98); }

/* ---------- Brotkrumen-Navigation ---------- */
.breadcrumb-section { background: var(--color-breadcrumb, #647386); color: #fff; font-size: .9375rem; }
.breadcrumb { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: .5rem 0; }
.breadcrumb li + li::before { content: "/"; padding: 0 .5rem; opacity: .7; }
.breadcrumb a { color: #fff; }

/* ---------- Inhaltsbereiche und Spalten ---------- */
#page-content { padding-bottom: 3rem; }

/* Einspaltige Bereiche: farbige Hintergründe laufen über die ganze Breite,
   der Inhalt bleibt auf Inhaltsbreite */
.area-full > .frame,
.area-full > a + .frame { padding-left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
.area-full > .frame-width-embedded { max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Spaltengruppen auf Inhaltsbreite begrenzen */
.columns {
    display: grid;
    gap: 2.25rem;
    width: 100%;
    max-width: var(--container);
    margin: 1.5rem auto 0;
    padding: 0 var(--gutter);
}
.columns-25-75 { grid-template-columns: 1fr 3fr; }
.columns-50-50 { grid-template-columns: 1fr 1fr; }
.columns-thirds { grid-template-columns: repeat(3, 1fr); }

/* ---------- Inhaltselemente: Rahmen und Hintergründe (wie im Bootstrap Package) ---------- */
.frame { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.frame-background-none, .frame-background-secondary { padding-top: 1rem; padding-bottom: 1rem; }
.columns .frame[class*="frame-background-"]:not(.frame-background-none) { padding: 2.25rem 2.5rem; }
.columns .frame + .frame, .columns a + .frame { margin-top: 1.5rem; }

.frame-background-primary {
    background: var(--color-primary, #4faf98);
    color: #000;
    padding-top: 3rem; padding-bottom: 3rem;
}
.frame-background-primary :is(h1, h2, h3, h4, h5, h6) { color: #fff; }
.frame-background-primary a { color: #fff; text-decoration: underline; }

.frame-background-dark {
    background: var(--color-dark);
    color: #fff;
    padding-top: 3rem; padding-bottom: 3rem;
}
.frame-background-dark :is(h1, h2, h3, h4, h5, h6) { color: #fff; }

.frame-background-light {
    background: var(--color-footer-content-bg, #f1f1f1);
    padding-top: 3rem; padding-bottom: 3rem;
}

.frame-inner > :last-child { margin-bottom: 0; }

/* Bilder neben Text (Text & Medien) */
.ce-textpic { display: flow-root; }
.ce-gallery img { display: block; }

/* ---------- Unternavigation ---------- */
.subnavigation, .subnavigation ul { list-style: none; margin: 0; padding: 0; }
.subnavigation a { display: block; padding: .5rem .75rem; border-left: 3px solid transparent; color: var(--color-text, #222); }
.subnavigation li.active > a { border-left-color: var(--color-primary, #4faf98); color: var(--color-primary, #4faf98); }
.subnavigation ul a { padding-left: 1.5rem; font-size: 1rem; }

/* ---------- Fußzeile ---------- */
.footer-content {
    background: var(--color-footer-content-bg, #f1f1f1);
    color: var(--color-footer-content-text, #222);
    padding: 3rem 0;
}
.footer-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer-content .frame { padding: 0; background: none; }

.footer-meta {
    background: var(--color-footer-meta-bg, #444);
    color: var(--color-footer-meta-text, #fff);
    padding: 2.5rem 0;
    text-align: center;
}
.footer-meta p { margin: 0; }
.footer-content a, .footer-meta a { color: var(--color-primary, #4faf98); }

/* ---------- Kleine Bildschirme (unter 992 px) ---------- */
@media (max-width: 991.98px) {
    .header-inner { flex-wrap: wrap; gap: 0; }
    .nav-toggle { display: block; }
    .main-navigation { display: none; width: 100%; }
    .main-navigation.is-open { display: block; }
    .main-navigation > ul { display: block; padding-top: 1rem; }
    .main-navigation li ul { display: block; position: static; box-shadow: none; padding: 0 0 0 1rem; }
    .main-navigation > ul > li.has-children > a::after { display: none; }
    .logo img { height: 56px; }
}

@media (max-width: 767.98px) {
    .columns-25-75, .columns-50-50, .columns-thirds, .footer-columns { grid-template-columns: 1fr; }
    .columns .frame[class*="frame-background-"]:not(.frame-background-none) { padding: 1.5rem; }
}