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%}
.download-element a{padding:3px 6px 3px 22px;background:url(../../assets/contao/images/iconPLAIN.svg) left center no-repeat}ul.enclosure{padding-left:0}li.download-element{list-style-type:none}.ext-xl a{background-image:url(../../assets/contao/images/iconXL.svg)}.ext-xls a{background-image:url(../../assets/contao/images/iconXLS.svg)}.ext-xlsx a{background-image:url(../../assets/contao/images/iconXLSX.svg)}.ext-hqx a{background-image:url(../../assets/contao/images/iconHQX.svg)}.ext-cpt a{background-image:url(../../assets/contao/images/iconCPT.svg)}.ext-bin a{background-image:url(../../assets/contao/images/iconBIN.svg)}.ext-doc a{background-image:url(../../assets/contao/images/iconDOC.svg)}.ext-docx a{background-image:url(../../assets/contao/images/iconDOCX.svg)}.ext-word a{background-image:url(../../assets/contao/images/iconWORD.svg)}.ext-cto a{background-image:url(../../assets/contao/images/iconCTO.svg)}.ext-dms a{background-image:url(../../assets/contao/images/iconDMS.svg)}.ext-lha a{background-image:url(../../assets/contao/images/iconLHA.svg)}.ext-lzh a{background-image:url(../../assets/contao/images/iconLZH.svg)}.ext-exe a{background-image:url(../../assets/contao/images/iconEXE.svg)}.ext-class a{background-image:url(../../assets/contao/images/iconCLASS.svg)}.ext-so a{background-image:url(../../assets/contao/images/iconSO.svg)}.ext-sea a{background-image:url(../../assets/contao/images/iconSEA.svg)}.ext-dll a{background-image:url(../../assets/contao/images/iconDLL.svg)}.ext-oda a{background-image:url(../../assets/contao/images/iconODA.svg)}.ext-pdf a{background-image:url(../../assets/contao/images/iconPDF.svg)}.ext-ai a{background-image:url(../../assets/contao/images/iconAI.svg)}.ext-eps a{background-image:url(../../assets/contao/images/iconEPS.svg)}.ext-ps a{background-image:url(../../assets/contao/images/iconPS.svg)}.ext-pps a{background-image:url(../../assets/contao/images/iconPPS.svg)}.ext-ppt a{background-image:url(../../assets/contao/images/iconPPT.svg)}.ext-pptx a{background-image:url(../../assets/contao/images/iconPPTX.svg)}.ext-smi a{background-image:url(../../assets/contao/images/iconSMI.svg)}.ext-smil a{background-image:url(../../assets/contao/images/iconSMIL.svg)}.ext-mif a{background-image:url(../../assets/contao/images/iconMIF.svg)}.ext-odc a{background-image:url(../../assets/contao/images/iconODC.svg)}.ext-odf a{background-image:url(../../assets/contao/images/iconODF.svg)}.ext-odg a{background-image:url(../../assets/contao/images/iconODG.svg)}.ext-odi a{background-image:url(../../assets/contao/images/iconODI.svg)}.ext-odp a{background-image:url(../../assets/contao/images/iconODP.svg)}.ext-ods a{background-image:url(../../assets/contao/images/iconODS.svg)}.ext-odt a{background-image:url(../../assets/contao/images/iconODT.svg)}.ext-wbxml a{background-image:url(../../assets/contao/images/iconWBXML.svg)}.ext-wmlc a{background-image:url(../../assets/contao/images/iconWMLC.svg)}.ext-dmg a{background-image:url(../../assets/contao/images/iconDMG.svg)}.ext-dcr a{background-image:url(../../assets/contao/images/iconDCR.svg)}.ext-dir a{background-image:url(../../assets/contao/images/iconDIR.svg)}.ext-dxr a{background-image:url(../../assets/contao/images/iconDXR.svg)}.ext-dvi a{background-image:url(../../assets/contao/images/iconDVI.svg)}.ext-gtar a{background-image:url(../../assets/contao/images/iconGTAR.svg)}.ext-inc a{background-image:url(../../assets/contao/images/iconINC.svg)}.ext-php a{background-image:url(../../assets/contao/images/iconPHP.svg)}.ext-php3 a{background-image:url(../../assets/contao/images/iconPHP3.svg)}.ext-php4 a{background-image:url(../../assets/contao/images/iconPHP4.svg)}.ext-php5 a{background-image:url(../../assets/contao/images/iconPHP5.svg)}.ext-phtml a{background-image:url(../../assets/contao/images/iconPHTML.svg)}.ext-phps a{background-image:url(../../assets/contao/images/iconPHPS.svg)}.ext-js a{background-image:url(../../assets/contao/images/iconJS.svg)}.ext-psd a{background-image:url(../../assets/contao/images/iconPSD.svg)}.ext-rar a{background-image:url(../../assets/contao/images/iconRAR.svg)}.ext-fla a{background-image:url(../../assets/contao/images/iconFLA.svg)}.ext-swf a{background-image:url(../../assets/contao/images/iconSWF.svg)}.ext-sit a{background-image:url(../../assets/contao/images/iconSIT.svg)}.ext-tar a{background-image:url(../../assets/contao/images/iconTAR.svg)}.ext-tgz a{background-image:url(../../assets/contao/images/iconTGZ.svg)}.ext-xhtml a{background-image:url(../../assets/contao/images/iconXHTML.svg)}.ext-xht a{background-image:url(../../assets/contao/images/iconXHT.svg)}.ext-zip a{background-image:url(../../assets/contao/images/iconZIP.svg)}.ext-m4a a{background-image:url(../../assets/contao/images/iconM4A.svg)}.ext-mp3 a{background-image:url(../../assets/contao/images/iconMP3.svg)}.ext-wma a{background-image:url(../../assets/contao/images/iconWMA.svg)}.ext-mpeg a{background-image:url(../../assets/contao/images/iconMPEG.svg)}.ext-wav a{background-image:url(../../assets/contao/images/iconWAV.svg)}.ext-ogg a{background-image:url(../../assets/contao/images/iconOGG.svg)}.ext-mid a{background-image:url(../../assets/contao/images/iconMID.svg)}.ext-midi a{background-image:url(../../assets/contao/images/iconMIDI.svg)}.ext-aif a{background-image:url(../../assets/contao/images/iconAIF.svg)}.ext-aiff a{background-image:url(../../assets/contao/images/iconAIFF.svg)}.ext-aifc a{background-image:url(../../assets/contao/images/iconAIFC.svg)}.ext-ram a{background-image:url(../../assets/contao/images/iconRAM.svg)}.ext-rm a{background-image:url(../../assets/contao/images/iconRM.svg)}.ext-rpm a{background-image:url(../../assets/contao/images/iconRPM.svg)}.ext-ra a{background-image:url(../../assets/contao/images/iconRA.svg)}.ext-bmp a{background-image:url(../../assets/contao/images/iconBMP.svg)}.ext-gif a{background-image:url(../../assets/contao/images/iconGIF.svg)}.ext-jpeg a{background-image:url(../../assets/contao/images/iconJPEG.svg)}.ext-jpg a{background-image:url(../../assets/contao/images/iconJPG.svg)}.ext-jpe a{background-image:url(../../assets/contao/images/iconJPE.svg)}.ext-png a{background-image:url(../../assets/contao/images/iconPNG.svg)}.ext-tiff a{background-image:url(../../assets/contao/images/iconTIFF.svg)}.ext-tif a{background-image:url(../../assets/contao/images/iconTIF.svg)}.ext-svg a{background-image:url(../../assets/contao/images/iconSVG.svg)}.ext-svgz a{background-image:url(../../assets/contao/images/iconSVGZ.svg)}.ext-webp a{background-image:url(../../assets/contao/images/iconWEBP.svg)}.ext-avif a{background-image:url(../../assets/contao/images/iconAVIF.svg)}.ext-heic a{background-image:url(../../assets/contao/images/iconHEIC.svg)}.ext-jxl a{background-image:url(../../assets/contao/images/iconJXL.svg)}.ext-eml a{background-image:url(../../assets/contao/images/iconEML.svg)}.ext-asp a{background-image:url(../../assets/contao/images/iconASP.svg)}.ext-css a{background-image:url(../../assets/contao/images/iconCSS.svg)}.ext-scss a{background-image:url(../../assets/contao/images/iconSCSS.svg)}.ext-less a{background-image:url(../../assets/contao/images/iconLESS.svg)}.ext-html a{background-image:url(../../assets/contao/images/iconHTML.svg)}.ext-htm a{background-image:url(../../assets/contao/images/iconHTM.svg)}.ext-md a{background-image:url(../../assets/contao/images/iconMD.svg)}.ext-shtml a{background-image:url(../../assets/contao/images/iconSHTML.svg)}.ext-txt a{background-image:url(../../assets/contao/images/iconTXT.svg)}.ext-text a{background-image:url(../../assets/contao/images/iconTEXT.svg)}.ext-log a{background-image:url(../../assets/contao/images/iconLOG.svg)}.ext-rtx a{background-image:url(../../assets/contao/images/iconRTX.svg)}.ext-rtf a{background-image:url(../../assets/contao/images/iconRTF.svg)}.ext-xml a{background-image:url(../../assets/contao/images/iconXML.svg)}.ext-xsl a{background-image:url(../../assets/contao/images/iconXSL.svg)}.ext-mp4 a{background-image:url(../../assets/contao/images/iconMP4.svg)}.ext-m4v a{background-image:url(../../assets/contao/images/iconM4V.svg)}.ext-mov a{background-image:url(../../assets/contao/images/iconMOV.svg)}.ext-wmv a{background-image:url(../../assets/contao/images/iconWMV.svg)}.ext-webm a{background-image:url(../../assets/contao/images/iconWEBM.svg)}.ext-qt a{background-image:url(../../assets/contao/images/iconQT.svg)}.ext-rv a{background-image:url(../../assets/contao/images/iconRV.svg)}.ext-avi a{background-image:url(../../assets/contao/images/iconAVI.svg)}.ext-ogv a{background-image:url(../../assets/contao/images/iconOGV.svg)}.ext-movie a{background-image:url(../../assets/contao/images/iconMOVIE.svg)}
/* ==========================================================
   seiz.co
   Globales Basislayout
   ========================================================== */

:root {
    --text: #20252b;
    --text-light: #616a73;
    --background: #ffffff;
    --background-alt: #f4f6f7;
    --accent: #d26024;
    --accent-dark: #a94716;
    --border: #dfe3e6;

    --content-width: 1180px;
    --text-width: 780px;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 7rem;
}


/* ----------------------------------------------------------
   Grundlayout
   ---------------------------------------------------------- */

html {
    box-sizing: border-box;
    font-size: 100%;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 1.0rem;
    line-height: 1.35;

    color: var(--text);
    background: var(--background);
}


/* ----------------------------------------------------------
   Inhalt
   ---------------------------------------------------------- */

#container {
    width: 100%;
}

#main > .inside {
    width: min(100% - 3rem, var(--content-width));
    margin-inline: auto;
}

.mod_article {
    padding-block: var(--space-lg);
}


/* ----------------------------------------------------------
   Typografie
   ---------------------------------------------------------- */

h1,
h2,
h3 {
    margin-top: 0;

    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

h1 {
    max-width: 900px;
    margin-bottom: 1.5rem;

    font-size: clamp(2.8rem, 7vw, 5.5rem);
}

h2 {
    margin-bottom: 1.5rem;

    font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
    margin-bottom: 0.6rem;

    font-size: 1.35rem;
}

p {
    max-width: var(--text-width);

    margin-top: 0;
    margin-bottom: 1.4rem;
}

a {
    color: var(--accent);

    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--accent-dark);
}


/* ----------------------------------------------------------
   Bilder
   ---------------------------------------------------------- */

img {
    display: block;

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


/* ==========================================================
   Header
   ========================================================== */

#header {
    position: sticky;
    top: 0;
    z-index: 100;

    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--border);
}

#header .inside {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: min(100% - 3rem, var(--content-width));
    min-height: 76px;

    margin-inline: auto;
}


/* ----------------------------------------------------------
   Branding
   ---------------------------------------------------------- */

.site-brand {
    display: flex;
    flex-direction: column;

    margin-right: auto;

    color: var(--text);

    line-height: 1.15;
    text-decoration: none;
}

.site-brand:hover {
    color: var(--text);
}

.site-brand-name {
    font-size: 1.15rem;
    font-weight: 700;
}

.site-brand-subtitle {
    margin-top: 0.2rem;

    font-size: 0.78rem;
    font-weight: 500;

    color: var(--text-light);
}


/* ----------------------------------------------------------
   Navigation
   ---------------------------------------------------------- */

.mod_navigation ul {
    display: flex;
    gap: 2rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.mod_navigation li {
    margin: 0;
}

.mod_navigation a,
.mod_navigation strong {
    display: block;

    padding: 1rem 0;

    color: var(--text);

    font-size: 0.95rem;
    font-weight: 600;

    text-decoration: none;
}

.mod_navigation a:hover {
    color: var(--accent);
}

.mod_navigation .active strong,
.mod_navigation .trail strong {
    color: var(--accent);
}


/* ----------------------------------------------------------
   Mobile-Menü-Button
   ---------------------------------------------------------- */

.mobile-menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 8px;
    margin: 0;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.mobile-menu-toggle span {
    display: block;

    width: 26px;
    height: 2px;

    margin: 5px auto;

    background: var(--text);

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

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ==========================================================
   Buttons
   ========================================================== */

.button {
    display: inline-block;

    margin-top: 1rem;
    margin-right: 0.75rem;
}

.button a {
    display: inline-block;

    padding: 0.8rem 1.3rem;

    border: 1px solid var(--accent);
    border-radius: 4px;

    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;

    text-decoration: none;
}

.button-primary a {
    color: #fff;
    background: var(--accent);
}

.button-primary a:hover {
    color: #fff;
    background: var(--accent-dark);
}

.button-secondary a {
    color: var(--accent);
    background: transparent;
}

.button-secondary a:hover {
    color: #fff;
    background: var(--accent);
}


/* ==========================================================
   Hero
   ========================================================== */

.hero-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: start;
}

.hero-head h1 {
    margin: 0;
}

.hero-logo {
    height: 100%;
    max-height: 100%;
}

.hero-logo img {
    width: auto;
    height: 100%;
}


/* ==========================================================
   Kompetenzen Startseite
   ========================================================== */

.competencies {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem;

    padding:
        6rem
        max(1.5rem, calc((100% - var(--content-width)) / 2));

    background: var(--background-alt);
}

.competencies .section-title {
    grid-column: 1 / -1;

    margin-bottom: 1rem;
}

.competency {
    padding-top: 1.5rem;

    border-top: 3px solid var(--accent);
}

.competency h3 {
    margin-bottom: 0.8rem;
}

.competency p {
    margin: 0;

    color: var(--text-light);
}


/* ==========================================================
   Projekte Startseite
   ========================================================== */

.projects-teaser {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    align-items: stretch;

    padding-top: 7rem;
    padding-bottom: 3.5rem;
}

.projects-teaser .section-intro {
    grid-column: 1 / -1;

    margin-bottom: 1rem;
}

.projects-teaser .section-intro h2 {
    margin-bottom: 1rem;
}

.projects-teaser .section-intro p {
    max-width: 720px;

    margin-bottom: 0;

    font-size: 1.2rem;

    color: var(--text-light);
}


/* ==========================================================
   Projektkarten
   ========================================================== */

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.project-card {
    display: flex;
    flex-direction: column;

    min-height: 100%;
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 6px;

    background: #fff;

    color: inherit;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.project-card:hover {
    transform: translateY(-2px);

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.project-card figure,
.project-card .image_container {
    margin: 0;
}

.project-card h2 {
    margin: 0 0 1rem;

    font-size: clamp(1.6rem, 2.3vw, 2.25rem);
    line-height: 1.08;
}

.project-card h3 {
    margin: 1.6rem 1.6rem 0.8rem;

    font-size: 1.5rem;
}

.project-card p {
    margin: 0;

    color: var(--text-light);

    line-height: 1.6;
}

.project-card-content {
    padding: 1.5rem;
}

.project-card .rte {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 0 1.6rem 1.6rem;
}

.project-card .project-link {
    margin-top: auto;
    padding-top: 1rem;

    color: var(--accent);

    font-weight: 600;
    text-decoration: none;
}

.project-card .project-link:hover {
    color: var(--accent-dark);
}

.project-card-link {
    color: var(--accent);

    font-weight: 600;
}

.project-card-image {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 3 / 2;

    padding: clamp(16px, 3vw, 28px);

    background: var(--background-alt);
}

.project-card-image img {
    display: block;

    width: 100%;
    height: 100%;
    max-width: 100%;

    object-fit: contain;
}


/* ==========================================================
   Bildergalerie
   ========================================================== */

.content-gallery > ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.content-gallery > ul > li,
.content-gallery figure {
    min-width: 0;

    margin: 0;
}

.content-gallery figure > a {
    display: block;

    overflow: hidden;

    border-radius: 0.25rem;
}

.content-gallery img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 3;

    object-fit: cover;
}

.content-gallery.captions-in-lightbox figcaption {
    display: none;
}


/* ==========================================================
   Colorbox
   ========================================================== */

#cboxLoadedContent {
    margin-bottom: 96px;
}

#cboxContent {
    background: #fff;
}

#cboxTitle {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 84px;

    box-sizing: border-box;

    margin: 0;
    padding: 10px 18px;

    overflow-y: auto;

    color: var(--text);
    background: #fff;

    font-size: 15px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
}


/* ----------------------------------------------------------
   Abstand nach Bildern und Galerien
   ---------------------------------------------------------- */

.content-image + .content-text,
.content-gallery + .content-text,
.content-image + .content-headline,
.content-gallery + .content-headline {
    margin-top: var(--space-lg);
}


/* ==========================================================
   Projektseiten
   ========================================================== */

.project-main-image {
    max-width: 780px;

    margin: 2.5rem auto;
}

.project-main-image img {
    display: block;

    width: 100%;
    height: auto;
}


/* ----------------------------------------------------------
   Kennzahlen
   ---------------------------------------------------------- */

.project-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;

    margin: 3rem 0 4rem;
}

.project-facts > div {
    padding: 1.5rem 1rem;

    text-align: center;

    background: var(--background-alt);
    border-radius: 4px;
}

.project-facts strong {
    display: block;

    margin-bottom: 0.35rem;

    font-size: 1.75rem;
    font-weight: 600;

    color: var(--accent);
}

.project-facts span {
    font-size: 0.95rem;

    color: var(--text-light);
}


/* ----------------------------------------------------------
   Features
   ---------------------------------------------------------- */

.project-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;

    margin: 2.5rem 0 4rem;
}

.project-features > div {
    padding: 1.5rem;

    background: var(--background-alt);
    border-radius: 4px;
}

.project-features h3 {
    margin-top: 0;
    margin-bottom: 0.6rem;

    font-size: 1.15rem;
}

.project-features p {
    margin: 0;

    color: var(--text-light);
}


/* ----------------------------------------------------------
   Hervorhebung
   ---------------------------------------------------------- */

.project-highlight {
    margin: 4rem 0;
    padding: 2.5rem 3rem;

    background: var(--background-alt);

    border-left: 4px solid var(--accent);
}

.project-highlight h2 {
    margin-top: 0;
}

.project-highlight p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   Wie ich arbeite
   ========================================================== */

.work-process {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    margin-top: 2.5rem;
}

.work-step {
    position: relative;

    min-width: 0;

    padding: 2rem 1.5rem 0;

    border-top: 2px solid var(--accent);
}

.work-step:first-child {
    padding-left: 0;
}

.work-step:last-child {
    padding-right: 0;
}

.work-step::before {
    display: block;

    margin-bottom: 0.7rem;

    font-size: 0.9rem;
    font-weight: 600;

    color: var(--accent);
}

.work-step:nth-child(1)::before {
    content: "01";
}

.work-step:nth-child(2)::before {
    content: "02";
}

.work-step:nth-child(3)::before {
    content: "03";
}

.work-step:nth-child(4)::before {
    content: "04";
}

.work-step:nth-child(5)::before {
    content: "05";
}

.work-step h3 {
    margin: 0 0 0.6rem;

    font-size: 1.1rem;
}

.work-step p {
    margin: 0;

    color: var(--text-light);

    line-height: 1.55;
}


/* ==========================================================
   Erfahrung und Entwicklung
   ========================================================== */

.experience {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);

    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

.experience-intro,
.experience-outro {
    grid-column: 1 / -1;

    max-width: var(--text-width);
}

.experience-intro {
    margin-bottom: var(--space-sm);
}

.experience-item {
    padding-top: var(--space-sm);

    border-top: 2px solid var(--accent);
}

.experience-item h3 {
    margin-top: 0;
    margin-bottom: var(--space-xs);
}

.experience-item p {
    margin-bottom: 0;

    color: var(--text-light);
}

.experience-outro {
    margin-top: var(--space-sm);

    color: var(--text-light);
}


/* ==========================================================
   Über mich
   ========================================================== */

.about-page {
    max-width: 860px;
}

.about-page .content-text,
.about-page .content-headline {
    max-width: 820px;
}

.about-page h1 {
    max-width: 820px;
}

.about-page h2 {
    margin-top: var(--space-lg);
}

.about-page p {
    max-width: 820px;
}


/* ----------------------------------------------------------
   Hervorgehobener Erfahrungsabschnitt
   ---------------------------------------------------------- */

.about-experience {
    margin-block: var(--space-lg);

    padding: 2.5rem;

    background: var(--background-alt);

    border-left: 4px solid var(--accent);
}

.about-experience h2 {
    margin-top: 0;

    font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.about-experience p:last-child {
    margin-bottom: 0;
}

.about-page .about-experience + .content-headline,
.about-page .about-experience + .content-text {
    margin-top: var(--space-lg);
}


/* ----------------------------------------------------------
   Technisches Spektrum
   ---------------------------------------------------------- */

.about-skills {
    margin-top: var(--space-lg);
    margin-bottom: 3rem;
}

.about-skills ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 3rem;

    max-width: 820px;

    margin: 1.5rem 0 0;
    padding-left: 1.25rem;
}

.about-skills li {
    padding-left: 0.25rem;
}


/* ----------------------------------------------------------
   Projektbezug
   ---------------------------------------------------------- */

.about-projects {
    margin-top: 2.5rem;
}


/* ----------------------------------------------------------
   Abschluss
   ---------------------------------------------------------- */

.about-motivation {
    margin-top: 3rem;
    padding-top: 2.5rem;

    border-top: 1px solid var(--border);
}

.about-motivation h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.about-motivation p {
    color: var(--text-light);
}


/* ==========================================================
   Footer
   ========================================================== */

.site-footer {
    margin-top: 4rem;

    border-top: 1px solid #ddd;

    font-size: 0.9rem;
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;

    max-width: var(--content-width, 1200px);

    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.site-footer__copyright {
    color: #666;
}

.site-footer__nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-footer__nav a {
    color: inherit;

    text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
    color: var(--accent);
}


/* ==========================================================
   Responsive
   ========================================================== */


/* ----------------------------------------------------------
   Bis 900px
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .hero-logo {
        display: none;
    }

    .competencies {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .projects-teaser {
        grid-template-columns: 1fr;
    }

    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-process {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.5rem 2rem;
    }

    .work-step {
        padding: 1.5rem 0 0;
    }
}


/* ----------------------------------------------------------
   Bis 850px
   ---------------------------------------------------------- */

@media (max-width: 850px) {

    .project-features {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ----------------------------------------------------------
   Bis 800px
   ---------------------------------------------------------- */

@media (max-width: 800px) {

    .experience {
        grid-template-columns: 1fr;
    }

    .experience-intro,
    .experience-outro {
        grid-column: auto;
    }
}


/* ----------------------------------------------------------
   Bis 700px
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    body {
        font-size: 1rem;
    }

    #main > .inside,
    #header .inside {
        width: min(100% - 2rem, var(--content-width));
    }

    .mod_article {
        padding-block: 3rem;
    }


    /* Mobile Navigation */

    #header .inside {
        position: relative;
    }

    .mobile-menu-toggle {
        display: block;
        flex: 0 0 auto;

        margin-left: auto;
    }

    #main-navigation {
        position: absolute;
        top: 100%;
        left: 0;

        display: none;

        width: 100%;

        padding: 0 1rem;

        background: rgba(255, 255, 255, 0.98);
        border-bottom: 1px solid var(--border);

        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
    }

    #main-navigation.is-open {
        display: block;
    }

    #main-navigation ul {
        display: block;

        margin: 0;
        padding: 0.75rem 0;

        list-style: none;
    }

    #main-navigation li {
        display: block;

        margin: 0;
        padding: 0;
    }

    #main-navigation a,
    #main-navigation strong {
        display: block;

        padding: 0.75rem 0;

        font-size: 1.05rem;
        line-height: 1.3;

        text-decoration: none;
    }


    /* Hero */

    .hero {
        padding-block: 5rem 4rem;
    }


    /* Galerie */

    .content-gallery > ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }


    /* Projektübersicht */

    .project-grid {
        grid-template-columns: 1fr;
    }


    /* Projektseiten */

    .project-facts {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-highlight {
        padding: 2rem 1.5rem;
    }


    /* Arbeitsprozess */

    .work-process {
        display: block;
    }

    .work-step {
        padding: 1rem 0 1.5rem;

        border-top: 1px solid var(--border);
    }

    .work-step::before {
        margin-bottom: 0.3rem;
    }


    /* Über mich */

    .about-experience {
        margin-block: var(--space-md);

        padding: 2rem 1.5rem;
    }

    .about-skills ul {
        grid-template-columns: 1fr;

        gap: 0.55rem;
    }

    .about-projects {
        margin-top: 2rem;
    }

    .about-motivation {
        margin-top: 2.5rem;
        padding-top: 2rem;
    }
}


/* ----------------------------------------------------------
   Bis 600px
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    .competencies {
        grid-template-columns: 1fr;
    }

    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .site-footer__nav {
        flex-wrap: wrap;
        gap: 0.75rem 1.25rem;
    }
}


/* ----------------------------------------------------------
   Bis 520px
   ---------------------------------------------------------- */

@media (max-width: 520px) {

    .project-features {
        grid-template-columns: 1fr;
    }
}


/* ----------------------------------------------------------
   Bis 420px
   ---------------------------------------------------------- */

@media (max-width: 420px) {

    .content-gallery > ul {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Impressum / Datenschutz
   ========================================================== */


/* ----------------------------------------------------------
   Seitenlayout
   ---------------------------------------------------------- */

.legal-page {
    max-width: 900px;
}

.legal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;

    margin: 2rem 0 3rem;
}

.legal-page h2 {
    margin-top: 2.5rem;
}

.legal-grid h2 {
    margin-top: 0;
}


/* ----------------------------------------------------------
   Kontaktlinks
   ---------------------------------------------------------- */

.contact-links {
    margin: 0;
    padding: 0;

    list-style: none;
}

.contact-links li + li {
    margin-top: 0.7rem;
}

.contact-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    color: inherit;

    text-decoration: none;
}

.contact-links a:hover,
.contact-links a:focus-visible {
    color: var(--accent);
}


/* ----------------------------------------------------------
   Icons
   ---------------------------------------------------------- */

.contact-icon {
    display: inline-flex;

    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
}

.contact-icon svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: currentColor;
}

.contact-icon__inner {
    fill: #fff;
}


/* ----------------------------------------------------------
   E-Mail-Verschleierung
   ---------------------------------------------------------- */

.email-obfuscated {
    unicode-bidi: bidi-override;
    direction: rtl;
}


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media (max-width: 700px) {

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