@import url('https://www.inselserver.de/fileadmin/fonts/gf_opensans.css');

/* Wrixum: vollständiger Ersatz des bisherigen Custom CSS. */
:root {
    --wrixum-green: #257100;
    --wrixum-text: #242424;
    --wrixum-border: #d9dfd5;
    --wrixum-soft: #f3f6f1;
    --wrixum-block-gap: 2rem;
}

/* Schrift und Lesefluss */
html { font-size: 16px; }
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--wrixum-text);
    background: #fff;
}
.primary-font { font-family: 'Open Sans', sans-serif; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    line-height: 1.25;
    color: var(--wrixum-green);
    margin: 1.75rem 0 .875rem;
}
h1, .h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h2, .h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
h3, .h3 { font-size: 1.375rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5, h6, .h6 { font-size: 1rem; }
.ce-bodytext { overflow-wrap: break-word; hyphens: auto; }
.ce-bodytext p, .ce-bodytext ul, .ce-bodytext ol { margin: 0 0 1rem; }
.ce-bodytext ul, .ce-bodytext ol { padding-left: 1.5rem; }
.ce-bodytext li + li { margin-top: .375rem; }
.ce-bodytext > :last-child { margin-bottom: 0; }
.ce-bodytext a { color: var(--wrixum-green); text-decoration: underline; text-underline-offset: .18em; }
.ce-bodytext a:hover { color: #184c00; }

/* Ein Abstand pro Inhaltsblock, auch bei verschachtelten TYPO3-Rahmen. */
#templateContentStartsite, #templateMenuContent { padding-top: 2.5rem; }
.topic { display: none; }
#partialContentMain .csc-frame { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
#partialContentMain .frame {
    margin-top: 0;
    margin-bottom: var(--wrixum-block-gap);
    padding-top: 0;
    padding-bottom: 0;
}
#partialContentMain .frame > :first-child { margin-top: 0; }
.headline { color: var(--wrixum-green); padding-bottom: 0; margin-bottom: 1rem; line-height: 1.25; border: 0; }
.headline span { padding-bottom: 0; border: 0; }

/* Startseite: eingerahmte Inhalte der rechten Spalte als einzelne Cards. */
#templateContentStartsite .column-2 .csc-frame.well {
    margin: 0 0 1.5rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--wrixum-border);
    border-top: 3px solid var(--wrixum-green);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgb(36 60 22 / 8%);
}
#templateContentStartsite .column-2 .csc-frame.well > .frame,
#templateContentStartsite .column-2 .csc-frame.well .ce-textpic.well {
    margin: 0;
    padding: 0;
    min-height: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
#templateContentStartsite .column-2 .csc-frame.well .headline {
    margin: 0 0 .75rem;
    font-size: 1.375rem;
    line-height: 1.3;
}
#templateContentStartsite .column-2 .csc-frame.well .ce-bodytext a { font-weight: 600; }

/* Hauptmenü: ursprünglicher großzügiger Kopf mit hellen Menükacheln. */
#menuMain { min-height: 88px; background: #fff; border-bottom: 1px solid var(--wrixum-border); }
#menuMain .navbar-header { padding-top: 0; }
#menuMain .navbar-brand {
    height: auto;
    padding: 1.75rem .75rem;
    font-size: 1.5rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    line-height: 2rem;
    color: var(--wrixum-text);
    text-shadow: none;
}
#menuMain #logoWrapper { margin-right: .5rem; padding: .75rem 0; }
#logoWrapper h1 { margin: 0; line-height: 1; }
#logoWrapper a { display: block; height: auto; }
#logoWrapper img { display: block; width: auto; height: 64px; }
#menuMain .navbar-nav > li { margin-left: .25rem; }
#menuMain .navbar-nav > li > a {
    padding: 2rem 1.25rem;
    min-width: 0;
    font-size: 1.125rem;
    line-height: 1.5rem;
    color: var(--wrixum-text);
    background: #f5f5f5;
    transition: background-color .15s;
}
#menuMain .navbar-nav > .active > a { color: #000; background: #d0d0d0; }
#menuMain .navbar-nav > li > a:is(:hover, :focus),
#menuMain .navbar-nav > .open > a { color: #fff; background: var(--wrixum-green); }
#menuMain .caret { display: inline-block; margin-left: .375rem; }
#menuMain .dropdown-menu {
    padding: .5rem 0;
    background: #fff;
    border: 1px solid var(--wrixum-border);
    box-shadow: 0 6px 18px rgb(0 0 0 / 10%);
}
#menuMain .dropdown-menu > li > a {
    padding: .75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--wrixum-text);
    white-space: normal;
    border: 0;
}
#menuMain .dropdown-menu > li > a:is(:hover, :focus) { color: var(--wrixum-green); background: var(--wrixum-soft); }
#menuMain .dropdown-menu > .active > a { color: #fff; background: var(--wrixum-green); }
#menuMain .navbar-toggle { margin: 1rem .75rem 1rem 0; padding: .75rem; border: 1px solid var(--wrixum-border); }
#menuMain .navbar-toggle .icon-bar { background: var(--wrixum-green); }
/* Dunkelgrüne Kontaktleiste mit weißer Schrift. */
.mini-navbar.mini-navbar-dark {
    height: auto;
    min-height: 40px;
    padding: 0;
    line-height: 20px;
    background: #1a4f00;
    color: #fff;
    border: 0;
    box-shadow: none;
}
.mini-navbar.mini-navbar-dark a, .mini-navbar.mini-navbar-dark .fa, .mini-navbar.mini-navbar-dark .phone { color: #fff; }
.mini-navbar-dark a:is(:hover, :focus) { color: #fff; background: transparent; text-decoration: underline; text-underline-offset: .2em; }
.mini-navbar-dark a:focus-visible { outline-color: #fff; }
.mini-navbar.mini-navbar-dark a, .mini-navbar.mini-navbar-dark .phone { display: inline-block; height: auto; margin: 0; padding: 10px 0; line-height: 20px; vertical-align: middle; }
.mini-navbar.mini-navbar-dark .phone { margin-left: 1.25rem; }


/* Untermenü */
#partialContentMenu { margin-bottom: 2rem; }
#partialContentMenu .nav > li + li { margin-top: .25rem; }
#partialContentMenu .nav > li > a { padding: .75rem 1rem; font-size: 1rem; line-height: 1.5; color: var(--wrixum-text); border-radius: 4px; }
#partialContentMenu .nav > li > a:hover { background: var(--wrixum-soft); }
#partialContentMenu .nav > .active > a { color: #fff; background: var(--wrixum-green); }

/* Headerbilder: ohne Leerraum zwischen Kopf und eingebundenem Bild. */
.wrapper:has(> .csc-frame.content-shortcut .jumbotron) { padding-top: 0; }
.wrapper > .csc-frame.content-shortcut > .frame:has(.jumbotron) { margin-top: 0; margin-bottom: 0; }

.jumbotron { --wrixum-hero-height: clamp(180px, 25vw, 300px); margin: 0; padding: 0; height: var(--wrixum-hero-height); overflow: hidden; }
#layoutStartsite .jumbotron { --wrixum-hero-height: clamp(220px, 39vw, 500px); }
.jumbotron .frame, .jumbotron .csc-frame { margin: 0; padding: 0; }
.jumbotron img, .jumbotron .ce-gallery img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: var(--wrixum-hero-height);
    object-fit: cover;
    object-position: center;
    position: static;
    transform: none;
}
.jumbotron .ce-gallery, .jumbotron figure { width: 100%; margin: 0; float: none; }
.jumbotron div.ce-center .ce-outer, .jumbotron div.ce-center .ce-inner { position: static; float: none; }
.jumbotron .ce-gallery .ce-column { width: 100%; margin: 0; padding: 0; }
.jumbotron .ce-row { margin: 0; }

/* Bilder und Galerien */
.lightbox { position: static; }
.ce-gallery img, div.csc-textpic .csc-textpic-imagewrap img { max-width: 100%; height: auto; }
.ce-gallery figcaption { padding-top: .5rem; font-size: .875rem; line-height: 1.5; color: #555; }
.ce-above .ce-gallery { margin-bottom: 1rem; }
.ce-below .ce-gallery { margin-top: 1rem; }
.ce-intext.ce-right .ce-gallery { margin-left: 1.5rem; margin-bottom: 1rem; }
.ce-intext.ce-left .ce-gallery { margin-right: 1.5rem; margin-bottom: 1rem; }
.ce-gallery:not([data-ce-columns="1"]) { width: 100%; }
.ce-gallery:not([data-ce-columns="1"]) :is(.ce-outer, .ce-inner) { position: static; float: none; }
.ce-gallery:not([data-ce-columns="1"]) .ce-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.ce-gallery:not([data-ce-columns="1"]) .ce-column { float: none; margin: 0; padding: 0; min-width: 0; }
.ce-gallery[data-ce-columns="2"] .ce-column { width: calc((100% - 1rem) / 2); }
.ce-gallery[data-ce-columns="3"] .ce-column { width: calc((100% - 2rem) / 3); }
.ce-gallery[data-ce-columns="4"] .ce-column { width: calc((100% - 3rem) / 4); }
.ce-gallery[data-ce-columns="5"] .ce-column { width: calc((100% - 4rem) / 5); }
.ce-gallery:not([data-ce-columns="1"]) figure,
.ce-gallery:not([data-ce-columns="1"]) img { width: 100%; }

/* Tabellen */
.ce-table { width: 100%; margin-bottom: 1rem; font-size: .9375rem; line-height: 1.5; }
.ce-table th, .ce-table td { padding: .625rem .75rem; vertical-align: top; overflow-wrap: anywhere; }
.ce-table-custom-1 { table-layout: fixed; }
.ce-table-custom-1 tr > :first-child { width: 33.333%; font-weight: 600; }
.ce-table > tbody > tr:nth-child(odd) { background: #f7f8f6; }

/* Formulare: ausschließlich Formularbereiche, keine Spendenbuttons. */
.tx-powermail .form-group, .powermail_field { margin-bottom: 1.25rem; }
.powermail_fieldset, .csc-form-element-fieldset { margin-bottom: 2rem; padding-bottom: 0; }
.powermail_field label { margin-bottom: .5rem; }
.powermail_field input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"]),
.powermail_field textarea, .powermail_field select, .tx-powermail .form-control {
    width: 100%;
    min-height: 44px;
    padding: .625rem .75rem;
    border: 1px solid #aab4a3;
    border-radius: 4px;
    font: inherit;
    color: var(--wrixum-text);
    background: #fff;
}
.powermail_field textarea { min-height: 140px; resize: vertical; }
.powermail_field input[type="submit"], .tx-powermail button[type="submit"] {
    min-height: 44px;
    margin-top: .5rem;
    padding: .75rem 1.5rem;
    border: 0;
    border-radius: 4px;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--wrixum-green);
}
.powermail_field .checkbox, .powermail_field .radio { position: relative; padding-left: 0; }
.powermail_field .checkbox input, .powermail_field .radio input { position: absolute; left: 0; margin: .25rem 0 0; width: 20px; height: 20px; }
.powermail_field .checkbox label, .powermail_field .radio label { padding-left: 2rem; line-height: 1.5; }

/* Footer: satte grüne Negativdarstellung mit kurzen, sichtbaren Randschatten. */
#areaFooter { margin-top: 2.5rem; border: 0; box-shadow: none; }
#areaFooter.footer-dark {
    padding: 2rem 0 0;
    background: linear-gradient(to bottom, rgb(0 0 0 / 32%), transparent 12px), #205f00;
    color: #fff;
    box-shadow: none;
}
#areaFooter > .container, #areaFooter .footer-darker > .container { padding-left: 15px; padding-right: 15px; }
#areaFooter footer { margin: 0; padding: 0; }
#areaFooter > .container > footer > .row { margin-left: -15px; margin-right: -15px; }
#areaFooter > .container > footer > .row > .container { width: 100%; margin: 0; padding: 0; }
#areaFooter .csc-frame, #areaFooter .frame { margin: 0; padding-top: 0; padding-bottom: 0; }
#areaFooter .csc-frame + .csc-frame { margin-top: 1rem; }
#areaFooter h4 { margin: 0 0 1rem; font-size: 1.25rem; line-height: 1.35; color: #fff; }
#areaFooter .ce-bodytext { font-size: .9375rem; line-height: 1.65; color: #fff; hyphens: none; }
#areaFooter.footer-dark a, #areaFooter.footer-dark .text-color.fa { color: #fff; }
#areaFooter .ce-bodytext a:is(:hover, :focus) { color: #fff; text-decoration-thickness: 2px; }
#areaFooter a:focus-visible, #areaFooter input:focus-visible { outline-color: #fff; }
#areaFooter .socialmedia-list-wrapper { margin: 1rem 0; text-align: left; }
#areaFooter .socialmedia-list { float: none; margin: 0; padding: 0; text-align: left; }
#areaFooter .socialmedia-list li { padding: 0; margin-right: .5rem; }
#areaFooter .socialmedia-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #174500;
    color: #fff;
    text-decoration: none;
}
#areaFooter .socialmedia-list a:hover { background: #103200; color: #fff; }
#areaFooter .footer-darker {
    margin: 0;
    padding: 1rem 0;
    border: 0;
    background: linear-gradient(to bottom, rgb(0 0 0 / 28%), transparent 12px), #174500;
    box-shadow: none;
    color: #fff;
    font-size: .875rem;
    line-height: 1.6;
}
#areaFooter .footer-darker p { display: block; margin: 0 0 .75rem; }
#areaFooter .footer-darker .list-inline { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; }
#areaFooter .footer-darker .list-inline > li { margin: 0; padding: 0; }
#areaFooter .footer-darker .list-inline > li:empty { display: none; }
#areaFooter .footer-darker a { color: #fff; }
#areaFooter .footer-darker a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 991px) {
    #areaFooter > .container > footer > .row > .container > [class*="col-"] { margin-bottom: 1.5rem; }
}

/* Sichtbarer Tastaturfokus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--wrixum-green); outline-offset: 3px; }

/* Tablet und Mobil: Bootstrap-Raster erhalten. */
@media (min-width: 768px) {
    #menuMain { min-height: 160px; }
    #menuMain .navbar-header { display: flex; align-items: center; min-height: 160px; }
    #menuMain .navbar-brand { float: none; padding: 0 15px; font-size: 30px; line-height: 1.2; color: #000; }
    #menuMain #logoWrapper { margin-right: 10px; padding: 0; }
    #logoWrapper img { height: 85px; }
    #menuMain .navbar-nav > li { margin-left: 2px; }
    #menuMain .navbar-nav > li > a { padding: 70px 15px; min-width: 150px; font-size: 24px; line-height: 20px; text-align: center; }
    #menuMain .navbar-nav .caret { display: none; }
}
@media (min-width: 768px) and (max-width: 991px) {
    #menuMain .navbar-brand { padding-left: 10px; padding-right: 10px; font-size: 24px; }
    #menuMain .navbar-nav > li > a { min-width: 100px; font-size: 16px; }
}
@media (max-width: 991px) {
    .ce-intext .ce-gallery { float: none; width: 100%; margin: 0 0 1rem; }
    .ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery { margin-left: 0; margin-right: 0; }
    .ce-intext .ce-bodytext { margin-left: 0; margin-right: 0; }
    .ce-intext .ce-gallery img { width: auto; max-width: 100%; }
}
@media (max-width: 767px) {
    :root { --wrixum-block-gap: 1.75rem; }
    .container { padding-left: 20px; padding-right: 20px; }
    #templateContentStartsite, #templateMenuContent { padding-top: 1.75rem; }
    #templateContentStartsite > #partialContentMain { padding: 0; }
    #templateContentStartsite > #partialContentMain > .row { margin-left: 0; margin-right: 0; }
    #templateContentStartsite > #partialContentMain > .row > .container > [class*="col-"] { padding-left: 0; padding-right: 0; }
    #menuMain { min-height: 72px; }
    #menuMain .navbar-brand { margin-left: 0; padding: 1.25rem .5rem; font-size: 1.125rem; line-height: 2rem; }
    #menuMain #logoWrapper { margin-right: .25rem; padding: .75rem 0; }
    #logoWrapper img { height: 48px; }
    #menuMain .navbar-nav { margin-top: .5rem; margin-bottom: .75rem; }
    #menuMain .navbar-nav > li { margin-left: 0; }
    #menuMain .navbar-nav > li > a { padding: .75rem 1rem; font-size: 1rem; line-height: 1.5rem; }
    #menuMain .navbar-nav .open .dropdown-menu > li > a { padding: .75rem 1.5rem; color: var(--wrixum-text); line-height: 1.5; }
    #menuMain .navbar-nav .open .dropdown-menu > .active > a { color: #fff; background: var(--wrixum-green); }
    .ce-table th, .ce-table td { padding: .5rem .375rem; }
}
@media (max-width: 640px) {
    .ce-gallery:not([data-ce-columns="1"]) .ce-column { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .carousel-inner > .item { transition-duration: .01s; }
    #menuMain .navbar-nav > li > a { transition: none; }
}

/* Mobile Navigation: native Aufklappfunktion, Desktop-Liste bleibt sichtbar. */
.wrixum-section-menu > summary {
    min-height: 48px;
    padding: .75rem 1rem;
    border-radius: 4px;
    background: var(--wrixum-green);
    color: #fff;
    font-size: 1rem;
    line-height: 1.5;
    cursor: pointer;
}
.wrixum-section-menu > summary:focus-visible { outline: 3px solid var(--wrixum-green); outline-offset: 3px; }
.wrixum-section-menu[open] > summary { margin-bottom: .5rem; }
.wrixum-menu-label { display: inline-block; font-size: .875rem; line-height: 20px; }
@media (min-width: 992px) {
    .wrixum-section-menu > summary { display: none; }
}
@media (max-width: 767px) {
    #menuMain .navbar-toggle { min-height: 44px; margin: .875rem .75rem .875rem 0; padding: .625rem .75rem; }
    #menuMain .navbar-toggle.wrixum-menu-enhanced .icon-bar { display: none; }
}




/* Wetterwidget: Card-Innenabstand entfernen, Widget zentrieren */
#templateContentStartsite .column-2 .csc-frame.well:has(.wcom-default) {
    padding: 16px 0;
    border: 0;
    box-shadow: inset 0 3px #257100,
                0 4px 16px rgb(36 60 22 / 8%);
}

#templateContentStartsite .column-2 .wcom-default {
    margin-left: auto;
    margin-right: auto;
}

/* Feste Widget-Inhalte innerhalb der schmalen Spalte halten */
#templateContentStartsite .column-2 .wcom-default.w300x250 {
    box-sizing: content-box;
    width: 280px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Anbieter-Fußzeile darf ebenfalls nicht überstehen */
#templateContentStartsite .column-2
[id="wcom-b3f98aa4f2b046b3ddc2421110f43e75-weather"]
> div:last-child {
    display: flex;
    align-items: center;
}

#templateContentStartsite .column-2
[id="wcom-b3f98aa4f2b046b3ddc2421110f43e75-weather"]
> div:last-child > div {
    float: none !important;
    min-width: 0;
}

#templateContentStartsite .column-2
[id="wcom-b3f98aa4f2b046b3ddc2421110f43e75-weather"]
> div:last-child > div:last-child {
    flex: 1;
    width: auto !important;
}