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
   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, Panorama-Filter kompakt
        Arial,
        sans-serif;

    font-size: 1.1rem;
    line-height: 1.65;

    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);
}


/* ----------------------------------------------------------
   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 {
    height: 100%;
    width: auto;
}

@media (max-width: 599px) {
    .hero-logo {
        display: none;
    }
}
    

/* ----------------------------------------------------------
   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-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(-4px);

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

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


.project-card h2 {
    font-size: clamp(1.6rem, 2.3vw, 2.25rem);
    line-height: 1.08;
    margin: 0 0 1rem;
}

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

.project-card p {
    margin: 0 0 1rem;
    line-height: 1.6;
}


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

    font-size: 1.5rem;
}

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

    padding: 0 1.6rem 1.6rem;
}

.project-card p {
    margin: 0;

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

.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-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;
}


/* Bildunterschrift erst ausblenden,
   wenn die Übergabe an Colorbox bereit ist */

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


/* ----------------------------------------------------------
   Colorbox
   ---------------------------------------------------------- */

#cboxLoadedContent {
    margin-bottom: 96px;
}

#cboxContent {
    background: #fff;
}

#cboxTitle {
    position: absolute;
    top: auto;
    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 – Hauptbild
   ---------------------------------------------------------- */

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

    margin: 2.5rem auto;
}

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

    width: 100%;
    height: auto;
}


/* ----------------------------------------------------------
   Projektseiten – 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);
}


/* ----------------------------------------------------------
   Projektseiten – 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);
}


/* ----------------------------------------------------------
   Projektseiten – 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;
}


/* ----------------------------------------------------------
   Über mich – 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);
}


/* ----------------------------------------------------------
   Über mich – 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;
}


/* ----------------------------------------------------------
   Über mich – Projektbezug
   ---------------------------------------------------------- */

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


/* ----------------------------------------------------------
   Über mich – 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);
}


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

.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;
}


/* geöffnet: Hamburger wird zu X */

.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);
}


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



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

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

.project-card-link {
    color: var(--accent);
    font-weight: 600;
}

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

@media (max-width: 900px) {
    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .project-grid {
        grid-template-columns: 1fr;
    }
}


/* ----------------------------------------------------------
   Kontaktformular
   ---------------------------------------------------------- */
   
.contact-form,
.contact-form .formbody,
.contact-form .widget {
    width: 100%;
    max-width: 100%;
}


.contact-page h2 {
    margin-top: 2rem;
}

.contact-details {
    margin-top: 2.5rem;
}

.contact-details p {
    color: var(--text-light);
}

.contact-form {
    margin-top: var(--space-md);
    margin-bottom: 3rem;
    width: 100%;
    max-width: var(--text-width);
    
}

.contact-form .widget {
    margin-bottom: 1rem;
}


.contact-form label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    display: block;
    box-sizing: border-box;

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

    padding: 0.7rem 0.8rem;

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

    background: #fff;
    color: var(--text);
    font: inherit;
}

.contact-form textarea {
    min-height: 10rem;
    resize: vertical;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.contact-form button,
.contact-form input[type="submit"] {
    padding: 0.7rem 1.2rem;

    border: 0;
    border-radius: 4px;

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

    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.contact-form button:hover,
.contact-form input[type="submit"]:hover {
    background: var(--accent-dark);
}


/* ----------------------------------------------------------
   Panorama Galerie
   ---------------------------------------------------------- */

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


/* ----------------------------------------------------------
   Pano-Karte
   ---------------------------------------------------------- */
   
   
#panorama-map {
    width: 100%;
    height: min(70vh, 700px);
    min-height: 420px;
}

@media (max-width: 700px) {
    #panorama-map {
        height: 65vh;
        min-height: 360px;
    }
}

/* ----------------------------------------------------------
   Pano-Liste
   ---------------------------------------------------------- */


.pano-card {
    min-width: 0;
}

.pano-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.pano-card__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pano-card__type-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: block;
}

.pano-card__distance {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: var(--text-light);
}
/* ----------------------------------------------------------
   Bild / Video
   ---------------------------------------------------------- */

.pano-card__media {
    position: relative;
    overflow: hidden;

    /* pano.jpg und preview.mp4 sind beide 2:1 */
    aspect-ratio: 2 / 1;

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


/*
 * pano.jpg = 512 × 256
 *
 * preview.mp4 verwendet einen Ausschnitt von 256 × 128:
 *
 *   x = 0
 *   y = 96
 *
 * Das Thumbnail wird deshalb auf 200 % skaliert.
 * top: -75 % entspricht y = 96 bei einem
 * 128 Pixel hohen Ausschnitt.
 */

.pano-card__media img {
    position: absolute;

    width: 200%;
    height: 200%;
    max-width: none;

    left: 0;
    top: -75%;

    object-fit: fill;

    display: block;
    z-index: 1;
}


/*
 * Video füllt die Vorschau vollständig aus.
 */
.pano-card__media video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;          /* wichtig: NICHT none */
    opacity: 0;
    transition: opacity 0.25s ease;

    pointer-events: none;
    z-index: 2;
}

.pano-card__media.is-playing video {
    opacity: 1;
}

/* ----------------------------------------------------------
   Beschriftung
   ---------------------------------------------------------- */

.pano-card__content {
    padding-top: 0.55rem;
}

.pano-card__content h3 {
    margin: 0;

    font-size: 1.05rem;
    line-height: 1.3;
    font-weight: 600;
}

.pano-card__description {
    margin: 0.35rem 0 0;

    color: var(--text-light);
    line-height: 1.45;
}

.pano-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.25rem;
}

.pano-card__date,
.pano-card__distance {
    font-size: 0.9rem;
    color: var(--text-light);
}

.pano-card__distance {
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}
.panorama-filter a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.panorama-filter__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-block;
    object-fit: contain;
     transform: translateY(4px);
}



/* ----------------------------------------------------------
   Panorama – Sortierung und Kartenansicht
   ---------------------------------------------------------- */

.panorama-sortbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;

    margin: 0 0 1rem;
}

.panorama-filter_sort {
    display: flex;
    align-items: center;
    gap: 0.6rem;

    margin: 0;
}

.panorama-filter_sort label {
    margin: 0;

    font-size: 1rem;
    font-weight: 400;
    white-space: nowrap;
}

.panorama-filter_sort select {
    min-width: 200px;
    height: 3rem;

    padding: 0.55rem 2.4rem 0.55rem 0.8rem;

    border: 1px solid var(--border);
    border-radius: 0.35rem;

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

    font: inherit;
}

.panorama-filter_sort select:focus {
    outline: none;

    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(210, 96, 36, 0.12);
}


/* Kartenansicht */

.panorama-map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 3rem;
    padding: 0 1rem;

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

    color: var(--accent-dark);
    background: var(--background);

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

    white-space: nowrap;
    text-decoration: none;
}

.panorama-map-link:hover,
.panorama-map-link:focus-visible {
    color: #fff;
    background: var(--accent);
}


/*-----------------------------------------------------
   Panorama – zusätzliche Filter
   ---------------------------------------------------------- */

.panorama-filter__secondary {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    margin: 0 0 1.5rem;
}

.panorama-filter__secondary label {
    margin: 0;

    font-weight: 600;
    line-height: 1;
}

.panorama-filter__secondary select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    min-width: 10rem;
    height: 3rem;

    padding: 0.55rem 2.5rem 0.55rem 0.9rem;

    border: 1px solid var(--border);
    border-radius: 0.35rem;

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

    font: inherit;
    line-height: 1.2;

    cursor: pointer;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%2320252b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 12px 8px;
}

.panorama-filter__secondary select:hover {
    border-color: var(--accent);
}

.panorama-filter__secondary select:focus {
    outline: none;

    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(210, 96, 36, 0.12);
}

.panorama-no-results {
    margin-top: 1rem;

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

/* ----------------------------------------------------------
   Panorama – keine Treffer
   ---------------------------------------------------------- */

.panorama-no-results {
    margin-top: 1rem;

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


/* ----------------------------------------------------------
   Panorama – Suche
   ---------------------------------------------------------- */

.panorama-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;

    margin: 0 0 0.75rem;
}

.panorama-search label,
.panorama-filter__secondary label {
    flex: 0 0 3.4rem;

    margin: 0;

    font-weight: 600;
}

.panorama-search input[type="search"] {
    width: min(24rem, 100%);
    height: 3rem;

    padding: 0.55rem 0.8rem;

    border: 1px solid var(--border);
    border-radius: 0.35rem;

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

    font: inherit;
}

.panorama-search input[type="search"]:focus {
    outline: none;

    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(210, 96, 36, 0.12);
}

.panorama-search button {
    height: 3rem;

    padding: 0.55rem 1rem;

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

    color: var(--accent-dark);
    background: var(--background);

    font: inherit;
    font-weight: 600;

    cursor: pointer;
}

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


/* ----------------------------------------------------------
   Panorama – Jahresfilter
   ---------------------------------------------------------- */

.panorama-filter__secondary {
    display: flex;
    align-items: center;
    gap: 0.6rem;

    margin: 0 0 1.5rem;
}

.panorama-filter__secondary select {
    width: 10rem;
    min-width: 0;
    height: 3rem;

    padding: 0.55rem 2.4rem 0.55rem 0.8rem;

    border: 1px solid var(--border);
    border-radius: 0.35rem;

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

    font: inherit;

    cursor: pointer;
}

.panorama-filter__secondary select:hover,
.panorama-filter__secondary select:focus {
    border-color: var(--accent);
}

.panorama-filter__secondary select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(210, 96, 36, 0.12);
}


/* ----------------------------------------------------------
   Panorama-Filter kompakt
   ---------------------------------------------------------- */

@media (max-width: 750px) {

    /*
     * Suche: Label | Eingabe | Button
     */
    .panorama-search {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.8rem;
    }

    .panorama-search label {
        margin: 0;
    }

    .panorama-search input[type="search"] {
        width: 100%;
        min-width: 0;
    }

    .panorama-search button {
        white-space: nowrap;
    }


    /*
     * Jahr und Land jeweils kompakt nebeneinander
     *
     * Jahr | Select | Land | Select
     */
    .panorama-filter__secondary {
        display: grid;
        grid-template-columns:
            auto minmax(110px, 1fr)
            auto minmax(130px, 1fr);

        align-items: center;
        gap: 0.6rem 0.75rem;

        margin: 0 0 0.8rem;
    }

    .panorama-filter__secondary label {
        margin: 0;
        white-space: nowrap;
    }

    .panorama-filter__secondary select {
        width: 100%;
        min-width: 0;
        margin: 0;
    }


    /*
     * Sortierung: Label | Select
     */
    .panorama-filter_sort {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0.75rem;

        margin: 0 0 1rem;
    }

    .panorama-filter_sort label {
        margin: 0;
        white-space: nowrap;
    }

    .panorama-filter_sort select {
        width: 100%;
        min-width: 0;
        margin: 0;
    }
}

/* ----------------------------------------------------------
   Panorama – Paginierung
   ---------------------------------------------------------- */

.pagination {
    margin-top: 2.5rem;
}

.pagination p {
    margin: 0 0 0.8rem;

    color: var(--text-light);
    font-size: 0.95rem;
}

.pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.pagination li {
    margin: 0;
    padding: 0;
}

.pagination a,
.pagination strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 2.6rem;
    height: 2.6rem;

    padding: 0 0.8rem;

    border: 1px solid var(--border);
    border-radius: 0.35rem;

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

    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;

    text-decoration: none;
}

.pagination a:hover,
.pagination a:focus-visible {
    border-color: var(--accent);
    color: var(--accent-dark);
}

.pagination strong {
    border-color: var(--accent);

    color: var(--accent-dark);
    background: rgba(210, 96, 36, 0.08);

    font-weight: 600;
}


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

@media (max-width: 900px) {
    .pano-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .pano-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.panorama-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
}

.panorama-filter a {
    display: inline-block;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.35rem;

    color: var(--text);
    background: var(--background);
    text-decoration: none;

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

.panorama-filter a:hover,
.panorama-filter a:focus-visible {
    border-color: var(--accent);
    color: var(--accent-dark);
}
.panorama-filter a.is-active {
    border-color: var(--accent);
    color: var(--accent-dark);
    background: rgba(210, 96, 36, 0.08);
    font-weight: 600;
}

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



/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 699px) {

    .mobile-menu-toggle {
        display: block;
        margin-left: auto;
    }

    #main-navigation {
        display: none;

        width: 100%;
    }

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

    #main-navigation ul {
        display: block;

        margin: 0;
        padding: 1rem 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.1rem;
        line-height: 1.3;

        text-decoration: none;
    }
}


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

@media (max-width: 900px) {

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

    .projects-teaser {
        grid-template-columns: 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;
    }


    /* Hero */

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

    .hero h1 {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(85px, 23%);

        column-gap: 1rem;
    }


    /* Navigation */

    .mod_navigation {
        display: none;
    }


     /* Galerie */

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


    /* 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;
    }
}



/* ----------------------------------------------------------
   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;
    }
}