body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
/**
 * ================================================================
 * EHEMALS FONTS.CSS (inline statt @import)
 * ================================================================
 */

@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url(../../files/font/AtkinsonHyperlegibleNext-VariableFont_wght.ttf) format('truetype');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url(../../files/font/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf) format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

html,
.root {
    font-size: 16px;
    line-height: 31px;
}

body,
.article {
    font-family: 'Atkinson Hyperlegible', sans-serif !important;
    font-size: 1em;
    line-height: 1.5rem;
    margin: auto;
}

h1,
.h1 {
    font-size: 2.625em;
    line-height: 1.47619048em;
    margin-top: 0.73809524em;
    margin-bottom: 0.73809524em;
    font-weight: 800;
}

h2,
.h2 {
    font-size: 2.625em;
    line-height: 1.47619048em;
    margin-top: 0.73809524em;
    margin-bottom: 0.73809524em;
    font-weight: 600;
}

h3,
.h3 {
    font-size: 1.625em;
    line-height: 1.19230769em;
    margin-top: 1.19230769em;
    font-weight: 600;
}

h4,
.h4 {
    font-size: 1.5em;
    line-height: 1.9375em;
    margin-top: 1.9375em;
}

h5,
.h5 {
    font-size: 1em;
    line-height: 1.9375em;
    margin-top: 1.9375em;
    margin-bottom: 0;
}

p,
ul,
ol,
pre,
table,
blockquote {
    margin-top: 0;
}

ul ul,
ol ol,
ul ol,
ol ul {
    margin-top: 0;
    margin-bottom: 0;
}

strong {
    font-weight: 800;
}

hr,
.hr {
    border: 1px solid;
    margin: -1px 0;
}

a,
b,
i,
strong,
em,
small,
code {
    line-height: 0;
}

sub,
sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/**
 * ================================================================
 * ALL.CSS
 * ================================================================
 * 
 * Globale Basis-Styles, Layout-Komponenten und Seitenweit-definierte Elemente
 * Definiert alle grundlegenden Strukturen, Navigation, Footer und globale Seiten-Elemente
 * 
 * INHALTSVERZEICHNIS:
 * 1. CSS VARIABLEN
 * 2. FOKUS & ACCESSIBILITY
 * 3. LAYOUT & CONTAINER
 * 4. BUTTONS
 * 5. NAVIGATION
 * 6. SCROLL-VERHALTEN
 * 7. FOOTER
 * 8. BREADCRUMBS
 * 9. LISTEN
 */

/* ================================================================
   1. CSS VARIABLEN
   ================================================================ */

:root {
    --farbe1: #672477;
    --farbe2: #104c8c;
    --farbe3: #006e70;
    --farbe4: #b7ce2b;
    --farbe5: #ffe100;
    --white: rgb(255, 255, 255);
    --backgroundcolor: rgb(239, 239, 239, 0.5);
    --black: rgb(0, 0, 0);
    --focus-color: rgb(255, 0, 168);
    --highlight-color: rgba(0, 134, 139, 0.3);
    --highlight-color-sophie: rgba(183, 206, 43, 0.3);
    --highlight-color-jakob: rgba(16, 76, 140, 0.3);
    --highlight-color-anna: rgba(103, 36, 119, 0.3);
}


/* ================================================================
   2. FOKUS & ACCESSIBILITY
   ================================================================ */

/* Nur Tastatur-Navigation: Outline nur bei :focus-visible anzeigen */
*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 5px solid var(--focus-color);
    outline-offset: 3px;
}


/* ================================================================
   3. LAYOUT & CONTAINER
   ================================================================ */

body {
    background-color: var(--white);
    margin: 0;
    overflow-x: hidden;
}

header {
    position: fixed;
    z-index: 100;
    background-color: white;
    inset-inline: 0;
    transition: transform 0.3s ease;
}

#container {
    padding-top: 280px;
    display: flex;
    justify-content: center;
    z-index: 10;
}

#main {
    width: 80%;
}

#main .inside {
    overflow: visible !important;
    display: flow-root;
}

.block {
    overflow: visible !important;
}

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

.skip-link {
    position: absolute;
    top: -12rem;
    left: 3rem;
    padding: 6rem;
    background: var(--black);
    color: var(--white);
    text-decoration: none;
    z-index: 1000;
    border-radius: 999px;
    font-size: 3rem;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 3rem;
}


/* ================================================================
   4. BUTTONS
   ================================================================ */

/* ---- 4.1 Standard Header Buttons ---- */

.button-grid {
    text-align: right;
    margin-right: 5rem;
    position: absolute;
    top: 1.6rem;
    right: 0;
    z-index: 200;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    transition: padding-top 0.3s ease;
}

.btn {
    width: 3rem;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border-style: none;
    background-color: var(--farbe2);
}

.btn:hover {
    cursor: pointer;
    background-color: var(--farbe5);
}

.btn.invalid {
    opacity: 0.8;
    cursor: not-allowed;
    pointer-events: none;
}

.button-grid-footer {
    display: none;
}

/* ---- 4.2 Theme-spezifische Button-Varianten ---- */
.btn-3 {
    color: #ffffff;
    background: linear-gradient(135deg,
            #672477 0%,
            #104c8c 20%,
            #006e70 40%,
            #b7ce2b 60%,
            #ffe100 80%,
            #672477 100%);
    background-size: 200% 200%;
    background-position: 0% 0%;
    outline: 3px solid #ffe100;
    transition: background-position 0.8s ease, outline 0.3s ease;
}

.btn-3:hover {
    background-position: 100% 100%;
    outline: 3px solid var(--farbe2);
}

.btn-4 {
    color: rgb(143, 255, 255);
    background-color: rgb(178, 0, 0);
    outline: 3px solid rgb(143, 255, 255);
}

.btn-4:hover {
    background-color: rgb(143, 255, 255);
    color: rgb(178, 0, 0);
    outline: 3px solid rgb(178, 0, 0);
}

.btn-5 {
    color: rgb(0, 0, 0);
    background-color: rgb(38, 255, 0);
    outline: 3px solid rgb(0, 0, 0);
}

.btn-5:hover {
    background-color: rgb(0, 0, 0);
    color: rgb(38, 255, 0);
    outline: 3px solid rgb(38, 255, 0);
}



/* ================================================================
   5. NAVIGATION
   ================================================================ */

/* ---- 5.1 Navigation Container ---- */

nav {
    padding-top: 0.5rem;
}

/* ---- 5.2 Navigation Layout (Vertical Stack) ---- */

nav.mod_navigation .level_1 {
    display: flex;
    flex-direction: column;
}

nav.mod_navigation .level_1 li {
    order: 1;
    position: relative;
    z-index: 1;
    margin-bottom: -3rem;
    transition: margin-bottom 0.5s ease, opacity 0.5s ease;
}

nav.mod_navigation .level_1 li:hover {
    margin-bottom: -1.5rem;
}

/* ---- 5.3 Aktive und Pfad-Navigationselemente ---- */

nav.mod_navigation .level_1 li.active,
nav.mod_navigation .level_1 li.trail {
    order: 2;
    z-index: 5;
    margin-bottom: -0.5rem;
}

/* ---- 5.4 Navigation Links & Styling ---- */

nav.mod_navigation .level_1 li strong,
nav.mod_navigation .level_1 li a {
    padding-left: 50px;
    padding-top: 35px;
    padding-bottom: 90px;
    display: block;
    border-radius: 1.5rem 1.5rem 0 0;
    color: var(--black);
    text-decoration: none;
    font-size: 2rem;
    transition: all 0.3s ease;
}

/* ---- 5.5 Farbige Navigation (pro Menüpunkt) ---- */

/* Navigation Link 1 - Farbe 4 (Gelb) */
nav.mod_navigation .level_1 li:nth-child(1) strong,
nav.mod_navigation .level_1 li:nth-child(1) a {
    background-color: var(--farbe4);
    color: var(--black);
    padding-top: 40px;
}

/* Navigation Link 2 - Farbe 3 (Türkis) */
nav.mod_navigation .level_1 li:nth-child(2) strong,
nav.mod_navigation .level_1 li:nth-child(2) a {
    background-color: var(--farbe3);
    color: var(--white);
    padding-top: 40px;
}

/* Navigation Link 3 - Farbe 1 (Lila) */
nav.mod_navigation .level_1 li:nth-child(3) strong,
nav.mod_navigation .level_1 li:nth-child(3) a {
    background-color: var(--farbe1);
    color: var(--white);
    padding-top: 40px;
}

/* ---- 5.6 Aktive Navigation Vergrößerung ---- */

nav.mod_navigation .level_1 li.active strong,
nav.mod_navigation .level_1 li.active a,
nav.mod_navigation .level_1 li.trail strong,
nav.mod_navigation .level_1 li.trail a {
    font-size: 4rem;
    padding: 60px 50px;
    font-weight: 800;
    border-radius: 1.5rem 1.5rem 0 0;
}


/* ================================================================
   6. SCROLL-VERHALTEN
   ================================================================ */

/* Header wird bei Scrolling optimiert */
body.scrolled-down header {
    transform: translateY(0);
}

/* Button Grid anpassen wenn Navigation eingeklappt wird */
body.scrolled-down .button-grid {
    padding-top: 1.2rem;
}

/* Nicht-aktive Navigation-Items werden ausgeblendet beim Scrollen */
body.scrolled-down nav.mod_navigation .level_1 li:not(.active):not(.trail) {
    margin-bottom: -8rem;
    opacity: 0;
    pointer-events: none;
}

/* Aktive Items im Scrolled-State bleiben sichtbar */
body.scrolled-down nav.mod_navigation .level_1 li.active,
body.scrolled-down nav.mod_navigation .level_1 li.trail {
    margin-bottom: 0;
}

body.scrolled-down nav.mod_navigation .level_1 li.active strong,
body.scrolled-down nav.mod_navigation .level_1 li.active a,
body.scrolled-down nav.mod_navigation .level_1 li.trail strong,
body.scrolled-down nav.mod_navigation .level_1 li.trail a {
    font-size: 4rem;
    padding: 60px 50px;
    border-radius: 1.5rem 1.5rem 0 0;
}

/* Beim Hover/Focus wird die Navigation wieder ausgeklappt */
body.scrolled-down nav.mod_navigation:hover .level_1 li:not(.active),
body.scrolled-down nav.mod_navigation:focus-within .level_1 li:not(.active) {
    margin-bottom: -1.5rem;
    opacity: 1;
    pointer-events: auto;
}

body.scrolled-down nav.mod_navigation:hover .level_1 li.active strong,
body.scrolled-down nav.mod_navigation:hover .level_1 li.active a,
body.scrolled-down nav.mod_navigation:focus-within .level_1 li.active strong,
body.scrolled-down nav.mod_navigation:focus-within .level_1 li.active a {
    font-size: 4rem;
    padding: 60px 50px;
}


/* ================================================================
   7. FOOTER
   ================================================================ */

/* ---- 7.1 Footer Container ---- */

footer {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    background-color: var(--farbe3);
    border-radius: 0 0 0.8em 0.8em;
    box-sizing: border-box;
    color: var(--white);
    text-decoration: none;
    font-size: 1.2em;
    line-height: 2em;
}

/* ---- 7.2 Dynamische Footer-Farbe (basierend auf aktiver Navigation) ---- */

body:has(nav.mod_navigation .level_1 li:nth-child(1).active) footer {
    background-color: var(--farbe4);
    color: var(--black);
}

body:has(nav.mod_navigation .level_1 li:nth-child(1).active) footer a {
    color: var(--black);
}

body:has(nav.mod_navigation .level_1 li:nth-child(2).active) footer {
    background-color: var(--farbe3);
}

body:has(nav.mod_navigation .level_1 li:nth-child(3).active) footer {
    background-color: var(--farbe1);
}

/* ---- 7.3 Footer Links ---- */

footer a {
    color: var(--white);
}

footer a:hover {
    text-decoration: underline;
}

/* ---- 7.4 Footer Layout ---- */

.site-footer {
    padding: 2rem;
    box-sizing: border-box;
}

.footer-columns {
    display: grid;
    grid-template-columns: 15vw 15vw 20vw 20vw;
    gap: 2rem;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column a {
    text-decoration: none;
}

/* ---- 7.5 Footer Logo ---- */

#footer-logo {
    width: 150%;
    height: auto;
    object-fit: contain;
    display: block;
}

#footer-logo.logo-black {
    display: none;
}

body:has(nav.mod_navigation .level_1 li:nth-child(1).active) #footer-logo.logo-black {
    display: block;
}

body:has(nav.mod_navigation .level_1 li:nth-child(1).active) #footer-logo.logo-default {
    display: none;
}


/* ================================================================
   8. BREADCRUMBS
   ================================================================ */

/* ---- 8.1 Breadcrumb Container ---- */

.mod_breadcrumb {
    padding-left: 3rem;
    margin-bottom: 0.8rem;
}

.mod_breadcrumb ul li a:focus-visible {
    outline: 5px solid var(--focus-color);
    outline-offset: 10px;
}

/* ---- 8.2 Breadcrumb Layout ---- */

nav.mod_breadcrumb {
    display: flex;
    align-items: center;
}

nav.mod_breadcrumb ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.3rem;
}

nav.mod_breadcrumb li {
    display: inline-flex;
    align-items: center;
}

/* ---- 8.3 Breadcrumb Styling ---- */

/* Verstecke erstes Breadcrumb-Item */
nav.mod_breadcrumb li:first-child {
    display: none;
}

/* Trennzeichen zwischen Breadcrumb-Items */
nav.mod_breadcrumb li:not(:last-child)::after {
    content: "»";
    margin: 0 0.5rem;
    color: var(--farbe1);
    font-weight: bold;
}

/* Breadcrumb Links */
nav.mod_breadcrumb a {
    color: var(--farbe2);
    text-decoration: none;
    transition: color 0.3s ease;
}

nav.mod_breadcrumb a:hover {
    color: var(--farbe1);
    text-decoration: underline;
}

/* Aktives Breadcrumb-Item */
nav.mod_breadcrumb li.active {
    color: var(--black);
    font-weight: bold;
}


/* ================================================================
   9. LISTEN
   ================================================================ */

/* Aufzählungszeichen für normale Listen aktivieren */
.beitraege ul:not([class]),
.content ul,
.article ul {
    list-style-type: disc;
    padding-left: 1.5em;
    margin: 1em 0;
}

.beitraege ul:not([class]) li,
.content ul li,
.article ul li {
    margin-bottom: 0.5em;
}


/* ================================================
   SEARCHBAR
   ================================================================ */

.mod_search {
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.mod_search .formbody {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mod_search .widget-text {
    flex: 1;
}

.mod_search .widget-text input[type="search"] {
    width: 100%;
    height: 3.5rem;
    box-sizing: border-box;
    border-radius: 999px;
    border: 2px solid var(--farbe2);
    padding: 0.5rem 1.25rem;
    font-family: inherit;
    font-size: 1rem;
    background-color: transparent;
    overflow: visible;
}

.formbody #ctrl_submit_8 {
    padding: 0.5rem 1rem;
    color: var(--farbe5);
    background-color: var(--farbe2);
    font-size: 1rem;
    transition: ease-in-out 0.3s;
    border-radius: 999px;
    border: none;
    display: inline-flex;
    align-items: center;
    padding-left: 2rem;
}

.formbody #ctrl_submit_8:hover {
    color: var(--farbe2);
    background-color: var(--farbe5);
    cursor: pointer;
}

.formbody #ctrl_submit_8::after {
    content: '';
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    mask-image: url(../../files/icons/Icon_Lupe.svg);
    -webkit-mask-image: url(../../files/icons/Icon_Lupe.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: var(--farbe5);
    transition: ease-in-out 0.3s;
}

.formbody #ctrl_submit_8:hover::after {
    background-color: var(--farbe2);
}


.search-results-bundle {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.search-results-bundle > .search_default {
    box-sizing: border-box;
    flex: 1 1 calc((100% - 2rem) / 3);
}

@media (max-width: 900px) {
    .search-results-bundle > .search_default {
        flex-basis: calc((100% - 1rem) / 2);
    }
}

@media (max-width: 640px) {
    .search-results-bundle > .search_default {
        flex-basis: 100%;
    }
}

/* Container der Suchergebnisse */
.search_default {
    background: var(--backgroundcolor);
    border: 2px solid #e4e6eb;
    border-radius: 2rem;
    padding: 18px 22px;
    display: inline-block;
    width: 100%;
    margin: 0 0 1rem;
    box-sizing: border-box;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    overflow: visible;
    transition: all 0.2s ease;
}

/* Hover Effekt */
.search_default:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* Titel */
.search_default h3 {
    margin: 0 0 6px 0;
    font-weight: 600;
}

/* Titel Link */
.search_default h3 a {
    text-decoration: none;
    color: #1d4ed8;
}

/* Hover Effekt Link */
.search_default h3 a:hover {
    text-decoration: underline;
}

/* Beschreibungstext */
.search_default .context {
    margin: 0;
    font-size: 15px;
    color: #555;
    line-height: 1.5;
}

/* Suchwort Highlight */
.search_default .highlight {
    background: #ffe66d;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
}

/* Default Marker (Dreieck) weg */
.search-results-summary::-webkit-details-marker {
    display: none;
}

.search-results-summary::marker {
    content: "";
}

.search-results-summary {
    list-style: none;
    cursor: pointer;
}

/* Der gemeinsame Rahmen um "Header + Ergebnisse" */
.search-results-toggle {
    border: 2px solid var(--farbe2);
    border-radius: 1.5rem;
    overflow: hidden;

}

/* Summary: nur noch Layout/Padding (keine Border mehr hier) */
.search-results-summary {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.25rem;
}

/* Dein Mask-Icon */
.search-results-summary::before {
    content: "";
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    background-color: var(--farbe2);
    mask-image: url(../../files/icons/pfeile/Klarsicht_Icon_Pfeil_S_S.svg);
    -webkit-mask-image: url(../../files/icons/pfeile/Klarsicht_Icon_Pfeil_S_S.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    transition: transform .15s ease;
}

/* Pfeil drehen wenn offen */
.search-results-toggle[open]>.search-results-summary::before {
    transform: rotate(180deg);
}

/* Wenn offen: nicht mehr pill, sondern "Box" mit normalen Ecken */
.search-results-toggle[open] {
    border-radius: 1.5rem;
}

/* Trennlinie zwischen Summary und Inhalt */
.search-results-toggle[open]>.search-results-summary {
    border-bottom: 2px solid var(--farbe2);
}

/* Ergebnisse innen mit Padding */
.search-results-bundle {
    padding: 1rem 1.25rem 1.25rem;
}

.search-results-summary::before {
    transition: transform .15s ease;
}

/* wenn <details open> */
.search-results-toggle[open]>.search-results-summary::before {
    transform: rotate(-180deg);
}


.mod_search input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer !important;
}

/* ================================================================
    RESPONSIVE DESIGN - TABLET (500px - 768px)
   ================================================================ */

@media screen and (max-width: 768px) and (min-width: 500px) {

    #container {
        padding-top: 220px;
    }

    #main {
        width: 90%;
    }

    nav.mod_navigation .level_1 li strong,
    nav.mod_navigation .level_1 li a {
        font-size: 1.5rem;
        padding-left: 30px;
        padding-top: 25px;
        padding-bottom: 60px;
    }

    nav.mod_navigation .level_1 li {
        margin-bottom: -2rem;
    }

    nav.mod_navigation .level_1 li.active strong,
    nav.mod_navigation .level_1 li.active a,
    nav.mod_navigation .level_1 li.trail strong,
    nav.mod_navigation .level_1 li.trail a {
        font-size: 3rem;
        padding: 40px 30px;
    }

    .button-grid {
        top: 0.5rem;
        left: 1rem;
        position: relative;
        margin-bottom: 1rem;
        text-align: left;
    }

    .footer-columns {
        grid-template-columns: 20vw 20vw 25vw;
        gap: 1.5rem;
    }

    #footer-logo {
        width: 120%;
        margin-left: -3rem;
    }

    .mod_breadcrumb {
        padding-left: 2rem;
        font-size: 0.95rem;
    }

    .mod_search .formbody {
        gap: 0.75rem;
    }

    .mod_search .widget-text input[type="search"] {
        height: 3.25rem;
        padding: 0.5rem 1rem;
    }

    .formbody #ctrl_submit_8 {
        min-height: 3.25rem;
        padding-left: 1.5rem;
        padding-right: 1.25rem;
    }

    .search-results-summary {
        padding: 0.875rem 1rem;
    }

    .search_default {
        border-radius: 1.5rem;
        padding: 16px 18px;
    }

    .search_default h3 {
        font-size: 1.25rem;
        line-height: 1.3;
    }

}


/* ================================================================
   RESPONSIVE DESIGN - MOBILE (max-width: 500px)
   ================================================================ */

@media screen and (max-width: 500px) {

    h1,
    .h1 {
        font-size: 2em !important;
        line-height: 1.47619048em;
        margin-top: 0.73809524em;
        margin-bottom: 0.73809524em;
        font-weight: 800;
    }

    #container {
        padding-top: 180px;
    }

    #main {
        width: 100%;
    }

    header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
    }

    nav.mod_navigation .level_1 {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    nav.mod_navigation .level_1 li {
        margin-bottom: -2rem;
    }

    nav.mod_navigation .level_1 li:hover {
        margin-bottom: -1rem;
    }

    nav.mod_navigation .level_1 li strong,
    nav.mod_navigation .level_1 li a {
        font-size: 1.2rem;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 40px;
        border-radius: 1rem 1rem 0 0;
    }

    nav.mod_navigation .level_1 li:nth-child(1) strong,
    nav.mod_navigation .level_1 li:nth-child(1) a,
    nav.mod_navigation .level_1 li:nth-child(2) strong,
    nav.mod_navigation .level_1 li:nth-child(2) a,
    nav.mod_navigation .level_1 li:nth-child(3) strong,
    nav.mod_navigation .level_1 li:nth-child(3) a {
        padding-top: 20px;
    }

    nav.mod_navigation .level_1 li.active strong,
    nav.mod_navigation .level_1 li.active a,
    nav.mod_navigation .level_1 li.trail strong,
    nav.mod_navigation .level_1 li.trail a {
        font-size: 2rem;
        padding: 30px 20px;
        border-radius: 1rem 1rem 0 0;
    }

    nav.mod_navigation .level_1 li.active,
    nav.mod_navigation .level_1 li.trail {
        margin-bottom: 0;
    }

    body.scrolled-down header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
    }

    body.scrolled-down nav.mod_navigation .level_1 li {
        margin-bottom: -2rem;
    }

    body.scrolled-down nav.mod_navigation .level_1 li:hover {
        margin-bottom: -1rem;
    }

    body.scrolled-down nav.mod_navigation .level_1 li strong,
    body.scrolled-down nav.mod_navigation .level_1 li a {
        font-size: 1.2rem;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 40px;
        border-radius: 1rem 1rem 0 0;
    }

    body.scrolled-down nav.mod_navigation .level_1 li.active strong,
    body.scrolled-down nav.mod_navigation .level_1 li.active a,
    body.scrolled-down nav.mod_navigation .level_1 li.trail strong,
    body.scrolled-down nav.mod_navigation .level_1 li.trail a {
        font-size: 2rem;
        padding: 30px 20px;
        border-radius: 1rem 1rem 0 0;
    }

    body.scrolled-down nav.mod_navigation .level_1 li.active,
    body.scrolled-down nav.mod_navigation .level_1 li.trail {
        margin-bottom: 0;
    }

    .button-grid {
        display: none;
    }

    .footer-columns {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .site-footer {
        padding: 1.5rem;
        font-size: 1rem;
    }

    #footer-logo {
        width: 100%;
        margin-left: 0;
        margin-bottom: 1rem;
    }

    .button-grid-footer {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .mod_breadcrumb {
        display: none !important;
    }

    .skip-link {
        left: 0.5rem;
        padding: 1rem;
    }

    .skip-link:focus,
    .skip-link:focus-visible {
        top: 0.5rem;
    }

    .mod_search {
        padding: 1rem;
    }

    .mod_search .formbody {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .mod_search .widget-text,
    .formbody #ctrl_submit_8 {
        width: 100%;
    }

    .mod_search .widget-text input[type="search"] {
        height: 3.25rem;
        padding: 0.5rem 1rem;
    }

    .formbody #ctrl_submit_8 {
        min-height: 3.25rem;
        justify-content: center;
        padding-left: 1rem;
        padding-right: 1.25rem;
    }

    .search-results-toggle {
        border-radius: 1rem;
    }

    .search-results-summary {
        padding: 0.875rem 1rem;
        align-items: flex-start;
    }

    .search-results-summary::before {
        width: 1.5rem;
        height: 1.5rem;
        flex: 0 0 1.5rem;
        margin-top: 0.15rem;
    }

    .search-results-bundle {
        padding: 0.875rem 1rem 1rem;
    }

    .search_default {
        border-radius: 1.25rem;
        padding: 16px;
    }

    .search_default h3 {
        font-size: 1.125rem;
        line-height: 1.3;
    }

    .search_default .context {
        font-size: 0.95rem;
    }

    /* Unterstreiche alle Links außer Navigation Links und Button Links */
    a:not(.mod_navigation a):not(:has(button)):not(:has(.leitfaden_button)):not(:has(.leitfaden_button_back)) {
        text-decoration: underline !important;
    }
}


/* ================================================================
   RESPONSIVE DESIGN - DESKTOP (min-width: 769px)
   ================================================================ */

@media screen and (min-width: 769px) {

    body {
        font-family: 'Atkinson Hyperlegible', sans-serif !important;
    }
}
/**
 * ================================================================
 * FONTS.CSS
 * ================================================================
 * 
 * Globale Schriftart-Definitionen und typographische Basis-Styles
 * 
 * INHALTSVERZEICHNIS:
 * 1. SCHRIFTARTEN-DEFINITIONEN
 * 2. ROOT & BODY KONFIGURATION
 * 3. ÜBERSCHRIFTEN (H1 - H5)
 * 4. ABSÄTZE & LISTEN
 * 5. INLINE ELEMENTE & ALIGNMENT
 */


/* ================================================================
   1. SCHRIFTARTEN-DEFINITIONEN
   ================================================================ */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url(../../files/font/AtkinsonHyperlegibleNext-VariableFont_wght.ttf) format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url(../../files/font/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf) format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/* ================================================================
   2. ROOT & BODY KONFIGURATION
   ================================================================ */

html,
.root {
  font-size: 16px;
  line-height: 31px;
}

body,
.article {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 1em;
  line-height: 1.5rem;
  margin: auto;
}


/* ================================================================
   3. ÜBERSCHRIFTEN (H1 - H5)
   ================================================================ */

h1,
.h1 {
  font-size: 2.625em;
  line-height: 1.47619048em;
  margin-top: 0.73809524em;
  margin-bottom: 0.73809524em;
  font-weight: 800;
}

h2,
.h2 {
  font-size: 2.625em;
  line-height: 1.47619048em;
  margin-top: 0.73809524em;
  margin-bottom: 0.73809524em;
  font-weight: 600;
}

h3,
.h3 {
  font-size: 1.625em;
  line-height: 1.19230769em;
  margin-top: 1.19230769em;
  font-weight: 600;
}

h4,
.h4 {
  font-size: 1.5em;
  line-height: 1.9375em;
  margin-top: 1.9375em;
}

h5,
.h5 {
  font-size: 1em;
  line-height: 1.9375em;
  margin-top: 1.9375em;
  margin-bottom: 0em;
}


/* ================================================================
   4. ABSÄTZE & LISTEN
   ================================================================ */

p,
ul,
ol,
pre,
table,
blockquote {
  margin-top: 0em;
}

ul ul,
ol ol,
ul ol,
ol ul {
  margin-top: 0em;
  margin-bottom: 0em;
}


/* ================================================================
   5. INLINE ELEMENTE & ALIGNMENT
   ================================================================ */

strong {
  font-weight: 800;
}

hr,
.hr {
  border: 1px solid;
  margin: -1px 0;
}

a,
b,
i,
strong,
em,
small,
code {
  line-height: 0;
}

sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}
/**
 * ================================================================
 * HOME.CSS
 * ================================================================
 * 
 * Startseite (Home) - Spezifische Styles
 * Definiert Layouts und Styling für Hero-Section, Buttons und Article-Sections
 * 
 * INHALTSVERZEICHNIS:
 * 1. HERO SECTION
 * 2. HOME BUTTONS
 * 3. ARTICLE LAYOUTS
 * 4. RESPONSIVE DESIGN
 */


/* ================================================================
   1. HERO SECTION
   ================================================================ */

/* ---- 1.1 Hero Text Container ---- */

#home_text {
    padding-top: 10em;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 800;
    margin-bottom: 2em;
}

#home_text h1 {
    font-size: 7em;
    margin-bottom: 1.2em;
}

/* ---- 1.2 Button Container ---- */

.link_button_home {
    text-decoration: none;
    display: table;
    margin: 0 auto;
    padding-bottom: 3em;
}


/* ================================================================
   2. HOME BUTTONS
   ================================================================ */

/* ---- 2.1 Standard Button Styling ---- */

.button_home {
    background-color: var(--farbe2);
    color: var(--farbe5);
    border-radius: 999px;
    padding: 0.5em 2em;
    display: grid;
    grid-template-columns: auto 3rem;
    grid-gap: 1rem;
    place-items: center;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    text-decoration: none;
    font-size: 2em;
    border: none;
    transition: ease-in-out 0.3s;
}

.button_home:hover {
    background-color: var(--farbe5);
    color: var(--farbe2);
    cursor: pointer;
}

/* ---- 2.2 Button Icons mit Mask (dekorativ) ----
   Icons sind absichtlich mit ::after gemacht, damit sie von Screenreadern
   nicht vorgelesen werden, da sie rein dekorativ sind.
   Mask wird verwendet für einfachere Farbänderung in Themes
*/

/* "Nach oben" Button */
.button_home_top::after {
    content: '';
    display: block;
    width: 4rem;
    height: 4rem;
    mask-image: url(../../files/icons/pfeile/gelb/Klarsicht_Icon_Pfeil_NO_G.svg);
    -webkit-mask-image: url(../../files/icons/pfeile/gelb/Klarsicht_Icon_Pfeil_NO_G.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: var(--farbe5);
    transition: ease-in-out 0.3s;
}

.button_home_top:hover::after {
    background-color: var(--farbe2);
}

/* "E-Mail" Button */
.button_home_email::after {
    content: '';
    display: block;
    width: 4rem;
    height: 4rem;
    mask-image: url(../../files/icons/web/Klarsicht_Icon_Mail_S.svg);
    -webkit-mask-image: url(../../files/icons/web/Klarsicht_Icon_Mail_S.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: var(--farbe5);
    transition: ease-in-out 0.3s;
}

.button_home_email:hover::after {
    mask-image: url(../../files/icons/web/Klarsicht_Icon_Mail_B.svg);
    -webkit-mask-image: url(../../files/icons/web/Klarsicht_Icon_Mail_B.svg);
    background-color: var(--farbe2);
}

/* "Telefon" Button */
.button_home_phone::after {
    content: '';
    display: block;
    width: 4rem;
    height: 4rem;
    mask-image: url(../../files/icons/web/Klarsicht_Icon_Telefon_G.svg);
    -webkit-mask-image: url(../../files/icons/web/Klarsicht_Icon_Telefon_G.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: var(--farbe5);
    transition: ease-in-out 0.3s;
}

.button_home_phone:hover::after {
    mask-image: url(../../files/icons/web/Klarsicht_Icon_Telefon_B.svg);
    -webkit-mask-image: url(../../files/icons/web/Klarsicht_Icon_Telefon_B.svg);
    background-color: var(--farbe2);
}


/* ================================================================
   3. ARTICLE LAYOUTS
   ================================================================ */

/* ---- 3.1 Article 7 (Grid mit Bild und Text) ---- */

#article-7 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5em;
    padding: 4rem;
    margin-top: 4rem;
    background-color: var(--farbe1);
    color: var(--white);
}

#article-7 .content-image {
    height: 100%;
}

#article-7 .content-image figure {
    height: 100%;
    margin: 0;
}

#article-7 .content-image figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- 3.2 Contact Button Grid ---- */

#home-contact_buttons {
    width: 40vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5rem;
    margin: 0 auto;
}

/* ---- 3.3 Article 8 (Abschnitt) ---- */

#article-8 {
    padding-bottom: 9rem;
    padding-top: 5rem;
}

#article-8 h1 {
    margin-bottom: 1em;
}


/* ================================================================
   4. RESPONSIVE DESIGN
   ================================================================ */

/* ---- 4.1 Tablet (500px - 768px) ---- */

@media screen and (max-width: 768px) and (min-width: 500px) {
    #home_text h1 {
        font-size: 5em;
        margin-bottom: 1em;
    }

    #home_text {
        padding-top: 6em;
    }

    .button_home {
        font-size: 1.8em;
    }

    #article-7 {
        grid-template-columns: 1fr;
        padding: 3rem;
        gap: 3em;
    }

    #home-contact_buttons {
        width: 50vw;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    #article-8 {
        padding-bottom: 6rem;
        padding-top: 3rem;
    }
}

/* ---- 4.2 Mobile (max-width: 500px) ---- */

@media screen and (max-width: 500px) {
    #home_text h1 {
        font-size: 3em;
        margin-bottom: 0.8em;
    }

    #home_text {
        padding-top: 3em;
        margin-bottom: 1em;
    }

    .button_home {
        font-size: 1.5em;
        padding: 0.5em 1.5em;
    }

    #article-7 {
        grid-template-columns: 1fr;
        padding: 2rem 2rem;
        gap: 2em;
        margin-top: 2rem;
    }

    #home-contact_buttons {
        width: 80vw;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    #article-8 {
        padding-bottom: 4rem;
        padding-top: 2rem;
        text-align: center;
    }

    .link_button_home {
        padding-bottom: 2em;
    }
}
/**
 * ================================================================
 * LEITFADEN.CSS
 * ================================================================
 * 
 * "Leitfaden" (Guide) Seite - Spezifische Styles
 * Definiert Filter-Buttons, Masonry-Layout, Articles und Navigation
 * 
 * INHALTSVERZEICHNIS:
 * 1. LEITFADEN HEADER
 * 2. FILTER SECTION
 * 3. FILTER BUTTONS
 * 4. MASONRY LAYOUT
 * 5. LEITFADEN BUTTONS
 * 6. ARTICLES
 * 7. RESPONSIVE DESIGN
 */


/* ================================================================
   1. LEITFADEN HEADER
   ================================================================ */

#leitfaden_top {
    font-size: 2rem;
}

#leitfaden_top h1 {
    margin-bottom: 0;
}


/* ================================================================
   2. FILTER SECTION
   ================================================================ */

/* ---- 2.1 Filter Section Layout ---- */

#leitfaden_filter_section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
    align-items: center;
    padding-bottom: 3rem;
}

#filter_buttons_section {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 0;
    margin-bottom: 0;
}


/* ================================================================
   3. FILTER BUTTONS
   ================================================================ */

/* ---- 3.1 Standard Filter Button ---- */

.filter_button {
    background-color: var(--white);
    color: var(--black);
    border: 2px solid var(--black);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    margin-left: 1rem;
    cursor: pointer;
    font-size: 1rem;
    transition: ease-in-out 0.3s;
    display: grid;
    grid-template-columns: 2rem auto;
    place-items: center;
}

#btn_basic,
#btn_typo,
#btn_farbe,
#btn_layout,
#btn_traeger {
    grid-gap: 0.5rem;
}

.filter_button.active {
    background-color: black;
    color: white;
}

.filter_button:active,
.filter_button:hover {
    background-color: var(--black);
    color: var(--white);
    border: 2px solid var(--black);
}

/* ---- 3.2 "Alle" Button ---- */

#btn_alle {
    background-color: var(--white);
    color: var(--black);
    border: 2px solid var(--black);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    margin-left: 1rem;
    cursor: pointer;
    font-size: 1rem;
    transition: ease-in-out 0.3s;
}

#btn_alle:active,
#btn_alle:hover {
    background-color: var(--black);
    color: var(--white);
    border: 2px solid var(--black);
}

/* ---- 3.3 Filter Button Icons ---- */

#btn_basic::before {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    background-image: url(../../files/icons/Kapitel_Icons/schwarz/Klarsicht_Icon_Kapitel_Basics_S.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: ease-in-out 0.3s;
}

#btn_basic:hover::before,
#btn_basic:active::before,
#btn_basic.active::before {
    background-image: url(../../files/icons/Kapitel_Icons/weiss/Klarsicht_Icons_Kapitel_Basics_W.svg);
}

#btn_typo::before {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    background-image: url(../../files/icons/Kapitel_Icons/schwarz/Klarsicht_Icon_Kapitel_Typo_S.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: ease-in-out 0.3s;
}

#btn_typo:hover::before,
#btn_typo:active::before,
#btn_typo.active::before {
    background-image: url(../../files/icons/Kapitel_Icons/weiss/Klarsicht_Icon_Kapitel_Typo_W.svg);
}

#btn_farbe::before {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    background-image: url(../../files/icons/Kapitel_Icons/schwarz/Klarsicht_Icon_Kapitel_Farbe_S.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: ease-in-out 0.3s;
}

#btn_farbe:hover::before,
#btn_farbe:active::before,
#btn_farbe.active::before {
    background-image: url(../../files/icons/Kapitel_Icons/weiss/Klarsicht_Icons_Kapitel_Farbe_W.svg);
}

#btn_layout::before {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    background-image: url(../../files/icons/Kapitel_Icons/schwarz/Klarsicht_Icon_Kapitel_Layout_S.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: ease-in-out 0.3s;
}

#btn_layout:hover::before,
#btn_layout:active::before,
#btn_layout.active::before {
    background-image: url(../../files/icons/Kapitel_Icons/weiss/Klarsicht_Icons_Kapitel_Layout_W.svg);
}

#btn_traeger::before {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    background-image: url(../../files/icons/Kapitel_Icons/schwarz/Klarsicht_Icon_Kapitel_Medien_S.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: ease-in-out 0.3s;
}

#btn_traeger:hover::before,
#btn_traeger:active::before,
#btn_traeger.active::before {
    background-image: url(../../files/icons/Kapitel_Icons/weiss/Klarsicht_Icons_Kapitel_Medien_W.svg);
}


/* ================================================================
   4. MASONRY LAYOUT
   ================================================================ */

/* Mobile-First Approach: 1 column base, erweitert auf Media Queries */

#leitfaden_main {
    column-count: 1;
    column-gap: 2rem;
    column-rule: none;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

/* Masonry items - Saubere Spaltenbrechung */
#leitfaden_main > * {
    break-inside: avoid-column;
    margin-bottom: 4rem;
    display: inline-block;
    width: 100%;
}

#leitfaden_main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- 4.1 Content Text Articles ---- */

#leitfaden_main > .content-text {
    width: 100%;
    background-color: var(--backgroundcolor);
    padding: 2rem;
    border-radius: 3rem;
    margin-bottom: 3rem;
    box-sizing: border-box;
}


/* ================================================================
   5. LEITFADEN BUTTONS
   ================================================================ */

/* ---- 5.1 Button Link Styling ---- */

a:has(.leitfaden_button),
a:has(.leitfaden_button_back) {
    text-decoration: none;
}

/* ---- 5.2 Forward Button ("Weiter") ---- */

.leitfaden_button,
a .leitfaden_button {
    background-color: var(--farbe2);
    color: var(--farbe5);
    border-radius: 999px;
    padding: 0.5em 2em;
    display: grid;
    grid-template-columns: auto 3rem;
    grid-gap: 0.5rem;
    place-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    text-decoration: none;
    font-size: 1.5em;
    border: none;
    transition: ease-in-out 0.3s;
}

.leitfaden_button:hover,
a .leitfaden_button:hover {
    background-color: var(--farbe5);
    color: var(--farbe2);
    cursor: pointer;
    text-decoration: none;
}

.leitfaden_button::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    mask-image: url(../../files/icons/pfeile/gelb/Klarsicht_Icon_Pfeil_NO_G.svg);
    -webkit-mask-image: url(../../files/icons/pfeile/gelb/Klarsicht_Icon_Pfeil_NO_G.svg);
    background-color: var(--farbe5);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    transition: ease-in-out 0.3s;
}

.leitfaden_button:hover::after {
    mask-image: url(../../files/icons/pfeile/blau/Klarsicht_Icon_Pfeil_NO_B.svg);
    -webkit-mask-image: url(../../files/icons/pfeile/blau/Klarsicht_Icon_Pfeil_NO_B.svg);
    background-color: var(--farbe2);
}

/* ---- 5.3 Back Button ("Zurück") ---- */

.leitfaden_button_back,
a.leitfaden_button_back {
    background-color: var(--farbe2);
    color: var(--farbe5);
    border-radius: 999px;
    padding: 0.5em 2em;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 0.5rem;
    place-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-right: auto;
    width: fit-content;
    text-decoration: none;
    font-size: 1.5em;
    border: none;
    transition: ease-in-out 0.3s;
}

.leitfaden_button_back:hover,
a.leitfaden_button_back:hover {
    background-color: var(--farbe5);
    color: var(--farbe2);
    cursor: pointer;
    text-decoration: none;
}

.leitfaden_button_back::before,
a.leitfaden_button_back::before {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    background-image: url(../../files/icons/pfeile/gelb/Klarsicht_Icon_Pfeil_W_G.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: ease-in-out 0.3s;
}

.leitfaden_button_back:hover::before,
a.leitfaden_button_back:hover::before {
    background-image: url(../../files/icons/pfeile/blau/Klarsicht_Icon_Pfeil_W_B.svg);
}


/* ================================================================
   6. ARTICLES
   ================================================================ */

/* ---- 6.1 Articles Container ---- */

.beitraege {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8rem;
}

.beitraege strong {
    font-size: 1.2rem;
    font-weight: 800;
    background-color: var(--highlight-color);
    line-height: 1.8rem;
}

.beitraege li {
    list-style-type: disc;
}

.beitraege h3 {
    margin-bottom: 3rem;
}

#article-13 {
    margin-top: 6rem;
}

/* ---- 6.2 Filter Hidden State ---- */

.filtered-hidden {
    display: none !important;
}


/* ================================================================
   7. RESPONSIVE DESIGN
   ================================================================ */

/* ---- 7.1 Tablet (500px - 1024px) - 2-column layout ---- */

@media screen and (min-width: 500px) and (max-width: 1024px) {
    #leitfaden_top {
        font-size: 1.5rem;
    }

    #leitfaden_filter_section {
        grid-template-columns: 1fr;
        grid-gap: 1.5rem;
    }

    #filter_buttons_section {
        justify-content: center;
        flex-wrap: wrap;
    }

    .filter_button {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
        margin-left: 0.5rem;
    }

    #leitfaden_main {
        column-count: 2;
        column-gap: 1.5rem;
    }

    #leitfaden_main > * {
        margin-bottom: 3rem;
    }

    .leitfaden_button {
        font-size: 1.3em;
        padding: 0.4em 1.5em;
    }

    .beitraege {
        width: 85%;
        margin-top: 6rem;
    }

    #article-13 {
        margin-top: 4rem;
    }
}

/* ---- 7.2 Desktop (1025px+) - 3-column layout ---- */

@media screen and (min-width: 1025px) {
    #leitfaden_main {
        column-count: 3;
        column-gap: 2rem;
    }

    #leitfaden_main > * {
        margin-bottom: 4rem;
    }
}

/* ---- 7.3 Mobile (max-width: 500px) - 1-column layout ---- */

@media screen and (max-width: 500px) {
    #leitfaden_top {
        font-size: 1.2rem;
        margin-left: 1rem;
    }

    #leitfaden_filter_section {
        grid-template-columns: 1fr;
        grid-gap: 1rem;
        padding-bottom: 2rem;
    }

    #leitfaden_filter_section h2 {
        text-align: left;
        margin-left: 1rem;
    }

    #filter_buttons_section {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .filter_button {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
        margin-left: 0.25rem;
    }

    .filter_button.active,
    .filter_button:active,
    .filter_button:hover {
        padding: 0.4rem 0.6rem;
        margin-left: 0.25rem;
        font-size: 0.85rem;
    }

    #leitfaden_main {
        column-count: 1;
        column-gap: 1.5rem;
        max-width: 90%;
    }

    #leitfaden_main > * {
        margin-bottom: 3rem;
    }

    .leitfaden_button {
        font-size: 1.2em;
        padding: 0.4em 1.2em;
    }

    .beitraege {
        width: 85%;
        margin-top: 4rem;
    }

    #article-13 {
        margin-top: 3rem;
    }
}
/**
 * ================================================================
 * UEBER-UNS.CSS
 * ================================================================
 * 
 * "Über uns" (About Us) Seite - Spezifische Styles
 * Definiert Team-Überschriften und Article-Layouts mit Team-Member-Info
 * 
 * INHALTSVERZEICHNIS:
 * 1. HEADER SECTION
 * 2. TEAM SECTION
 * 3. TEAM MEMBER ARTICLES
 * 4. RESPONSIVE DESIGN
 */


/* ================================================================
   1. HEADER SECTION
   ================================================================ */

#article-9 {
    margin-top: 6rem;
    margin-bottom: 6rem;
}


/* ================================================================
   2. TEAM SECTION
   ================================================================ */

#unser-team {
    text-align: center;
    font-size: 2em;
}


/* ================================================================
   3. TEAM MEMBER ARTICLES
   ================================================================ */

/* ---- 3.1 Team Member Layout (Grid: Text + Bild) ---- */

#article-10,
#article-11,
#article-12 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3em;
    padding-bottom: 10em;
    line-height: 2em;
}

#article-10 p,
#article-11 p,
#article-12 p {
    font-size: 1.2em;
}

/* ---- 3.2 Team Member Highlight Colors ---- */

#article-10 strong {
    background-color: var(--highlight-color-anna);
}

#article-11 strong {
    background-color: var(--highlight-color-sophie);
}

#article-12 strong {
    background-color: var(--highlight-color-jakob);
}


/* ================================================================
   4. RESPONSIVE DESIGN
   ================================================================ */

/* ---- 4.1 Tablet (500px - 768px) ---- */

@media screen and (max-width: 768px) and (min-width: 500px) {
    #article-9 {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }

    #unser-team {
        font-size: 1.8em;
    }

    #article-10,
    #article-11,
    #article-12 {
        grid-template-columns: 1fr;
        grid-gap: 2em;
        padding-bottom: 6em;
    }

    #article-10 p,
    #article-11 p,
    #article-12 p {
        font-size: 1.1em;
    }
}

/* ---- 4.2 Mobile (max-width: 500px) ---- */

@media screen and (max-width: 500px) {
    #article-9 {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    #unser-team {
        font-size: 1.5em;
    }

    #article-10,
    #article-11,
    #article-12 {
        grid-template-columns: 1fr;
        grid-gap: 1.5em;
        padding-bottom: 4em;
        line-height: 1.8em;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    /* Text zuerst, dann Bild auf Mobile */
    #article-10 .content-text,
    #article-11 .content-text,
    #article-12 .content-text {
        order: 1;
    }

    #article-10 .content-image,
    #article-11 .content-image,
    #article-12 .content-image {
        order: 2;
    }

    #article-10 p,
    #article-11 p,
    #article-12 p {
        font-size: 1em;
    }
}