html {
    overflow-y: scroll;
}


:root {
    --bg-main: #0b1220;
    --bg-header: #0b1220;
    --bg-card: #101a2f;
    --text-main: #e5e7eb;
    --text-secondary: #9ca3af;
    --accent: #f28c00;
    --accent-hover: #ffb347;
    --border: rgba(255,255,255,0.08);
    --max: 1200px;
    --content: 850px;
    --side: 20px;
    }

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background:
        radial-gradient(1200px 800px at 20% -10%, rgba(96,165,250,0.18), transparent 60%),
        radial-gradient(900px 600px at 80% 10%, rgba(52,211,153,0.10), transparent 55%),
        var(--bg-main);
    color: var(--text-secondary);
    font-family: Arial, sans-serif;
    line-height: 1.7;

}

body {
    opacity: 0;
    animation: pageFadeIn 1s ease forwards;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Header wie live.onerun.ch */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(11,18,32,0.92);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
}

.site-header-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.site-brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-main);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.site-brand-link img {
    height: 42px;
    width: auto;
    display: block;
}

.site-brand-link span {
    font-size: 1.05rem;
}

/* Navigation */
.site-nav {
    margin-left: auto;
}

.site-nav ul,
.main-menu,
.sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 20px;
}


/* Untermenü kleiner darstellen */
.sub-menu a {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 6px 0;
} 


.site-nav li {
    list-style: none;
    margin: 0;
}

.main-menu {
    display: flex;
    align-items: center;
    gap: 18px;
}

.main-menu > li {
    position: relative;
}

.site-nav a {
    display: inline-flex;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--text-secondary);
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
}

.site-nav a:hover,
.site-nav li.active > a {
    color: var(--text-main);
    background: rgba(255,255,255,0.04);
    border-color: var(--border);
}

/* Dropdown */
.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    margin-top: 8px;
    padding: 8px;
    background: rgba(11,18,32,0.98);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.35);
}

.has-sub:hover > .sub-menu {
    display: block;
}

.sub-menu a {
    display: block;
    white-space: nowrap;
}

/* Mobile Button */
.nav-toggle {
    display: none;
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 1.4rem;
}

/* Main */
/* Main */
.site-main {
    width: 100%;
    max-width: none !important;
    padding-top: 95px !important;
    padding-bottom: 56px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.site-main > .frame:not(.frame-layout-12):not(.frame-layout-21) {
    width: min(var(--content), calc(100vw - (2 * var(--side))));
    margin-left: auto;
    margin-right: auto;
}


.frame:not(.frame-layout-21) {
    clear: both;
}

.site-main::after {
    content: "";
    display: block;
    clear: both;
}




/* Inhalt */
.frame {
    margin-bottom: 4rem;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/*.frame {			/* alle Inhaltselemente in Karten darstellen */
/*.frame-type-header  /* Header */
/*.frame-type-text          /* Text */
/*.frame-type-textpic,       /* Text & Bilder */
/*.frame-type-uploads  /* Dateilinks */
/*.frame-type-textpic,       /* Text & Bilder */
/*.frame-type-uploads,       /* Dateilinks */
/*.frame-type-image,         /* Nur Bilder */
/*.frame-type-html,          /* HTML */
/*.frame-type-menu_subpages,          /* Unterseiten anzeigen */
/*[class^="frame-type-menu_"],        /* Menüs */
/*.frame-type-shortcut  {    /* Verweis */
 /*   background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)) !important; */
 /*    border: 1px solid var(--border) !important; */
 /*    border-radius: 16px; */
 /*   padding: 28px; */
 /*   box-shadow: 0 12px 40px rgba(0,0,0,0.22) !important; */
 /*   transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; */
/*}

/*neu über Layout gesteuerter Rahmen*/
/* Standard */
.frame-layout-10 {
}






/* Box */
.frame-layout-11 {
/*    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.055),
        rgba(255,255,255,0.025)
    );
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.22); */
    
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)) !important; 
    border: 1px solid var(--border) !important; 
    border-radius: 16px; 
    padding: 28px; 
    box-shadow: 0 12px 40px rgba(0,0,0,0.22) !important; 
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; 

}




/* Layout 12: Headerbild über ganze Bildschirmbreite */



/* =========================================
   Layout 12 – Hero / Headerbild
========================================= */
.frame-type-image.frame-layout-12 {
    position: relative;

    width: 100vw;
    max-width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    overflow: hidden;

 /*   max-height: 720px; */
    height: 33vh; /*100vh=volle Bildschirmhöhe*/
}


/* alle TYPO3 Container auf volle Breite */
.frame-type-image.frame-layout-12 .ce-image,
.frame-type-image.frame-layout-12 .ce-gallery,
.frame-type-image.frame-layout-12 .ce-outer,
.frame-type-image.frame-layout-12 .ce-inner,
.frame-type-image.frame-layout-12 .ce-column,
.frame-type-image.frame-layout-12 figure,
.frame-type-image.frame-layout-12 picture {
    width: 100%;
    max-width: 100%;
}

/* Bild */
.frame-type-image.frame-layout-12 img {
    width: 100vw;
    max-width: none;
    height: auto;
    display: block;
    margin-left: calc(50% - 50vw);
}

.frame-type-image.frame-layout-12 .ce-row {
    width: 100%;
}

.frame-type-image.frame-layout-12 .image {
    height: 100%;
}

/* Verlauf */
.frame-type-image.frame-layout-12::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.0) 0%,
            rgba(7,14,26,0.0) 50%,
            rgba(7,14,26,0.45) 75%,
            rgba(7,14,26,0.96) 100%
        ),

        linear-gradient(
            90deg,
            rgba(7,14,26,0.55) 0%,
            rgba(7,14,26,0.0) 10%,
            rgba(7,14,26,0.0) 75%,
            rgba(7,14,26,0.0) 90%,
            rgba(7,14,26,0.55) 100%
        );
        

        /*ursprung
            background:
        linear-gradient(
            180deg,
            rgba(7,14,26,0.15) 0%,
            rgba(7,14,26,0.45) 45%,
            rgba(7,14,26,0.96) 100%
        ),

        linear-gradient(
            90deg,
            rgba(7,14,26,0.55) 0%,
            rgba(7,14,26,0.10) 40%,
            rgba(7,14,26,0.55) 100%
        );
*/

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


.frame-type-image.frame-layout-12 {
    margin-top: -95px;
}


/* Layout 13: Bild auf Textbreite */
.frame-type-image.frame-layout-13 .ce-image,
.frame-type-image.frame-layout-13 .ce-gallery,
.frame-type-image.frame-layout-13 .ce-outer,
.frame-type-image.frame-layout-13 .ce-inner,
.frame-type-image.frame-layout-13 .ce-column,
.frame-type-image.frame-layout-13 figure,
.frame-type-image.frame-layout-13 picture {
    width: 100% !important;
    max-width: 850px !important;
    margin-left: auto;
    margin-right: auto;
}

.frame-type-image.frame-layout-13 img {
    width: 100% !important;
    max-width: 850px !important;
    border-radius: 16px;
    display: block;
}


.frame-type-textpic:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}


h1, h2, h3, h4, h5, h6 {
    color: var(--text-main);
    line-height: 1.25;
    font-weight: 700;
}

h1 {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}


h2 {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}


h3 {
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 0.0rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

h4 {
    color: #FFFFFF;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

h4 + p {
    font-size: 0.95rem;
    margin-top: 0;
}

p {
    max-width: 850px;
}

a {
    color: var(--accent);
    text-decoration: none;
}

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

li {
    margin-bottom: 0.6rem;
}




/*Layout 14*/
/* Layout 14: Hero Text */
.frame-type-text.frame-layout-14 {
    position: relative;
    z-index: 5;

    width: calc(100% - 40px);
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;

    margin-top: -140px;
    margin-bottom: 40px;

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

.frame-type-text.frame-layout-14 h1,
.frame-type-text.frame-layout-14 h2 {
    font-size: 2.5rem; /*Schriftgrösse angepasst auf 3.2*/
    color: var(--text-main);
}

.frame-type-text.frame-layout-14 p {
 /*   color: rgba(255,255,255,0.9); */  /*in weiss*/
       color: var(--text-secondary);  /*in hellgrau*/
       font-weight: 400;

}



/* Layout 21: Box 2 Spalten */
/* Layout 21: Leistungsbox */
/* Layout 21: Leistungsboxen nebeneinander */


/* Layout 21: Zwei Teaserboxen */




/* Boxen */
.frame-layout-21 {
    display: inline-block;
    vertical-align: top;

    width: 415px;
    margin: 0 10px 2rem;

    text-align: left;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.055),
        rgba(255,255,255,0.025)
    ) !important;

    border: 1px solid var(--border) !important;
    border-radius: 16px;
    padding: 28px;
}

.site-main {
    text-align: center;
}

.site-main > .frame:not(.frame-layout-21) {
    text-align: left;
}

/* Smartphone */
@media (max-width: 900px) {

    .frame-layout-21 {
        float: none;
        width: calc(100vw - 40px);
        margin-bottom: 2rem;
    }

    #c3.frame-layout-21,
    #c4.frame-layout-21,
    #c145.frame-layout-21,
    #c144.frame-layout-21 {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}



/* Layout 30 */
.frame-layout-30 .ce-textpic {
    display: grid;
    grid-template-columns: 75px 1fr;
    column-gap: 2rem;
    align-items: start;
}

.frame-layout-30 > header {
    margin-bottom: 1rem;
}

.frame-layout-30 .ce-gallery,
.frame-layout-30 .ce-row,
.frame-layout-30 .ce-column,
.frame-layout-30 figure {
    width: 75px !important;
    height: 75px !important;
    margin: 0;
    overflow: hidden;
}

.frame-layout-30 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

.frame-layout-30 .ce-bodytext {
    margin: 0;
}

.frame-layout-30 .ce-bodytext p {
    margin-top: 0;
}


/* wenn kein Headertitel */
.ce-header:empty {
    display: none;
}


/* Footer */
/* Footer */
.site-footer {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: auto;
    background: rgba(16,26,47,0.75);
    border-top: 1px solid var(--border);
}

.site-footer-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 26px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-secondary);
}

.site-footer a {
    color: var(--text-secondary);
}

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




/* Mobile */
@media (max-width: 900px) {
    .site-header-inner {
        flex-wrap: wrap;
    }

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

    .site-nav {
        display: none;
        width: 100%;
    }

    .site-nav.is-open {
        display: block;
    }

    .main-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: 12px;
    }

    .main-menu > li {
        border-top: 1px solid var(--border);
    }

    .site-nav a {
        display: block;
        padding: 12px 0;
    }

.sub-menu {
 /*   display: none; */
    display: block;
    position: static;
    margin-top: 0;
    padding-left: 18px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* .main-menu li.open > .sub-menu {
    display: block;
}  */

.sub-menu a {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 6px 0;
}



    .site-footer-inner {
        flex-direction: column;
    }
}

.site-header {
    margin-top: 0 !important;
}

.site-header-inner {
    padding-top: 14px;
    padding-bottom: 14px;
}

body {
    padding-top: 0 !important;
}

html,
body {
    margin: 0 !important;
    padding: 0 !important;
}

.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}




/* Dateilinks schöner darstellen */
/* Dateilinks als einheitliche Kacheln */
.ce-uploads {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 28px;
}

.ce-uploads li {
    margin: 0;
}

.ce-uploads li > a:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 130px;
    background: #050b17;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.ce-uploads img,
.ce-uploads iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0;
    background: #050b17;
}

.ce-uploads li > div {
    margin-top: 10px;
}

.ce-uploads a {
    color: var(--accent);
    font-weight: 700;
}

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

.ce-uploads li:hover {
    transform: translateY(-2px);
}

.ce-uploads li > a:first-child {
    background: #ffffff;
}

.ce-uploads img {
    background: #ffffff;
}

.ce-uploads img {
    transition: transform .2s ease;
}

.ce-uploads li:hover img {
    transform: scale(1.03);
}



/* bewust Papier simulieren */
/*.ce-uploads li > a:first-child {
    background: #ffffff;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.ce-uploads img {
    background: #ffffff;
}
*/


/*Event unterseiten im Menü ausblenden*/
/*.main-menu > li:nth-child(3) .sub-menu {
    display: none !important;
} */
/*bis hier*/

/* Hero-Titel Linie mit orange links */
.frame-type-text.frame-layout-14 h1,
.frame-type-text.frame-layout-14 h2 {
    position: relative;
    display: block;
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.14);
}

.frame-type-text.frame-layout-14 h1::after,
.frame-type-text.frame-layout-14 h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 50px;
    height: 3px;
    background: var(--accent);
}


.contact-addresses {
    display: flex;
    gap: 3rem;
    margin: 1rem 0 2rem;
}

.contact-addresses > div {
    flex: 1;
}


.site-header-inner,
.site-footer-inner {
    width: min(var(--max), calc(100vw - (2 * var(--side))));
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}






.page-title {
    display: none;
}

.frame-type-html {
    margin-bottom: 0 !important;
}



html,
body {
    min-height: 100%;
}

body > div[style*="max-width: 800px"] {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
}

.site-footer {
    margin-top: auto !important;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > div[style*="max-width: 800px"] {
    flex: 1;
}

.site-main {
    flex: 1 0 auto;
}

.site-footer {
    margin-top: auto !important;
    flex-shrink: 0;
}