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}
@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%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
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}
.rs-columns {
  clear: both;
  display: inline-block;
  width: 100%;
}

.rs-column {
  float: left;
  width: 100%;
  margin-top: 7.69231%;
  margin-right: 7.69231%;
}
.rs-column.-large-first {
  clear: left;
}
.rs-column.-large-last {
  margin-right: -5px;
}
.rs-column.-large-first-row {
  margin-top: 0;
}
.rs-column.-large-col-1-1 {
  width: 100%;
}
.rs-column.-large-col-2-1 {
  width: 46.15385%;
}
.rs-column.-large-col-2-2 {
  width: 100%;
}
.rs-column.-large-col-3-1 {
  width: 28.20513%;
}
.rs-column.-large-col-3-2 {
  width: 64.10256%;
}
.rs-column.-large-col-3-3 {
  width: 100%;
}
.rs-column.-large-col-4-1 {
  width: 19.23077%;
}
.rs-column.-large-col-4-2 {
  width: 46.15385%;
}
.rs-column.-large-col-4-3 {
  width: 73.07692%;
}
.rs-column.-large-col-4-4 {
  width: 100%;
}
.rs-column.-large-col-5-1 {
  width: 13.84615%;
}
.rs-column.-large-col-5-2 {
  width: 35.38462%;
}
.rs-column.-large-col-5-3 {
  width: 56.92308%;
}
.rs-column.-large-col-5-4 {
  width: 78.46154%;
}
.rs-column.-large-col-5-5 {
  width: 100%;
}
.rs-column.-large-col-6-1 {
  width: 10.25641%;
}
.rs-column.-large-col-6-2 {
  width: 28.20513%;
}
.rs-column.-large-col-6-3 {
  width: 46.15385%;
}
.rs-column.-large-col-6-4 {
  width: 64.10256%;
}
.rs-column.-large-col-6-5 {
  width: 82.05128%;
}
.rs-column.-large-col-6-6 {
  width: 100%;
}
@media screen and (max-width: 900px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-first {
    clear: none;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: left;
  }
  .rs-column.-medium-last {
    margin-right: -5px;
  }
  .rs-column.-medium-first-row {
    margin-top: 0;
  }
  .rs-column.-medium-col-1-1 {
    width: 100%;
  }
  .rs-column.-medium-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-2-2 {
    width: 100%;
  }
  .rs-column.-medium-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-3-3 {
    width: 100%;
  }
  .rs-column.-medium-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-medium-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-medium-col-4-4 {
    width: 100%;
  }
  .rs-column.-medium-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-medium-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-medium-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-medium-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-medium-col-5-5 {
    width: 100%;
  }
  .rs-column.-medium-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-medium-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-medium-col-6-6 {
    width: 100%;
  }
}
@media screen and (max-width: 599px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: none;
  }
  .rs-column.-medium-last {
    margin-right: 7.69231%;
  }
  .rs-column.-medium-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-small-first {
    clear: left;
  }
  .rs-column.-small-last {
    margin-right: -5px;
  }
  .rs-column.-small-first-row {
    margin-top: 0;
  }
  .rs-column.-small-col-1-1 {
    width: 100%;
  }
  .rs-column.-small-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-small-col-2-2 {
    width: 100%;
  }
  .rs-column.-small-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-small-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-small-col-3-3 {
    width: 100%;
  }
  .rs-column.-small-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-small-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-small-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-small-col-4-4 {
    width: 100%;
  }
  .rs-column.-small-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-small-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-small-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-small-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-small-col-5-5 {
    width: 100%;
  }
  .rs-column.-small-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-small-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-small-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-small-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-small-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-small-col-6-6 {
    width: 100%;
  }
}

:root {
  --blue: #11263f;
  --messing: #c8a461;
  --beige: #F8F6F6;
  --grey: #E8E9E8;
  --white: #fff;
}
@font-face {
  font-family: 'Manrope Extra Light';
  src: url('../../files/SIG/fonts/Manrope-ExtraLight.ttf')  format('truetype') ;
}

@font-face {
  font-family: 'Manrope Light';
  src: url('../../files/SIG/fonts/Manrope-Light.ttf')  format('truetype') ;
}

@font-face {
  font-family: 'Manrope Regular';
  src: url('../../files/SIG/fonts/Manrope-Regular.ttf')  format('truetype') ;
}
@font-face {
  font-family: 'Manrope Bold';
  src: url('../../files/SIG/fonts/Manrope-Bold.ttf')  format('truetype') ;
}
@font-face {
  font-family: 'Manrope Semi Bold';
  src: url('../../files/SIG/fonts/Manrope-SemiBold.ttf')  format('truetype') ;
}
@font-face {
  font-family: 'Spectral Extra Light';
  src: url('../../files/SIG/fonts/Spectral-ExtraLight.ttf')  format('truetype') ;
}
@font-face {
  font-family: 'Spectral Light';
  src: url('../../files/SIG/fonts/Spectral-Light.ttf')  format('truetype') ;
}
@font-face {
  font-family: 'Spectral Regular';
  src: url('../../files/SIG/fonts/Spectral-Regular.ttf')  format('truetype') ;
}
@font-face {
  font-family: 'Spectral Semi Bold';
  src: url('../../files/SIG/fonts/Spectral-SemiBold.ttf')  format('truetype') ;
}
body {
  font-family: 'Manrope Regular', sans-serif;
  color: var(--blue);
  font-size: 13px;
  background-color:var(--white);
}
body p {
      line-height:1.5em;
}
#main .mod_article {
  padding: 35px 0px;
}

#spacer.mod_article{
  padding:0px;!important
}
#spacer img {
  width:100%;
}

/*
#header {
      background-color: var(--grey);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1500;
    border-bottom: 1px solid var(--messing);
}

*/

#hero {
  background-image: url('../../files/SIG/img/teaser.png');
  background-size:cover;
  min-height:50vh;
  position:relative;
  
}
#hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(17,38,63,0.82) 43%,
        rgba(17,38,63,0.55) 56%,
        rgba(17,38,63,0.18) 80%,
        rgba(17,38,63,0) 100%
    );

    z-index: 1;
}
#hero > div {
  z-index:2;
  position:relative;
}
hr {
        border: none;
    height: 4px;
    background: var(--messing);
    width: 120px;
    text-align:center;
}

.border {
  border:1px solid var(--blue);
  margin-top:10px;
  margin-bottom:10px;
  
}

#inner {
   width: 85%;
    margin: auto; 
}


.rel {
  position: relative;
}

.blue {
  color:var(--blue);
}
.beige {
  color:var(--beige);
}
.grey {
  color:var(--grey);
}
.messing {
  color:var(--messing);
}
.white {
  color:var(--white);
}
.white a {
  color:var(--white);
}
.bg-blue {
  background-color: var(--blue);
}
.bg-beige {
  background-color: var(--beige);
}
.bg-grey {
  background-color: var(--grey);
}
h1 {
  font-size: 3em;
  font-family: 'Spectral Light', sans-serif;
  padding: 0 0 10px 0;
  line-height: 1.2;
  letter-spacing: -1.1px;
  }

h2 {
  text-align:center;
  font-size: 2.2em;
  padding: 0 0 10px 0;
  font-family: 'Spectral Light', sans-serif;
}

#hero h2 {
  font-size:3em;
  text-align:left;
  font-family: 'Spectral Light', sans-serif;
  line-height:1em;
}

h3 {
  font-size: 1.8em;
  padding: 0 0 10px 0;
  font-family: 'Spectral Light', sans-serif;
}

h4 {
  font-size: 1.6em;
  line-height: 1.4;
  font-family: 'Spectral Light', sans-serif;
}

h5 {
    font-size:1.2em;
    line-height: 1.4;
    font-family: 'Manrope Bold', sans-serif;
    color: var(--messing);
}
p {
  font-size:1.1em;
}

.divider {
    border: none;
    height: 1px;
    background: var(--messing);
    width: 120px;
    margin-left:0px;
    margin-top:40px;
    margin-bottom:40px;
}

.cbar .rs-column:not(:last-child) {
    border-right: 1px solid #ccc; /* Farbe und Stärke anpassen */
    padding-right: 20px;

}
.cbar .rs-column {
    padding-left: 20px;
        margin-right:20px;
}


/* ==========================================================
   WOFÜR WIR STEHEN
   Nur bereichsspezifische Gestaltung
   RockSolid-Spalten bleiben unangetastet
========================================================== */

#wofuer-wir-stehen {
    padding-top: 70px;
    padding-bottom: 70px;
}


/* ==========================================================
   LINKE SPALTE
   Erste direkte Spalte innerhalb der RockSolid-Gruppe
========================================================== */

#wofuer-wir-stehen .rs-columns > .rs-column:first-child > .content-text {
    padding-right: 40px;
}

#wofuer-wir-stehen .rs-columns > .rs-column:first-child h2 {
    text-align: left;
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: 24px;
    padding-bottom: 0;
}

#wofuer-wir-stehen .rs-columns > .rs-column:first-child p {
    line-height: 1.7;
}

#wofuer-wir-stehen .rs-columns > .rs-column:first-child p:last-child {
    margin-bottom: 0;
}

#wofuer-wir-stehen .rs-columns > .rs-column:first-child .messing {
    display: inline-block;
    margin-bottom: 14px;
    letter-spacing: 0.14em;
    font-family: "Manrope Semi Bold", sans-serif;
}


/* Den leeren ersten Absatz mit   ausblenden */

#wofuer-wir-stehen
.rs-columns
> .rs-column:first-child
.rte
> p:first-child {
    display: none;
}


/* ==========================================================
   RECHTE SPALTE
   Zweite direkte Spalte innerhalb der RockSolid-Gruppe
========================================================== */

#wofuer-wir-stehen .rs-columns > .rs-column:last-child {
    position: relative;
}


/* Vertikale Trennlinie ohne Einfluss auf Spaltenbreite */

#wofuer-wir-stehen .rs-columns > .rs-column:last-child::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background-color: rgba(17, 38, 63, 0.12);
}


/* Nur der Inhalt bekommt einen festen, kontrollierten Abstand */

#wofuer-wir-stehen
.rs-columns
> .rs-column:last-child
> .content-text {
    margin-left: 40px;
}


/* Werteblöcke */

#wofuer-wir-stehen
.rs-columns
> .rs-column:last-child
> .content-text:not(:last-child) {
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(17, 38, 63, 0.1);
}


/* Werteüberschriften */

#wofuer-wir-stehen
.rs-columns
> .rs-column:last-child
h4 {
    position: relative;
    text-align: left;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 14px;
    padding-bottom: 12px;
}


/* Messinglinie */

#wofuer-wir-stehen
.rs-columns
> .rs-column:last-child
h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: var(--messing);
}


/* Wertetexte */

#wofuer-wir-stehen
.rs-columns
> .rs-column:last-child
p {
    line-height: 1.7;
    margin-top: 0;
    margin-bottom: 0;
}


/* ==========================================================
   NACHFOLGENDE CONTENT-TEXT-BLÖCKE
   Außerhalb der RockSolid-Spalten
========================================================== */

#wofuer-wir-stehen > #inner > .content-text {
    margin-top: 60px;
}

#wofuer-wir-stehen > #inner > .content-text hr {
    margin-top: 0;
    margin-bottom: 30px;
}

#wofuer-wir-stehen > #inner > .content-text h2 {
    margin-bottom: 20px;
}

#wofuer-wir-stehen > #inner > .content-text p {
    line-height: 1.7;
}


/* ==========================================================
   MOBILE
   RockSolid übernimmt die Reihenfolge untereinander
========================================================== */

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

    #wofuer-wir-stehen {
        padding-top: 50px;
        padding-bottom: 50px;
    }


    /* Linke Spalte */

    #wofuer-wir-stehen
    .rs-columns
    > .rs-column:first-child
    > .content-text {
        padding-right: 0;
        margin-bottom: 42px;
    }


    /* Rechte Spalte */

    #wofuer-wir-stehen
    .rs-columns
    > .rs-column:last-child::before {
        display: none;
    }

    #wofuer-wir-stehen
    .rs-columns
    > .rs-column:last-child
    > .content-text {
        margin-left: 0;
    }


    /* Werteblöcke */

    #wofuer-wir-stehen
    .rs-columns
    > .rs-column:last-child
    > .content-text:not(:last-child) {
        padding-bottom: 24px;
        margin-bottom: 24px;
    }


    /* Nachfolgende Textblöcke */

    #wofuer-wir-stehen > #inner > .content-text {
        margin-top: 45px;
    }
}






/* ==========================================================
   UNSER ANSATZ
   Minimal Cards
========================================================== */

#ansatz{
    padding:80px 0;
}

/* Überschrift */

#ansatz > #inner > .content-text:first-child{
    margin-bottom:45px;
}


/* etwas weniger Abstand zwischen den Spalten */

#ansatz .rs-column{
    margin-bottom:22px;
}


/* Karte */

#ansatz .rs-column > .content-text{

    height:100%;

    background:#fff;

    border:1px solid rgba(17,38,63,.08);


    padding:30px 24px;

    box-sizing:border-box;

    box-shadow:
        0 3px 12px rgba(17,38,63,.04);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


/* Hover */

#ansatz .rs-column > .content-text:hover{

    transform:translateY(-3px);

    border-color:rgba(200,164,97,.30);

    box-shadow:
        0 10px 22px rgba(17,38,63,.08);

}


/* Überschrift */

#ansatz h3{

    text-align:center;

    margin:0 0 18px;

    position:relative;

    padding-bottom:16px;
}


/* kleine Messinglinie */

#ansatz h3::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:48px;

    height:2px;

    background:var(--messing);

}


/* Absatz */

#ansatz p:last-child{
    margin-bottom:0;
}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width:767px){

    #ansatz{
        padding:60px 0;
    }

    #ansatz > #inner > .content-text:first-child{
        margin-bottom:35px;
    }

    #ansatz .rs-column{
        margin-bottom:18px;
    }

    #ansatz .rs-column > .content-text{

        padding:26px 22px;

        border-radius:6px;
    }

}


/* ==================================================
   ELEGANTE INLINE-LINKS
================================================== */

#main .content-text a {
    position: relative;
    display: inline;
    color: var(--blue);
    font-weight: 500;
    text-decoration: none;

    background-image: linear-gradient(
        var(--messing),
        var(--messing)
    );

    background-repeat: no-repeat;
    background-position: left calc(100% - 1px);
    background-size: 100% 1px;

    overflow-wrap: anywhere;

    transition:
        color 0.25s ease,
        background-size 0.25s ease;
}

#main .content-text a:hover {
    color: var(--messing);
    background-size: 0 1px;
}

#main .content-text a:visited {
    color: var(--blue);
}

#main .content-text a:visited:hover {
    color: var(--messing);
}

#main .content-text a:focus-visible {
    color: var(--messing);
    outline: 1px solid var(--messing);
    outline-offset: 5px;
}
@media screen and (max-width: 900px) {
	#inner {
	width:95%;!important		
	}
}

@media (max-width: 599px) {

    #spacer img {
        width: 100%;
        height: 240px;

        object-fit: cover;

        /*
         * Horizontal | Vertikal
         * Hiermit verschiebst du den sichtbaren Ausschnitt.
         */
        object-position: 75% 75%;
    }
}
#footer {
  background-color: var(--blue);
  padding-top:20px;
  padding-bottom:10px;
}

#footer p a {
  color:var(--white);
  text-decoration:none;
}
#footer p a:hover {
  color:var(--white);
}
/* ==================================================
   FOOTER – zweizeilig, schlank und elegant
   RS-Columns-Layout bleibt unangetastet
================================================== */

#footer {
    position: relative;
    background: var(--blue);
    color: var(--white);
    border-top: 1px solid rgba(200, 164, 97, 0.28);
}

/* Globale Artikelabstände im Footer aufheben */
#footer .mod_article {
    padding: 0;
}

#footer .inside {
    padding: 30px 0 22px;
}

#footer #inner {
    width: min(1180px, calc(100% - 48px));
    max-width: none;
    margin: 0 auto;
}

/* ==================================================
   Erste Zeile: Logo und Impressum
================================================== */

/*
   Kein display:grid oder display:flex auf .rs-columns.
   RS Columns bestimmt weiterhin die Spaltenbreiten.
*/

#footer .rs-column {
    box-sizing: border-box;
    padding: 0 16px;
}

/* Nur die Inhalte innerhalb der Spalten ausrichten */
#footer .rs-column > .content-text > .rte {
    display: flex;
    align-items: center;
    min-height: 58px;
}

#footer .rs-column:first-child > .content-text > .rte {
    justify-content: flex-start;
}

#footer .rs-column:last-child > .content-text > .rte {
    justify-content: flex-end;
}

#footer .rs-column p {
    margin: 0;
}

/* Inline-Zentrierung des HTML überschreiben */
#footer .rs-column:first-child p {
    width: 100%;
    text-align: left !important;
}

#footer .rs-column:last-child p {
    width: 100%;
    text-align: right !important;
}

/* ==================================================
   Logo
================================================== */

#footer .rs-column:first-child img {
    display: block;
    width: 155px;
    max-width: 100%;
    height: auto;
    margin: 0 !important;
    opacity: 0.94;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

#footer .rs-column:first-child img:hover {
    opacity: 1;
    transform: translateY(-1px);
}

/* ==================================================
   Impressum-Link
================================================== */

#footer a {
    position: relative;
    display: inline-block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.25s ease;
}

#footer a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -4px;
    left: 0;
    height: 1px;
    background: var(--messing);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

#footer a:hover,
#footer a:focus-visible {
    color: var(--messing);
}

#footer a:hover::after,
#footer a:focus-visible::after {
    transform: scaleX(1);
}

#footer a:focus-visible {
    outline: 1px solid var(--messing);
    outline-offset: 6px;
}

/* ==================================================
   Zweite Zeile: Copyright
================================================== */

#footer #inner > .white.content-text {
    clear: both;
    margin-top: 18px;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#footer #inner > .white.content-text .rte {
    display: block;
    min-height: 0;
}

#footer #inner > .white.content-text p {
    margin: 0;
    padding: 0 16px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.76rem;
    line-height: 1.55;
    letter-spacing: 0.025em;
    text-align: center !important;

    /* Verhindert Überlaufen bei schmalen Fenstern */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Dezenter Messingakzent */
#footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 70px;
    height: 1px;
    background: var(--messing);
    transform: translateX(-50%);
}

/* ==================================================
   Mobile
   RS Columns übernimmt weiterhin das Stapeln
================================================== */

@media (max-width: 768px) {

    #footer .inside {
        padding: 28px 0 22px;
    }

    #footer #inner {
        width: calc(100% - 36px);
    }

    #footer .rs-column {
        padding: 8px 0;
    }

    #footer .rs-column > .content-text > .rte {
        justify-content: center;
        min-height: auto;
    }

    #footer .rs-column:first-child p,
    #footer .rs-column:last-child p {
        text-align: center !important;
    }

    #footer .rs-column:first-child img {
        width: 145px;
        margin: 0 auto !important;
    }

    #footer #inner > .white.content-text {
        margin-top: 14px;
        padding-top: 16px;
    }

    #footer #inner > .white.content-text p {
        padding: 0;
        font-size: 0.74rem;
    }
}

/* ==================================================
   Reduzierte Bewegung
================================================== */

@media (prefers-reduced-motion: reduce) {

    #footer img,
    #footer a,
    #footer a::after {
        transition: none;
    }

    #footer .rs-column:first-child img:hover {
        transform: none;
    }
}
/* ==================================================
   SAAR Investment – Kontaktbereich
   Reduziert, elegant und sauber zentriert

   WICHTIG:
   - kein eigenes Grid
   - kein Flex auf .rs-columns
   - keine eigenen Spaltenbreiten
   - float und width bleiben bei RockSolid Columns
================================================== */
#kontakt {
  background-image: url('../../files/SIG/img/Horizont.png');
  background-size:cover;
  background-position:center;
  min-height:20vh;
  position:relative;
  
}
#kontakt {
    position: relative;
    padding: 110px 0 100px;
    overflow: hidden;
    isolation: isolate;
    color: var(--white);
}

/* Dunkles Overlay für gute Lesbarkeit */

#kontakt::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(10, 20, 32, 0.66);
}

/* ==================================================
   Inhaltsbreite
================================================== */

#kontakt #inner {
    position: relative;
    width: min(1200px, calc(100% - 48px));
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

/* ==================================================
   Hauptüberschrift
================================================== */

#kontakt h2 {
    max-width: 900px;
    margin: 0 auto;
    color: var(--white);
    font-size: 2.5rem;
    line-height: 1.15;
    font-weight: 300;
    letter-spacing: -0.02em;
    text-align: center;
}

/* ==================================================
   Claim-Zeile
================================================== */

#kontakt .messing {
    display: block;
    margin: 28px 0 72px;
    color: var(--messing);
    font-size: 0.82rem;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-align: center;
    text-transform: uppercase;
}

/* ==================================================
   RockSolid Columns

   Die Spaltenbreiten, Floats und regulären Abstände
   werden weiterhin vom RS-Columns-Stylesheet bestimmt.
================================================== */

#kontakt .rs-column {
    position: relative;
}

/*
   RS Columns gibt allen Spalten zunächst einen rechten
   Abstand. Bei der letzten aktiven Spalte einer Reihe
   wird dieser Abstand gezielt entfernt.

   Die Breakpoints entsprechen der üblichen Einteilung:
   Large ab 900 px
   Medium 600–899 px
   Small bis 599 px
*/

/* Large */

@media (min-width: 900px) {

    #kontakt .rs-column.-large-last {
        margin-right: 0;
    }

    #kontakt .rs-column.-large-first-row {
        margin-top: 0;
    }
}

/* Medium */

@media (min-width: 600px) and (max-width: 899px) {

    #kontakt .rs-column.-medium-last {
        margin-right: 0;
    }

    #kontakt .rs-column.-medium-first-row {
        margin-top: 0;
    }
}

/* Small */

@media (max-width: 599px) {

    #kontakt .rs-column.-small-last {
        margin-right: 0;
    }

    #kontakt .rs-column.-small-first-row {
        margin-top: 0;
    }
}

/* ==================================================
   Innenbereiche der Spalten

   Der Innenabstand sitzt bewusst auf .content-text
   und nicht direkt auf .rs-column. Dadurch bleibt
   die Breitenberechnung von RS Columns unverändert.
================================================== */

#kontakt .rs-column > .content-text {
    min-height: 100%;
    padding: 20px 30px;
    box-sizing: border-box;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ==================================================
   Inhalte exakt innerhalb der Spalten zentrieren
================================================== */

#kontakt .rs-column > .content-text > .rte {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100%;
    text-align: center;
}

#kontakt .rs-column .rte > p {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    text-align: center !important;
}

/* ==================================================
   Trennlinien

   Bei den 3-Spalten-Layouts liegt die Linie ungefähr
   in der Mitte des von RS erzeugten Spaltenabstands.
================================================== */

@media (min-width: 600px) {

    #kontakt .rs-column:not(:first-child)::before {
        content: "";
        position: absolute;
        top: 8%;
        bottom: 8%;
        left: -13.63636%;
        width: 1px;
        background: rgba(255, 255, 255, 0.28);
    }
}

/* ==================================================
   Einheitlicher Icon-Bereich
================================================== */

#kontakt .rs-column .rte > p:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-bottom: 24px;
}

#kontakt img {
    display: block;
    width: 48px;
    max-width: 100%;
    height: auto;
    margin: 0 !important;
    opacity: 0.92;
    filter: none;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

/* ==================================================
   Einheitlicher Textbereich
================================================== */

#kontakt .rs-column .rte > p:last-child {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 3.3em;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.65;
    font-weight: 300;
    text-align: center !important;
}

/* Verschachtelte Text-Spans */

#kontakt .rs-column .rte > p:last-child > span {
    display: block;
    width: 100%;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

/* ==================================================
   Links
================================================== */

#main #kontakt a {
    position: relative;
    display: inline-block;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.9);!important
    line-height: 1.65;
    font-weight: 300;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color 0.25s ease;
}

#kontakt a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -3px;
    left: 0;
    height: 1px;
    background: var(--messing);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

#kontakt a:hover,
#kontakt a:focus-visible {
    color: var(--messing);
}

#kontakt a:hover::after,
#kontakt a:focus-visible::after {
    transform: scaleX(1);
}

#kontakt a:focus-visible {
    outline: 1px solid var(--messing);
    outline-offset: 6px;
}

/* ==================================================
   Subtile Bewegung
================================================== */

#kontakt .rs-column:hover img {
    opacity: 1;
    transform: translateY(-3px);
}

/* ==================================================
   Kompaktere Darstellung auf Tablets
================================================== */

@media (max-width: 768px) {

    #kontakt {
        padding: 80px 0 70px;
    }

    #kontakt #inner {
        width: calc(100% - 36px);
    }

    #kontakt h2 {
        font-size: 2.3rem;
    }

    #kontakt .messing {
        margin: 22px 20px 44px;
        font-size: 0.74rem;
        letter-spacing: 0.22em;
    }

    #kontakt .rs-column > .content-text {
        padding-right: 20px;
        padding-left: 20px;
    }


}

/* ==================================================
   Smartphone

   RS Columns stapelt die Spalten selbst.
   Hier wird nur die innere Darstellung angepasst.
================================================== */

@media (max-width: 599px) {

    #kontakt .rs-column > .content-text {
        padding: 30px 18px;
    }

    /* Horizontale Trennlinien */

    #kontakt .rs-column:not(:first-child)::before {
        content: "";
        position: absolute;
        top: 0;
        right: 18%;
        bottom: auto;
        left: 18%;
        width: auto;
        height: 1px;
        background: rgba(255, 255, 255, 0.28);
    }

    #kontakt .rs-column .rte > p:first-child {
        min-height: 44px;
        margin-bottom: 18px;
    }

    #kontakt img {
        width: 44px;
    }

    /*
       Mobil stehen die Spalten untereinander.
       Eine gemeinsame Texthöhe ist dann nicht nötig.
    */

    #kontakt .rs-column .rte > p:last-child {
        min-height: 0;
    }
}

/* ==================================================
   Sehr kleine Displays
================================================== */

@media (max-width: 420px) {

    #kontakt {
        padding: 66px 0 58px;
    }

    #kontakt #inner {
        width: calc(100% - 28px);
    }

    #kontakt h2 {
        font-size: 2rem;
    }

    #kontakt .messing {
        margin-right: 0;
        margin-left: 0;
        font-size: 0.69rem;
        letter-spacing: 0.16em;
    }
}

/* ==================================================
   Reduzierte Bewegung
================================================== */

@media (prefers-reduced-motion: reduce) {

    #kontakt img,
    #kontakt a,
    #kontakt a::after {
        transition: none;
    }

    #kontakt .rs-column:hover img {
        transform: none;
    }
}
/* ==================================================
   SAAR Investment – Portfolio-Teaser
   Elegant, hochwertig und reduziert

   Das RS-Spaltensystem bleibt unangetastet:
   - kein eigenes Grid
   - kein Flex auf .rs-columns
   - keine eigenen Spaltenbreiten
   - keine Änderungen an Float oder Spalten-Margins
================================================== */

#portfolio {
    position: relative;
    padding: 100px 0 110px;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            var(--white) 0%,
            var(--beige) 100%
        );
}



/* ==================================================
   Bereichsüberschrift
================================================== */

#portfolio > .content-text {
    position: relative;
    max-width: 820px;
    margin: 0 auto 62px;
    padding: 0 24px;
    text-align: center;
}

#portfolio > .content-text .rte {
    text-align: center;
}

#portfolio > .content-text p {
    margin: 0;
    text-align: center !important;
}

/* Leere Abstandzeile aus dem HTML ausblenden */

#portfolio > .content-text .rte > p:last-child {
    display: none;
}

/* PORTFOLIOAUSZUG */

#portfolio > .content-text .messing {
    display: inline-block;
    color: var(--messing);
    font-family: "Manrope Semi Bold", sans-serif;
    font-size: 1.2rem;
    line-height: 1.5;
    font-weight: normal;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

/* Überschrift */

#portfolio > .content-text h2 {
    margin: 17px 0 22px;
    padding: 0;
    color: var(--blue);
    font-family: "Spectral Light", serif;
    font-size: clamp(2.25rem, 4vw, 3.35rem);
    line-height: 1.08;
    font-weight: normal;
    letter-spacing: -0.025em;
    text-align: center !important;
}

/* Schlanke Messinglinie */

#portfolio > .content-text hr {
    width: 68px;
    height: 1px;
    margin: 0 auto;
    border: 0;
    background: var(--messing);
}

/* ==================================================
   RS-Spalten

   Hier werden keine Breiten, Margins, Floats oder
   Layoutmethoden gesetzt.
================================================== */

#portfolio .rs-column {
    position: relative;
}

/* ==================================================
   Objektbild
================================================== */

#portfolio .rs-column > .content-image {
    position: relative;
    z-index: 2;
}

#portfolio .rs-column > .content-image figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--blue);
    border-radius: 2px 2px 0 0;
}

/* Dezenter dunkler Verlauf über dem Bild */

#portfolio .rs-column > .content-image figure::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(17, 38, 63, 0) 48%,
        rgba(17, 38, 63, 0.33) 100%
    );
}

/* Projektnummern 

#portfolio .rs-columns > .rs-column:nth-child(1) figure::after {
    content: "01";
}

#portfolio .rs-columns > .rs-column:nth-child(2) figure::after {
    content: "02";
}

#portfolio .rs-columns > .rs-column:nth-child(3) figure::after {
    content: "03";
}
*/
#portfolio .rs-column > .content-image figure::after {
    position: absolute;
    right: 18px;
    bottom: 15px;
    z-index: 2;
    color: rgba(255, 255, 255, 0.88);
    font-family: "Manrope Light", sans-serif;
    font-size: 0.68rem;
    line-height: 1;
    letter-spacing: 0.2em;
}

#portfolio .rs-column > .content-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.001);
    transition:
        transform 0.7s cubic-bezier(0.2, 0.65, 0.3, 1),
        opacity 0.35s ease;
}

/* ==================================================
   Objekttext
================================================== */

#portfolio .rs-column > .content-text {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 30px 28px 27px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.96);
    border-right: 1px solid rgba(17, 38, 63, 0.1);
    border-bottom: 1px solid rgba(17, 38, 63, 0.1);
    border-left: 1px solid rgba(17, 38, 63, 0.1);
    border-radius: 0 0 2px 2px;
    box-shadow:
        0 16px 38px rgba(17, 38, 63, 0.06),
        0 3px 8px rgba(17, 38, 63, 0.025);
    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

/*
   Flex wird nur im Textbereich verwendet.
   Das RS-Spaltensystem selbst bleibt unverändert.
*/

#portfolio .rs-column > .content-text > .rte {
    display: flex;
    flex-direction: column;
    min-height: 335px;
}

/* Alle Standardabsätze zurücksetzen */

#portfolio .rs-column > .content-text p {
    margin: 0;
}

/* ==================================================
   Objektkategorie
================================================== */

#portfolio .rs-column > .content-text .rte > p:first-child {
    margin-bottom: 14px;
    line-height: 1.4;
}

#portfolio .rs-column > .content-text .rte > p:first-child .messing {
    color: var(--messing);
    font-family: "Manrope Semi Bold", sans-serif;
    font-size: 0.68rem;
    line-height: 1.5;
    font-weight: normal;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

/* ==================================================
   Objekttitel
================================================== */

#portfolio .rs-column > .content-text h2 {
    min-height: 2.35em;
    margin: 0;
    padding: 0;
    color: var(--blue);
    font-family: "Spectral Light", serif;
    font-size: clamp(1.55rem, 2vw, 1.9rem);
    line-height: 1.16;
    font-weight: normal;
    letter-spacing: -0.018em;
    text-align: left !important;
}

/* Kleine Linie unter dem Titel */

#portfolio .rs-column > .content-text hr {
    width: 42px;
    height: 1px;
    margin: 19px 0 21px;
    border: 0;
    background: var(--messing);
    text-align: left;
}

/* ==================================================
   Beschreibung
================================================== */

#portfolio .rs-column > .content-text .rte > p:nth-of-type(2) {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 24px;
    color: rgba(17, 38, 63, 0.76);
    font-family: "Manrope Regular", sans-serif;
    font-size: 0.91rem;
    line-height: 1.72;
    font-weight: normal;
    text-align: left;

    /*
       Der Teaser bleibt trotz unterschiedlich langer
       Texte gleichmäßig und kompakt.
    */

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
}

/* ==================================================
   Projektdaten am unteren Rand
================================================== */

#portfolio .rs-column > .content-text .rte > p:last-child {
    margin-top: auto;
    padding-top: 17px;
    border-top: 1px solid rgba(17, 38, 63, 0.11);
    color: rgba(17, 38, 63, 0.54);
    font-family: "Manrope Semi Bold", sans-serif;
    font-size: 0.7rem;
    line-height: 1.5;
    font-weight: normal;
    letter-spacing: 0.11em;
    text-align: left;
    text-transform: uppercase;
}

/* ==================================================
   Hover-Effekt
================================================== */

#portfolio .rs-column:hover > .content-image img {
    transform: scale(1.045);
}

#portfolio .rs-column:hover > .content-text {
    transform: translateY(-3px);
    border-color: rgba(200, 164, 97, 0.32);
    box-shadow:
        0 22px 50px rgba(17, 38, 63, 0.09),
        0 5px 12px rgba(17, 38, 63, 0.035);
}

/* ==================================================
   Tablet
   Das RS-Spaltensystem bleibt verantwortlich.
================================================== */

@media (max-width: 1024px) {

    #portfolio {
        padding: 86px 0 94px;
    }

    #portfolio > .content-text {
        margin-bottom: 50px;
    }

    #portfolio .rs-column > .content-text {
        padding: 25px 22px 24px;
    }

    #portfolio .rs-column > .content-text > .rte {
        min-height: 350px;
    }

    #portfolio .rs-column > .content-text h2 {
        font-size: 1.52rem;
    }

    #portfolio .rs-column > .content-text .rte > p:nth-of-type(2) {
        font-size: 0.86rem;
        -webkit-line-clamp: 7;
        line-clamp: 7;
    }
}

/* ==================================================
   Smartphone
   RS Columns stapelt die Objekte selbst.
================================================== */

@media (max-width: 599px) {

    #portfolio {
        padding: 72px 0 78px;
    }

    #portfolio::before {
        height: 52px;
    }

    #portfolio > .content-text {
        margin-bottom: 40px;
        padding: 0 18px;
    }

    #portfolio > .content-text .messing {
        font-size: 0.68rem;
        letter-spacing: 0.25em;
    }

    #portfolio > .content-text h2 {
        margin-top: 13px;
        font-size: 2.15rem;
    }

    #portfolio .rs-column > .content-image figure {
        aspect-ratio: 16 / 9;
    }

    #portfolio .rs-column > .content-text {
        padding: 27px 24px 25px;
    }

    #portfolio .rs-column > .content-text > .rte {
        min-height: 0;
    }

    #portfolio .rs-column > .content-text h2 {
        min-height: 0;
        font-size: 1.7rem;
    }

    /*
       Mobil darf der vollständige Beschreibungstext
       angezeigt werden.
    */

    #portfolio .rs-column > .content-text .rte > p:nth-of-type(2) {
        display: block;
        overflow: visible;
        font-size: 0.9rem;
        -webkit-line-clamp: unset;
        line-clamp: unset;
    }

    #portfolio .rs-column > .content-text .rte > p:last-child {
        margin-top: 0;
    }
}

/* ==================================================
   Reduzierte Bewegung
================================================== */

@media (prefers-reduced-motion: reduce) {

    #portfolio .rs-column > .content-image img,
    #portfolio .rs-column > .content-text {
        transition: none;
    }

    #portfolio .rs-column:hover > .content-image img {
        transform: none;
    }

    #portfolio .rs-column:hover > .content-text {
        transform: none;
    }
}

/* Portfolio-Inhaltsbreite – verändert nicht die RS-Spalten */

#portfolio > .rs-columns {
    display: flow-root;
    width: calc(100% - 48px);
    max-width: 90%;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

/* Smartphone */

@media (max-width: 599px) {
    #portfolio > .rs-columns {
        width: calc(100% - 32px);
    }
}
/* ==================================================
   1. ALLGEMEINE VARIABLEN
================================================== */

:root {
    /* Headerhöhen */
    --header-height: 104px;
    --header-height-compact: 82px;

    /* Aktuell für Anker verwendete Headerhöhe */
    --active-header-height: var(--header-height);

    /* Abstand zwischen Header und Ankerziel */
    --anchor-gap: 18px;
    --anchor-offset: calc(
        var(--active-header-height) + var(--anchor-gap)
    );

    /* Maximale Breite des Headerinhalts */
    --header-content-width: 1200px;

    /* Dauer der mobilen Menüanimation */
    --mobile-menu-duration: 0.38s;
}

/*
 * Wird durch JavaScript gesetzt,
 * sobald der Header kompakt dargestellt wird.
 */

html.header-scrolled {
    --active-header-height: var(--header-height-compact);
}


/* ==================================================
   2. ONEPAGE- UND ANKER-NAVIGATION
================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--anchor-offset);
}

#main .mod_article[id],
#main section[id],
#main [data-scroll-anchor] {
    scroll-margin-top: var(--anchor-offset);
}


/* ==================================================
   3. HEADER – ALLGEMEINER GRUNDZUSTAND
================================================== */

#header {
    --logo-scale: 1;

    position: sticky;
    top: 0;
    left: 0;
    z-index: 1500;

    width: 100%;
    height: var(--header-height);

    background: rgba(232, 233, 232, 0.96);
    border-bottom: 1px solid rgba(200, 164, 97, 0.42);

    box-shadow:
        0 1px 0 rgba(17, 38, 63, 0.025),
        0 5px 18px rgba(17, 38, 63, 0.035);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    isolation: isolate;

    transition:
        height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* ==================================================
   4. HEADER – KOMPAKTER SCROLLZUSTAND
================================================== */

#header.is-scrolled {
    --logo-scale: 0.82;

    height: var(--header-height-compact);

    background: rgba(232, 233, 232, 0.985);
    border-bottom-color: rgba(200, 164, 97, 0.58);

    box-shadow:
        0 1px 0 rgba(17, 38, 63, 0.04),
        0 10px 30px rgba(17, 38, 63, 0.09);
}


/* ==================================================
   5. HEADER – MESSINGAKZENT
================================================== */

#header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;

    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(200, 164, 97, 0),
        rgba(200, 164, 97, 0.78) 50%,
        rgba(200, 164, 97, 0)
    );

    opacity: 0.72;
    pointer-events: none;

    transition: opacity 0.35s ease;
}

#header.is-scrolled::after {
    opacity: 1;
}


/* ==================================================
   6. HEADER – INNERE STRUKTUR
================================================== */

#header > .inside,
#header #article-1,
#header #inner {
    height: 100%;
}

#header #article-1 {
    margin: 0;
    padding: 0;
}

#header #inner {
    position: relative;

    display: flex;
    align-items: center;

  /*  width: min(
        var(--header-content-width),
        calc(100% - 48px)
    );

    max-width: var(--header-content-width);*/
    height: 100%;

    margin-right: auto;
    margin-left: auto;

    box-sizing: border-box;
}


/* ==================================================
   7. LOGO – CONTAINER
================================================== */

#header #logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;

    height: 100%;

    margin: 0;
    padding: 0;
}

#header #logo figure {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;
}


/* ==================================================
   8. LOGO – LINK UND BILD
================================================== */

#header #logo a {
    display: inline-flex;
    align-items: center;

    margin: 0;
    padding: 0;

    text-decoration: none;

    transform:
        scale(var(--logo-scale))
        translateY(0);

    transform-origin: left center;

    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease;
}

#header #logo img {
    display: block;

    width: auto;
    height: auto;

    margin: 0;
    padding: 0;
}


/* ==================================================
   9. LOGO – INTERAKTION
================================================== */

#header #logo a:hover {
    opacity: 0.84;

    transform:
        scale(var(--logo-scale))
        translateY(-1px);
}

#header #logo a:focus-visible {
    outline: 1px solid var(--messing);
    outline-offset: 7px;
}


/* ==================================================
   10. DESKTOP-NAVIGATION – CONTAINER
================================================== */

#header .module-onepage-navigation {
    margin-left: auto;
}

#header .module-onepage-navigation ul {
    display: flex;
    align-items: center;
   gap: clamp(20px, 2.5vw, 38px);

    margin: 0;
    padding: 0;

    list-style: none;
}

#header .module-onepage-navigation li {
    margin: 0;
    padding: 0;
}


/* ==================================================
   11. DESKTOP-NAVIGATION – LINKS
================================================== */

#header .module-onepage-navigation a {
    position: relative;
    display: inline-block;

    padding: 10px 0;

    color: var(--blue);
    font-family: "Manrope Semi Bold", sans-serif;
    font-size: 0.73rem;
    line-height: 1.3;
    font-weight: normal;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color 0.25s ease,
        padding 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

#header.is-scrolled .module-onepage-navigation a {
    padding-top: 7px;
    padding-bottom: 7px;
}


/* ==================================================
   12. DESKTOP-NAVIGATION – HOVER UND AKTIV
================================================== */

#header .module-onepage-navigation a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;

    height: 1px;

    background: var(--messing);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.25s ease;
}

#header .module-onepage-navigation a:hover,
#header .module-onepage-navigation a:focus-visible,
#header .module-onepage-navigation a.is-active,
#header .module-onepage-navigation a.active {
    color: var(--messing);
}

#header .module-onepage-navigation a:hover::after,
#header .module-onepage-navigation a:focus-visible::after,
#header .module-onepage-navigation a.is-active::after,
#header .module-onepage-navigation a.active::after {
    transform: scaleX(1);
}

#header .module-onepage-navigation a:focus-visible {
    outline: 1px solid var(--messing);
    outline-offset: 6px;
}


/* ==================================================
   13. BURGER-BUTTON – DESKTOP AUSBLENDEN
================================================== */

#header .menu-toggle {
    display: none;
}


/* ==================================================
   14. TABLET UND MOBILE – GRUNDWERTE
================================================== */

@media (max-width: 768px) {

    :root {
        --header-height: 92px;
        --header-height-compact: 74px;
        --anchor-gap: 14px;
    }

    /*
     * Die Seite hinter dem geöffneten Menü
     * wird gegen Scrollen gesperrt.
     */

    body.menu-open {
        overflow: hidden;
    }

    #header {
        --logo-scale: 0.86;
    }

    #header.is-scrolled {
        --logo-scale: 0.72;
    }

    #header #inner {
        width: calc(100% - 32px);
    }

    /*
     * Verhindert, dass das Menü durch
     * Header-Container abgeschnitten wird.
     */

    #header,
    #header > .inside,
    #header #article-1,
    #header #inner {
        overflow: visible;
    }


    /* ==================================================
       15. HEADER BEI GEÖFFNETEM MENÜ
    ================================================== */

    #header.menu-open {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;

        width: 100%;
        height: var(--active-header-height);
    }


    /* ==================================================
       16. BURGER-BUTTON – AUFBAU
    ================================================== */

    #header .menu-toggle {
        position: relative;
        z-index: 1700;

        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 46px;

        width: 46px;
        height: 46px;

        margin: 0 0 0 auto;
        padding: 0;

        color: var(--blue);
        background: rgba(255, 255, 255, 0.35);

        border: 1px solid rgba(17, 38, 63, 0.24);
        border-radius: 50%;

        appearance: none;
        -webkit-appearance: none;

        cursor: pointer;
        visibility: visible;
        opacity: 1;

        transition:
            color 0.25s ease,
            background-color 0.25s ease,
            border-color 0.25s ease;
    }

    #header .menu-toggle:hover {
        color: var(--messing);
        background: rgba(255, 255, 255, 0.58);
        border-color: rgba(200, 164, 97, 0.7);
    }

    #header .menu-toggle:focus-visible {
        outline: 1px solid var(--messing);
        outline-offset: 5px;
    }


    /* ==================================================
       17. BURGER-SYMBOL
    ================================================== */

    #header .menu-toggle__icon {
        position: relative;

        display: block;

        width: 21px;
        height: 1px;

        background: currentColor;

        transition:
            background-color 0.2s ease,
            transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #header .menu-toggle__icon::before,
    #header .menu-toggle__icon::after {
        content: "";

        position: absolute;
        left: 0;

        width: 21px;
        height: 1px;

        background: currentColor;

        transition:
            top 0.32s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #header .menu-toggle__icon::before {
        top: -7px;
    }

    #header .menu-toggle__icon::after {
        top: 7px;
    }


    /* ==================================================
       18. BURGER-SYMBOL – OFFENER ZUSTAND
    ================================================== */

    #header.menu-open .menu-toggle__icon {
        background: transparent;
    }

    #header.menu-open .menu-toggle__icon::before {
        top: 0;
        transform: rotate(45deg);
    }

    #header.menu-open .menu-toggle__icon::after {
        top: 0;
        transform: rotate(-45deg);
    }


    /* ==================================================
       19. MOBILE NAVIGATION – GESCHLOSSEN
    ================================================== */

    #header .module-onepage-navigation {
        /*
         * Das Menü hängt direkt unterhalb des Headers.
         */

        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 1600;

        /*
         * Volle Viewportbreite unabhängig von der
         * begrenzten Header-Inhaltsbreite.
         */

        width: 100vw;
        height: calc(
            100dvh - var(--active-header-height)
        );
        min-height: calc(
            100dvh - var(--active-header-height)
        );

        margin: 0;
        padding: 0;

        box-sizing: border-box;

        background:
            linear-gradient(
                180deg,
                rgba(232, 233, 232, 0.995) 0%,
                rgba(248, 246, 246, 0.995) 100%
            );

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        overflow-x: hidden;
        overflow-y: auto;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translate(-50%, -12px);

        transition:
            opacity var(--mobile-menu-duration) ease,
            transform var(--mobile-menu-duration)
                cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear var(--mobile-menu-duration);
    }


    /* ==================================================
       20. MOBILE NAVIGATION – GEÖFFNET
    ================================================== */

    #header.menu-open .module-onepage-navigation {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translate(-50%, 0);

        transition:
            opacity var(--mobile-menu-duration) ease,
            transform var(--mobile-menu-duration)
                cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 0s;
    }


    /* ==================================================
       21. MOBILE NAVIGATION – LISTE
    ================================================== */

    #header .module-onepage-navigation ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;

        width: min(calc(100% -  */48px), 560px);
         /*min-height: 100%; */
         gap: clamp(0px, 0vw, 0px);
        margin: 0 auto;
        padding: 32px 0 42px;

        box-sizing: border-box;
        list-style: none;
    }

    #header .module-onepage-navigation li {
        width: 100%;

        margin: 0;
        padding: 0;

        border-bottom: 1px solid rgba(17, 38, 63, 0.11);

        opacity: 0;
        transform: translateY(12px);

        transition:
            opacity 0.28s ease,
            transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #header .module-onepage-navigation li:first-child {
        border-top: 1px solid rgba(17, 38, 63, 0.11);
    }

    #header.menu-open .module-onepage-navigation li {
        opacity: 1;
        transform: translateY(0);
    }

    #header.menu-open .module-onepage-navigation li:nth-child(1) {
        transition-delay: 0.04s;
    }

    #header.menu-open .module-onepage-navigation li:nth-child(2) {
        transition-delay: 0.08s;
    }

    #header.menu-open .module-onepage-navigation li:nth-child(3) {
        transition-delay: 0.12s;
    }

    #header.menu-open .module-onepage-navigation li:nth-child(4) {
        transition-delay: 0.16s;
    }

    #header.menu-open .module-onepage-navigation li:nth-child(5) {
        transition-delay: 0.20s;
    }


    /* ==================================================
       22. MOBILE NAVIGATION – LINKS
    ================================================== */

    #header .module-onepage-navigation a,
    #header.is-scrolled .module-onepage-navigation a {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        padding: 18px 4px;

        box-sizing: border-box;

        color: var(--blue);
        font-family: "Spectral Light", serif;
        font-size: clamp(1.55rem, 6vw, 2rem);
        line-height: 1.15;
        font-weight: normal;
        letter-spacing: -0.015em;
        text-decoration: none;
        text-transform: none;
    }

    #header .module-onepage-navigation a::after {
        display: none;
    }

    #header .module-onepage-navigation a::before {
        content: "→";

        order: 2;

        margin-left: 20px;

        color: var(--messing);
        font-family: "Manrope Light", sans-serif;
        font-size: 0.9rem;
        line-height: 1;

        opacity: 0;
        transform: translateX(-8px);

        transition:
            opacity 0.25s ease,
            transform 0.25s ease;
    }

    #header .module-onepage-navigation a:hover,
    #header .module-onepage-navigation a:focus-visible,
    #header .module-onepage-navigation a.active,
    #header .module-onepage-navigation a.is-active {
        color: var(--messing);
    }

    #header .module-onepage-navigation a:hover::before,
    #header .module-onepage-navigation a:focus-visible::before,
    #header .module-onepage-navigation a.active::before,
    #header .module-onepage-navigation a.is-active::before {
        opacity: 1;
        transform: translateX(0);
    }

    #header .module-onepage-navigation a:focus-visible {
        outline: 1px solid var(--messing);
        outline-offset: -3px;
    }
}


/* ==================================================
   23. KLEINE SMARTPHONES
================================================== */

@media (max-width: 420px) {

    :root {
        --header-height: 86px;
        --header-height-compact: 70px;
        --anchor-gap: 12px;
    }

    #header {
        --logo-scale: 0.78;
    }

    #header.is-scrolled {
        --logo-scale: 0.66;
    }

    #header #inner {
        width: calc(100% - 24px);
    }

    #header .menu-toggle {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    #header .module-onepage-navigation ul {
        width: calc(100% - 36px);
        padding-top: 26px;
        padding-bottom: 34px;
    }

    #header .module-onepage-navigation a,
    #header.is-scrolled .module-onepage-navigation a {
        padding-top: 16px;
        padding-bottom: 16px;
        font-size: 1.5rem;
    }
}


/* ==================================================
   24. REDUZIERTE BEWEGUNG
================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    #header,
    #header::after,
    #header #logo a,
    #header .menu-toggle,
    #header .menu-toggle__icon,
    #header .menu-toggle__icon::before,
    #header .menu-toggle__icon::after,
    #header .module-onepage-navigation,
    #header .module-onepage-navigation li,
    #header .module-onepage-navigation a,
    #header .module-onepage-navigation a::before,
    #header .module-onepage-navigation a::after {
        transition: none;
    }
}