/* ==========================================================================
   Sagenhafte Zeiten – Site-Styles (Bootstrap 5.3 Basis)
   ========================================================================== */

/* ---------- Schriften (lokal, WOFF2, Latin-Subset) ---------- */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    /* Light deckt auch "normal" (400) ab – wie im alten Template, wo die
       Light-Datei als Standardschnitt eingebunden war */
    font-weight: 300 400;
    font-display: swap;
    src: url('../Fonts/OpenSans-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../Fonts/OpenSans-Medium.woff2') format('woff2');
}

:root {
    --sz-link: #274a7d;
    --sz-accent: #b81839;
    --sz-slate: #3a4047;
    --sz-gold: #d8a23a;
    --sz-gold-dark: #b8862a;
    --sz-gold-light: #f0c66b;
    --sz-dark: #212529;
    --sz-footer-bg: #caced1;
    --sz-notice-bg: #c00;
    --sz-card-bg: linear-gradient(145deg, #fff, #e6e6e6);
    --sz-card-shadow: 5px 5px 10px #e3e3e3, -5px -5px 10px #fff;
    --sz-card-shadow-hover: 5px 5px 10px #666, -5px -5px 10px #fff;

    --bs-body-font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --bs-body-font-weight: 300;
    --bs-link-color: var(--sz-link);
    --bs-link-color-rgb: 39, 74, 125;
    --bs-link-hover-color: #1b3457;
    --bs-link-hover-color-rgb: 27, 52, 87;
}

/* ---------- Typografie ---------- */
h1, h2, h3, h4, h5, h6, strong, b, th {
    font-weight: 500;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.2rem;
}

.rowheader h2 {
    font-size: 2rem;
    margin-bottom: 1.875rem;
}

/* ---------- Skip-Link ---------- */
.skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    padding: .5rem 1rem;
    background: #fff;
    color: var(--sz-dark);
    border-radius: .25rem;
}

/* ---------- Navigation ---------- */
.navbar-brand {
    max-width: calc(100% - 7.5rem);
    margin-right: 0;
}

.navbar-brand img {
    display: block;
    height: auto;
    max-height: 50px;
    width: 100%;
    max-width: 271px;
}

@media (min-width: 992px) {
    .navbar-brand {
        max-width: none;
        margin-right: 3rem;
    }
}

.navbar .nav-link,
.navbar .dropdown-item {
    font-weight: 300;
}

.navbar .nav-link {
    font-size: 1.2rem;
}

/* Hauptmenü: goldene Linie unter dem aktiven Bereich (und bei Hover) */
.navbar .navbar-nav:not(.language-nav) > .nav-item > .nav-link {
    position: relative;
}

.navbar .navbar-nav:not(.language-nav) > .nav-item > .nav-link.active {
    color: #fff;
}

.navbar .navbar-nav:not(.language-nav) > .nav-item > .nav-link::before {
    content: "";
    position: absolute;
    left: var(--bs-navbar-nav-link-padding-x, .5rem);
    right: var(--bs-navbar-nav-link-padding-x, .5rem);
    bottom: .25rem;
    height: 2px;
    background: var(--sz-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.navbar .navbar-nav:not(.language-nav) > .nav-item > .nav-link:hover::before,
.navbar .navbar-nav:not(.language-nav) > .nav-item > .nav-link:focus-visible::before,
.navbar .navbar-nav:not(.language-nav) > .nav-item > .nav-link.active::before {
    transform: scaleX(1);
}

/* Mobil (aufgeklapptes Menü): goldene Linie links statt unten */
@media (max-width: 991.98px) {
    .navbar .navbar-nav:not(.language-nav) > .nav-item > .nav-link::before {
        left: 0;
        right: auto;
        top: .35rem;
        bottom: .35rem;
        width: 3px;
        height: auto;
        transform: scaleY(0);
        transform-origin: top;
    }

    .navbar .navbar-nav:not(.language-nav) > .nav-item > .nav-link {
        padding-left: .75rem;
    }

    .navbar .navbar-nav:not(.language-nav) > .nav-item > .nav-link:hover::before,
    .navbar .navbar-nav:not(.language-nav) > .nav-item > .nav-link.active::before {
        transform: scaleY(1);
    }
}

/* Untermenü: aktive Seite in Gold */
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
    color: var(--sz-gold-light);
    background-color: rgba(255, 255, 255, .08);
}

/* Sprachumschalter: aktive Sprache hinterlegt */
.language-nav .nav-link.active {
    color: #fff;
    background-color: rgba(255, 255, 255, .12);
    border-radius: .25rem;
}

.language-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 1rem;
    text-transform: uppercase;
}

.lang-flag {
    display: inline-block;
    width: 1.5rem;
    height: 1rem;
    background: center / cover no-repeat;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
    opacity: .75;
    transition: opacity .15s ease;
}

.language-nav .nav-link:hover .lang-flag,
.language-nav .nav-link.active .lang-flag {
    opacity: 1;
}

.lang-flag--flags-de { background-image: url('../Images/Flags/de.svg'); }
.lang-flag--flags-gb { background-image: url('../Images/Flags/gb.svg'); }

/* ---------- Suche in der Navigation ---------- */
.nav-search {
    position: relative;
    align-items: center;
}

.nav-search__input {
    width: 12rem;
    padding: .35rem 2.4rem .35rem .75rem;
    font-weight: 300;
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 2rem;
    transition: width .2s ease, background-color .2s ease;
}

.nav-search__input::placeholder {
    color: rgba(255, 255, 255, .6);
}

.nav-search__input:focus {
    width: 16rem;
    color: #fff;
    background-color: rgba(255, 255, 255, .15);
    border-color: var(--sz-gold);
    box-shadow: 0 0 0 .2rem rgba(216, 162, 58, .3);
}

.nav-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-left: .4rem;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2 2 12' stroke='%23f0c66b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .85;
}

.nav-search__input::-webkit-search-cancel-button:hover {
    opacity: 1;
}

.nav-search__btn {
    position: absolute;
    right: .35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem;
    color: rgba(255, 255, 255, .75);
    background: none;
    border: 0;
}

.nav-search__btn:hover,
.nav-search__btn:focus-visible {
    color: var(--sz-gold-light);
}

@media (min-width: 992px) {
    .navbar-collapse .nav-search {
        margin: 0 1rem;
    }
}

/* Mobil: Lupe neben dem Menü-Button, Suchfeld klappt unter der Leiste auf */
.navbar-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.5rem;
    margin-right: .5rem;
    color: rgba(255, 255, 255, .75);
    background: none;
    border: var(--bs-border-width) solid rgba(255, 255, 255, .15);
    border-radius: var(--bs-navbar-toggler-border-radius, .375rem);
}

.navbar-search-toggle:hover,
.navbar-search-toggle[aria-expanded="true"] {
    color: var(--sz-gold-light);
}

.navbar-search-toggle .search-icon {
    width: 22px;
    height: 22px;
}

#mobileSearch .nav-search {
    padding: .75rem 0 .25rem;
}

#mobileSearch .nav-search__input,
#mobileSearch .nav-search__input:focus {
    width: 100%;
    font-size: 1rem;
}

/* Dropdowns auf dem Desktop zusätzlich per Hover öffnen (wie bisher) */
@media (min-width: 992px) and (hover: hover) {
    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

/* ---------- Hero ---------- */
.hero {
    background-color: var(--sz-dark);
}

.hero__image {
    display: block;
    width: 100%;
    height: clamp(200px, 22vw, 400px);
    object-fit: cover;
    object-position: center;
}

/* ---------- Seitenüberschrift ----------
   Erste Überschrift des ersten Inhaltselements – in mehrspaltigen Layouts
   in jeder Spalte der ersten Reihe – wird grösser dargestellt. */
.site-main .container > .row:first-of-type > [class*="col"] > .frame:first-child > header > :is(h1, h2, h3):first-child {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

/* ---------- Hinweisbox (colPos 20) ---------- */
.notice-box {
    padding-block: 1rem;
    background-color: var(--sz-notice-bg);
    color: #fff;
    font-size: 1.5rem;
}

.notice-box a {
    color: #fff;
}

.notice-box .frame {
    margin: 0;
    padding: 0;
}

/* ---------- Inhalt ---------- */
.site-main > .container {
    padding-block: 1.5rem;
}

.frame {
    clear: both;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.frame-layout-0 {
    margin-bottom: 20px;
}

.frame-layout-1,
.frame-layout-3 {
    margin-bottom: 20px;
    border-radius: 10px;
    background: var(--sz-card-bg);
    box-shadow: var(--sz-card-shadow);
    transition: box-shadow .2s ease;
}

.frame-layout-1:hover,
.frame-layout-3:hover {
    box-shadow: var(--sz-card-shadow-hover);
}

.frame-layout-2 {
    border: 1px solid red;
    padding-inline: 10px;
}

.frame-layout-2:hover {
    background: var(--sz-card-bg);
}

.frame-layout-3 {
    border: 1px solid red;
}

.rowheader .frame {
    padding-block: 0;
}

.ce-column {
    padding-block: 5px;
}

.ce-gallery img,
.ce-uploads img {
    transition: filter .2s ease;
}

/* Fluid Styled Content setzt overflow:hidden (zum Umschliessen der Floats) –
   das schneidet den Schatten ab. flow-root umschliesst Floats ohne abzuschneiden.
   Mit .site-main davor, weil das Standard-CSS erst nach dieser Datei geladen wird. */
.site-main .ce-textpic,
.site-main .ce-image,
.site-main .ce-gallery,
.site-main .ce-row,
.site-main .ce-uploads li,
.site-main .ce-uploads div {
    display: flow-root;
    overflow: visible;
}

/* Zentrierte Bilder: Fluid Styled Content zentriert mit verschobenen Floats
   (.ce-outer/.ce-inner). Ohne overflow:hidden überdecken diese Boxen
   benachbarte Bilder – deshalb hier zentrieren per Flexbox. */
.site-main .ce-center .ce-outer,
.site-main .ce-center .ce-inner {
    position: static;
    float: none;
    right: auto;
}

.site-main .ce-center .ce-row {
    display: flex;
    justify-content: center;
}

/* Alle Inhaltsbilder: Schatten bei Hover/Tastaturfokus.
   drop-shadow folgt der Bildform → auch runde/freigestellte PNGs sehen gut aus */
.ce-gallery img:hover,
.ce-uploads img:hover,
.ce-gallery a:focus-visible img,
.ce-uploads a:focus-visible img {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45));
}

.ce-gallery a:focus-visible,
.ce-uploads a:focus-visible {
    outline: none;
}

.ce-table {
    background: linear-gradient(180deg, #fff, #e6e6e6);
    box-shadow: var(--sz-card-shadow);
}

.contenttable td {
    padding-right: 15px;
}

/* Tabellen (RTE-Tabellen und Inhaltselement "Tabelle") */
.site-main table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.site-main th,
.site-main td {
    padding: .5rem .75rem;
    vertical-align: top;
    border-bottom: 1px solid #dee2e6;
}

.site-main thead th,
.site-main table > tbody > tr:first-child > th:only-child {
    background-color: var(--sz-slate);
    color: #fff;
    font-weight: 500;
    border-bottom: 3px solid var(--sz-gold);
}

.site-main tbody tr:nth-child(even) {
    background-color: #f6f7f8;
}

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

@media (max-width: 767.98px) {
    .ce-right .ce-gallery,
    .ce-left .ce-gallery {
        float: none;
    }
}

/* ---------- Dateilisten (Inhaltselement "Dateilinks") ---------- */
.ce-uploads {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.ce-uploads li {
    list-style: none;
    margin-bottom: 1rem;
}

.ce-uploads li::marker {
    content: none;
}

/* ---------- News ---------- */
.news-item::after {
    content: "";
    display: block;
    clear: both;
}

.newsimage {
    float: right;
    margin: 0 0 1rem 1rem;
}

.newsdate {
    display: block;
    font-size: .9rem;
    color: #6c757d;
}

/* ---------- Buttons (einheitlich: Gold = Hauptaktion, Dunkelgrau = Nebenaktion) ---------- */
.btn-primary,
.tx-indexedsearch-searchbox-button {
    --bs-btn-color: var(--sz-dark);
    --bs-btn-bg: var(--sz-gold);
    --bs-btn-border-color: var(--sz-gold);
    --bs-btn-hover-color: var(--sz-dark);
    --bs-btn-hover-bg: var(--sz-gold-light);
    --bs-btn-hover-border-color: var(--sz-gold-light);
    --bs-btn-active-color: var(--sz-dark);
    --bs-btn-active-bg: var(--sz-gold-dark);
    --bs-btn-active-border-color: var(--sz-gold-dark);
    --bs-btn-disabled-color: var(--sz-dark);
    --bs-btn-disabled-bg: var(--sz-gold);
    --bs-btn-disabled-border-color: var(--sz-gold);
    --bs-btn-focus-shadow-rgb: 216, 162, 58;
    font-weight: 500;
}

.btn-outline-primary,
.btn-secondary {
    --bs-btn-color: var(--sz-slate);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--sz-slate);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sz-slate);
    --bs-btn-hover-border-color: var(--sz-slate);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sz-dark);
    --bs-btn-active-border-color: var(--sz-dark);
    --bs-btn-focus-shadow-rgb: 58, 64, 71;
}

/* Suchbutton von indexed_search hat keine Bootstrap-Klasse */
.tx-indexedsearch-searchbox-button {
    padding: .375rem .75rem;
    border: 1px solid var(--bs-btn-border-color);
    border-radius: .375rem;
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    cursor: pointer;
    transition: background-color .15s ease;
}

.tx-indexedsearch-searchbox-button:hover {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

/* Formularfelder: Fokus in Gold statt Blau */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--sz-gold);
    box-shadow: 0 0 0 .25rem rgba(216, 162, 58, .25);
}

.form-check-input:checked {
    background-color: var(--sz-gold);
    border-color: var(--sz-gold);
}

/* ---------- Formulare ---------- */
.form-group {
    padding-top: 20px;
}

/* ---------- Suche (indexed_search) ---------- */

/* Suchformular */
.tx-indexedsearch-searchbox {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f6f7f8;
    border: 1px solid #e3e6e9;
    border-radius: .75rem;
}

.tx-indexedsearch-searchbox fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.tx-indexedsearch-searchbox legend {
    width: 100%;
    margin-bottom: .25rem;
    font-size: 1.75rem;
    font-weight: 500;
}

.tx-indexedsearch-searchbox .tx-indexedsearch-form {
    flex: 1 1 18rem;
    margin: 0;
}

.tx-indexedsearch-searchbox label {
    display: block;
    margin-bottom: .35rem;
    font-size: .9rem;
    color: #6c757d;
}

.tx-indexedsearch-searchbox input[type="text"],
.tx-indexedsearch-searchbox select {
    width: 100%;
    padding: .6rem .9rem;
    font-size: 1.1rem;
    font-weight: 300;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: .5rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tx-indexedsearch-searchbox input[type="text"]:focus,
.tx-indexedsearch-searchbox select:focus {
    outline: 0;
    border-color: var(--sz-gold);
    box-shadow: 0 0 0 .25rem rgba(216, 162, 58, .25);
}

.tx-indexedsearch-searchbox .tx-indexedsearch-searchbox-button {
    padding: .6rem 1.5rem;
    font-size: 1.1rem;
    border-radius: .5rem;
}

.tx-indexedsearch-searchbox p {
    width: 100%;
    margin: .75rem 0 0;
    font-size: .9rem;
}

/* Erweiterte Suche: Auswahlfelder im Raster */
.tx-indexedsearch-searchbox .tx-indexedsearch-search-for,
.tx-indexedsearch-searchbox .tx-indexedsearch-search-in,
.tx-indexedsearch-searchbox .tx-indexedsearch-search-select-section,
.tx-indexedsearch-searchbox .tx-indexedsearch-search-freeindexuid,
.tx-indexedsearch-searchbox .tx-indexedsearch-search-select-order,
.tx-indexedsearch-searchbox .tx-indexedsearch-search-select-group,
.tx-indexedsearch-searchbox .tx-indexedsearch-search-select-results {
    flex: 1 1 14rem;
}

/* Kopf der Trefferliste */
.tx-indexedsearch-info-sword {
    margin-bottom: .25rem;
    font-size: 1.5rem;
    font-weight: 500;
}

.tx-indexedsearch-info-sword-word {
    color: var(--sz-gold-dark);
}

.tx-indexedsearch-info-sword-word::before { content: "„"; }
.tx-indexedsearch-info-sword-word::after { content: "“"; }

div.tx-indexedsearch-browsebox {
    margin-bottom: 1.25rem;
    font-size: .95rem;
    color: #6c757d;
}

div.tx-indexedsearch-browsebox strong {
    color: var(--bs-body-color);
}

/* Seitenumschaltung als Buttons; ausgeblendet, wenn es nur eine Seite gibt */
ul.tx-indexedsearch-browsebox {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}

ul.tx-indexedsearch-browsebox:has(> li:only-child) {
    display: none;
}

ul.tx-indexedsearch-browsebox a {
    display: inline-block;
    min-width: 2.5rem;
    padding: .35rem .75rem;
    text-align: center;
    text-decoration: none;
    color: var(--sz-slate);
    border: 1px solid #ced4da;
    border-radius: .375rem;
}

ul.tx-indexedsearch-browsebox a:hover {
    border-color: var(--sz-gold);
}

ul.tx-indexedsearch-browsebox a[aria-current="page"],
ul.tx-indexedsearch-browsebox strong a {
    color: var(--sz-dark);
    background: var(--sz-gold);
    border-color: var(--sz-gold);
}

/* Einzelner Treffer */
.tx-indexedsearch-res {
    position: relative;
    margin-bottom: 1rem;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid #e3e6e9;
    border-left: 4px solid var(--sz-gold);
    border-radius: .5rem;
    transition: box-shadow .2s ease, transform .2s ease;
}

.tx-indexedsearch-res:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}

.tx-indexedsearch-res h3 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 .5rem;
    font-size: 1.25rem;
}

.tx-indexedsearch-title a {
    color: var(--sz-dark);
    text-decoration: none;
}

/* Ganze Karte klickbar */
.tx-indexedsearch-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.tx-indexedsearch-res:hover .tx-indexedsearch-title a {
    color: var(--sz-link);
    text-decoration: underline;
    text-decoration-color: var(--sz-gold);
    text-underline-offset: .2em;
}

.tx-indexedsearch-percent {
    flex-shrink: 0;
    padding: .1rem .5rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--sz-slate);
    background: #eef0f2;
    border-radius: 1rem;
}

.tx-indexedsearch-description {
    margin-bottom: .5rem;
    color: #3d4248;
}

.tx-indexedsearch-redMarkup {
    padding: 0 .15em;
    font-weight: 500;
    background: rgba(216, 162, 58, .28);
    border-radius: 2px;
}

/* Metadaten kompakt in einer Zeile */
.tx-indexedsearch-info {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .25rem;
    margin: 0;
    font-size: .85rem;
    color: #6c757d;
}

.tx-indexedsearch-info dt,
.tx-indexedsearch-info dd {
    margin: 0;
    font-weight: 300;
}

.tx-indexedsearch-info dt.tx-indexedsearch-text-item-mtime::before {
    content: "·";
    margin: 0 .4rem 0 .15rem;
}

.tx-indexedsearch-info .tx-indexedsearch-text-item-size {
    display: none;
}

.tx-indexedsearch-info dd.tx-indexedsearch-text-item-path {
    flex-basis: 100%;
    order: -1;
}

.tx-indexedsearch-info dt.tx-indexedsearch-text-item-path {
    display: none;
}

.tx-indexedsearch-info dd.tx-indexedsearch-text-item-path p {
    margin: 0 0 .25rem;
}

.tx-indexedsearch-info dd.tx-indexedsearch-text-item-path a {
    position: relative;
    z-index: 1;
    color: #6c757d;
    text-decoration: none;
}

/* Keine Treffer */
.tx-indexedsearch-noresults {
    padding: 1.5rem;
    text-align: center;
    background: #f6f7f8;
    border-radius: .5rem;
}

/* ---------- Footer ---------- */
.site-footer {
    background-color: var(--sz-footer-bg);
    color: #000;
    padding-block: 1rem;
}

.site-footer p {
    font-size: .8rem;
}

.site-footer h2 {
    font-size: calc(1rem + .5vw);
}

.copyright {
    padding: .6rem;
}

.copyright p {
    margin: 0;
}

@media (max-width: 767.98px) {
    .site-footer p {
        font-size: 1rem;
    }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}