/* =========================================================
   Sanunion - schlanke Marken-Overrides fuer Bootstrap 5
   Bootstrap liefert Layout/Grid/Utilities, hier bleibt nur
   die Markenidentitaet: Farben, Schriften, dezente Linien.
   ========================================================= */

:root {
    --su-text:       #343739; /* Fliesstext / Standard */
    --su-teal:       #38A9A3; /* Primaerfarbe (Akzent, aktiv) */
    --su-gold:       #A9A482; /* Footer / Sekundaer */
    --su-link:       #69A0BB; /* Links im Inhalt */
    --su-link-hover: #9DA4A7; /* Hover */
    --su-line:       rgba(110, 118, 122, .85); /* gepunktete Trennlinie grau */
    --su-line-gold:  rgba(169, 164, 130, .55); /* gepunktete Trennlinie gold */

    /* Bootstrap-Primaerfarbe auf Sanunion-Tuerkis umstellen */
    --bs-primary: #38A9A3;
    --bs-primary-rgb: 56, 169, 163;
    --bs-link-color: #69A0BB;
    --bs-link-color-rgb: 105, 160, 187;
    --bs-link-hover-color: #9DA4A7;
    --bs-link-hover-color-rgb: 157, 164, 167;
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 18px;
    color: var(--su-text);
    background: #fff;
}

/* Layout auf 1000px Maximalbreite begrenzen (= Breite des Header-Fotos) */
.container { max-width: 1000px; }

/* Kopf-Foto-Band: Tuerkis ueber die volle Breite hinter dem Foto,
   links/rechts buendig mit dem 1000px-Foto. */
.header-photo {
    background: var(--su-teal);
}

/* ---- Typografie: Ueberschriften in Georgia ---- */
h1, h2, h3, h4, h5, h6 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
}
h1 { font-size: 24px; line-height: 30px; color: var(--su-text); }
h2 { font-size: 24px; line-height: 30px; color: var(--su-teal); margin-bottom: 1.5rem; }
h3 { font-size: 18px; line-height: 24px; color: var(--su-text); }

/* ---- Kopf-Navigation (Presse / Kontakt) ---- */
.topnav {
    /* gepunktete Linie ueber und unter dem Block */
    border-top: 1px dotted var(--su-line);
    border-bottom: 1px dotted var(--su-line);
    padding: 2px 0;
}
.topnav .nav-link {
    color: var(--su-teal);
    font-size: 10px;
    padding: 0 .25rem 0 15px;
    margin-left: 1.25rem;
    /* Pfeil-Bullet als Original-Grafik */
    background: url(/assets/sanunion/img/pfeilrechts.gif) no-repeat 0 7px;
}
.topnav .nav-link:hover { color: var(--su-gold); }

/* ---- Seitennavigation (links) ---- */
.sidebar-nav {
    border-top: 1px dotted var(--su-line);
    border-bottom: 1px dotted var(--su-line);
}
.sidebar-nav .nav-link {
    color: var(--su-text);
    font-size: 11px;
    line-height: 18px;
    padding: .15rem 0 .15rem 15px;
}
/* Pfeil-Bullet als Original-Grafik (nur Hauptpunkte) */
.sidebar-nav > .nav-item > .nav-link {
    background: url(/assets/sanunion/img/pfeilrechts.gif) no-repeat 0 6px;
}
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active { color: var(--su-teal); }

/* Unterpunkte */
.sidebar-nav .sub .nav-link {
    color: var(--su-link-hover);
    padding-left: 1.6rem;
}
.sidebar-nav .sub .nav-link.active { color: var(--su-teal); }

/* ---- Inhalt aus dem CMS (TYPO3-Restklassen) ---- */
.bodytext { margin: 0 0 1.5rem; }

/* Listen im Inhalt mit Gold-Bullet (Navigation bleibt unberuehrt) */
.cms-content ul {
    list-style: none;
    padding-left: 0;
}
.cms-content li {
    background: url(/assets/sanunion/img/bullet_gold.gif) no-repeat 0 8px;
    padding-left: 14px;
}

/* h4format-Block: gold-gepunktete Linie oben bzw. unten */
.h4format {
    border-top: 1px dotted var(--su-line-gold);
    margin: 20px 0 6px;
}
.h4format-sub {
    border-bottom: 1px dotted var(--su-line-gold);
    margin-bottom: 20px;
}
.h4format h5 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    line-height: 18px;
    font-weight: normal;
    color: var(--su-teal);
    padding: 7px 0 8px;
    margin: 0;
}

/* Bild-Text-Elemente (csc-textpic): schlanke Layoutschicht.
   Bild links/rechts schwebend bzw. zentriert, Text laeuft daneben. */
.csc-textpic img { max-width: 100%; height: auto; border: 0; }
.csc-textpic-clear { clear: both; }
.csc-textpic-intext-left .csc-textpic-imagewrap,
.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap { float: left; margin-right: 10px; }
.csc-textpic-intext-right .csc-textpic-imagewrap,
.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap { float: right; margin-left: 10px; }
.csc-textpic-center { text-align: center; }
.csc-textpic-center .csc-textpic-imagewrap { margin: 0 auto; }
.csc-textpic-center .csc-textpic-text { text-align: left; }

/* Text neben/unter Bildern (csc-textpic) in Georgia, goldbraun (wie frueher #content-main-top) */
.csc-textpic-text {
    padding-top: 14px;
    line-height: 23px;
    margin: 0;
    color: #af9968;
}
.csc-textpic-text p,
.csc-textpic-text p.bodytext {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 15px;
    line-height: 23px;
    color: #af9968;
    margin: 0;
    padding: 8px 0 0;
}
.csc-firstHeader { color: var(--su-gold); }
#content-main-heading h1 { color: var(--su-text); }
#content-main-heading h2 { color: var(--su-teal); }

/* Einleitungstext (oben) in Gold */
#content-main-top,
#content-main-top p { color: var(--su-gold); }

/* "nach oben"-Link: rechtsbuendig, gold-gepunktete Linie darueber */
#content-main-fobo {
    text-align: right;
    border-top: 1px dotted var(--su-line-gold);
    padding-top: 5px;
    margin-top: 4rem;
}
.linktoppage {
    color: var(--su-gold);
    font-size: 10px;
    padding-right: 15px;
    /* Pfeil nach oben rechts neben dem Text */
    background: url(/assets/sanunion/img/pfeil_top.gif) no-repeat right 4px;
}
.linktoppage:hover { color: var(--su-link-hover); }

/* ---- Footer ---- */
.site-footer {
    color: var(--su-gold);
    font-size: 10px;
    border-top: 1px dotted var(--su-line-gold);
}
.site-footer a { color: var(--su-gold); }
.site-footer a:hover { color: var(--su-link-hover); }

/* ---- Aktuelles-Liste (Blog/News) ---- */
.picture-cover {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    overflow: hidden;
}
.picture-cover picture,
.picture-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Eintrag: kein Rahmen, gepunktete Trennlinie, Datum oben */
.news-entry {
    display: block;
    padding: 20px 0;
    border-bottom: 1px dotted var(--su-line);
    color: var(--su-text);
    text-decoration: none;
}
.news-entry:hover {
    color: var(--su-text);
    text-decoration: none;
}
.news-entry:hover .news-title { color: var(--su-teal); }

.news-date {
    font-size: 11px;
    color: var(--su-gold);
    margin: 0 0 4px;
}
.news-title {
    font-weight: bold;
    color: var(--su-gold);
    margin: 0 0 8px;
}
.news-text { margin: 0 0 8px; }
.news-meta { margin: 0; color: var(--su-link-hover); }