/* Lauf mit Lions — Merseburger Benefizlauf
   Layout for the lauf site (Site Set lions/lauf-sitepackage). Content comes from
   standard content elements; the frame-lauf-* classes are the "Frame" options
   defined in Configuration/Sets/LaufMitLions/page.tsconfig of EXT:lauf_sitepackage. */

:root{--lauf-red:#e31e24;--lauf-red-dark:#c4161c;--lauf-link:#eb4947;--lauf-dark:#333;--lauf-blue:#1b327f;--lauf-text:#333;--lauf-wrap:1140px;}
*,*::before,*::after{box-sizing:border-box;}
html{overflow-x:clip;}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:"Open Sans","Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.6;color:var(--lauf-text);background:#fff;overflow-x:clip;}
a{color:var(--lauf-link);text-decoration:none;}
a:hover{color:#e61c19;}
img{max-width:100%;height:auto;}
.wrap{max-width:var(--lauf-wrap);margin:0 auto;padding:0 15px;}

/* --- Top bar --- */
.top-bar{background:#f5f5f5;border-bottom:1px solid #eaeaea;color:#999;}
.top-bar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:48px;}
.top-bar .social{display:flex;gap:14px;list-style:none;margin:0;padding:0;}
.top-bar .social a{color:var(--lauf-red);display:block;line-height:0;}
.top-bar .social a:hover{color:#000;}
.top-bar .initiative{display:flex;align-items:flex-start;gap:6px;font-size:12px;color:var(--lauf-link);text-decoration:none;align-self:flex-start;padding-top:14px;position:relative;z-index:5;}
.top-bar .initiative img{margin-top:-8px;margin-bottom:-26px;}

/* --- Header + navigation --- */
.site-header{background:#fff;position:relative;z-index:4;}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:90px;}
.site-header .logo img{display:block;width:236px;height:auto;}
.nav-toggle{display:none;}
.nav-burger{display:none;font-size:28px;cursor:pointer;padding:6px 10px;user-select:none;}
.main-nav>ul{display:flex;list-style:none;margin:0;padding:0;}
.main-nav li{position:relative;}
.main-nav a{display:block;text-decoration:none;color:#000;}
.main-nav>ul>li>a{padding:30px 15px;font-size:16px;letter-spacing:1px;}
.main-nav>ul>li:last-child>a{padding-right:0;}
.main-nav>ul>li.active>a,.main-nav>ul>li:hover>a{color:var(--lauf-red);}
.main-nav>ul>li.has-sub>a::after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 3px 6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);}
.main-nav ul ul{display:none;position:absolute;top:100%;right:0;width:240px;list-style:none;margin:0;padding:10px 0;background:#fff;box-shadow:0 3px 5px rgba(0,0,0,.2);}
.main-nav ul ul ul{top:-10px;right:100%;}
.main-nav li:hover>ul{display:block;}
.main-nav ul ul a{padding:8px 20px;font-size:14px;color:#000;}
.main-nav ul ul li:hover>a,.main-nav ul ul li.active>a{background:var(--lauf-link);color:#fff;}
.main-nav ul ul li.has-sub>a::before{content:"‹";float:left;margin-left:-12px;}

/* --- Sponsor banner (Stadtwerke) --- */
.sponsor-banner{background:var(--lauf-blue);line-height:0;}
.sponsor-banner img{display:block;width:100%;max-width:1920px;margin:0 auto;height:auto;}

/* --- Main content --- */
main{flex:1 0 auto;padding:30px 0 50px;}
main .frame{max-width:var(--lauf-wrap);margin:0 auto;padding:0 15px;}
main h1,main h2,main h3,main h4{font-weight:400;line-height:1.2;color:var(--lauf-text);}
main .frame-type-header h1,main h1{font-size:36px;text-transform:uppercase;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid #eee;}
main h2{font-size:26px;margin:.6em 0 .8em;}
main h3{font-size:22px;margin:1.2em 0 .6em;}
main h4{font-size:18px;font-weight:600;margin:1.1em 0 .5em;}
main p{margin:0 0 .6em;}
main table{border-collapse:collapse;margin:0 0 1.2em;}
main td,main th{padding:4px 12px 4px 0;vertical-align:top;text-align:left;}
main td p{margin:0;}
main hr{border:0;border-top:1px solid #999;margin:1.4em 0;}
main .ce-headline-center,main .text-center{text-align:center;}
main .ce-gallery figure{margin:0;}
main .ce-gallery img{display:block;}

/* Section heading on the home page (Header Only, centered, e.g. "Die Förderer") */
main .frame-type-header:has(.ce-headline-center){margin-top:70px;}
main .frame-type-header .ce-headline-center{border:0;font-weight:700;font-size:36px;color:#000;margin-bottom:30px;}

/* --- Frame: Titelbild (Text & Media) --- */
main .frame.frame-lauf-hero{max-width:none;padding:0;margin:-30px 0 40px;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;background:#222;}
main .frame-lauf-hero :is(.ce-textpic,.ce-gallery,.ce-outer,.ce-inner,.ce-row,.ce-column,figure,.ce-bodytext){display:contents;}
main .frame-lauf-hero img{grid-area:1/1;width:100%;height:clamp(260px,48vw,650px);object-fit:cover;object-position:center right;}
main .frame-lauf-hero>header,main .frame-lauf-hero .ce-bodytext>*{grid-area:1/1;z-index:1;margin:0;padding:0 15px;}
main .frame-lauf-hero>header{align-self:center;transform:translateY(-40%);}
main .frame-lauf-hero>header :is(h1,h2){color:#fff;font-size:clamp(30px,6vw,72px);font-weight:700;border:0;text-transform:none;margin:0;padding:0;text-shadow:0 2px 12px rgba(0,0,0,.55);}
main .frame-lauf-hero .ce-bodytext>*{align-self:end;margin-bottom:clamp(20px,6vw,90px);background:var(--lauf-red);color:#fff;font-size:clamp(15px,2.2vw,26px);font-weight:600;padding:.35em .9em;justify-self:center;}

/* --- Frame: Karte auf dunklem Band (Text & Media, consecutive cards side by side) --- */
main:has(>.frame-lauf-card){display:flex;flex-wrap:wrap;justify-content:center;column-gap:30px;align-content:flex-start;}
/* Other elements take a whole flex line (so cards never flow next to them) and
   center their content with padding instead of max-width */
main:has(>.frame-lauf-card)>.frame{flex:0 0 100%;}
main:has(>.frame-lauf-card)>.frame:not(.frame-lauf-card,.frame-lauf-hero){max-width:none;padding-inline:max(15px,calc((100% - var(--lauf-wrap)) / 2 + 15px));}
main:has(>.frame-lauf-card)>.frame.frame-lauf-card{flex:0 0 calc((min(100vw,var(--lauf-wrap)) - 30px - 60px) / 3);max-width:none;margin:80px 0 60px;padding:0;display:flex;flex-direction:column;background:#f0f0f0;position:relative;}
/* dark full-width band behind the row of cards (painted below the cards via z-index:-1) */
main:has(>.frame-lauf-card){isolation:isolate;}
main .frame-lauf-card::before{content:"";position:absolute;z-index:-1;inset:-80px 0 -60px;background:var(--lauf-dark);box-shadow:0 0 0 100vmax var(--lauf-dark);clip-path:inset(0 -100vmax);}
main .frame-lauf-card>header a{color:inherit;text-decoration:none;}
main .frame-lauf-card .ce-textpic{display:contents;}
main .frame-lauf-card .ce-gallery{float:none;margin:0;order:0;}
main .frame-lauf-card :is(.ce-outer,.ce-inner,.ce-row,.ce-column,figure){float:none;right:auto;margin:0;width:100%;}
main .frame-lauf-card img{width:100%;height:190px;object-fit:cover;}
main .frame-lauf-card>header{order:1;padding:30px 30px 0;}
main .frame-lauf-card .ce-bodytext{order:2;}
main .frame-lauf-card>header :is(h2,h3){font-size:22px;margin:0;border:0;padding:0;text-transform:none;}
main .frame-lauf-card>header :is(h2,h3)+:is(h3,h4,p){font-size:22px;font-weight:700;margin:0 0 15px;}
main .frame-lauf-card .ce-bodytext{padding:0 30px 30px;display:flex;flex-direction:column;flex:1;font-size:15px;}
main .frame-lauf-card .ce-bodytext p:last-child{margin:auto 0 0;padding-top:20px;}

/* Buttons: a paragraph that contains only a link (cards, frame "Link als Button") */
main :is(.frame-lauf-card,.frame-lauf-button) p>a:only-child{display:inline-block;background:var(--lauf-red);color:#fff;text-decoration:none;padding:8px 22px 10px;font-size:16px;}
main :is(.frame-lauf-card,.frame-lauf-button) p>a:only-child:hover{background:var(--lauf-red-dark);color:#fff;}
main .frame-lauf-button .ce-bodytext{text-align:inherit;}
main .frame-lauf-button:has(.ce-headline-center) p,main .frame-lauf-button.text-center p{text-align:center;}

/* --- Frame: Logo-Raster (Images) --- */
main .frame-lauf-logos :is(.ce-gallery,.ce-outer,.ce-inner){float:none;right:auto;width:100%;}
main .frame-lauf-logos .ce-inner{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:40px 30px;}
main .frame-lauf-logos .ce-row{display:contents;}
main .frame-lauf-logos .ce-column{float:none;width:auto;flex:0 0 calc((100% - 90px) / 4);display:flex;justify-content:center;align-items:center;margin:0;padding:0;}
main .frame-lauf-logos [data-ce-columns="1"] .ce-column{flex-basis:100%;}
main .frame-lauf-logos [data-ce-columns="6"] .ce-column{flex-basis:calc((100% - 150px) / 6);}
main .frame-lauf-logos figure{display:flex;justify-content:center;width:100%;}
main .frame-lauf-logos img{width:auto;height:auto;max-width:min(100%,220px);max-height:110px;object-fit:contain;}
main .frame-lauf-logos [data-ce-columns="1"] img{max-width:min(100%,445px);max-height:none;}
main .frame-lauf-logos [data-ce-columns="6"] img{max-height:80px;}
main .frame-lauf-logos+.frame{margin-top:50px;}
main .frame-lauf-logos+.frame-lauf-logos{margin-top:40px;}
@media(max-width:700px){main .frame-lauf-logos .ce-column,main .frame-lauf-logos [data-ce-columns="6"] .ce-column{flex-basis:calc((100% - 30px) / 2);}}

/* --- Frame: Panel mit roter Kopfzeile (Presse) --- */
main .frame.frame-lauf-panel{border:1px solid #ddd;border-radius:4px;padding:0;margin-bottom:20px;overflow:hidden;min-height:76px;}
main .frame.frame-lauf-panel{max-width:calc(var(--lauf-wrap) - 30px);}
main .frame-lauf-panel>header :is(h2,h3){background:var(--lauf-red);color:#fff;font-size:17px;margin:0;padding:10px 15px;}
main .frame-lauf-panel>:not(header){padding:15px;}

/* Image elements (galleries, press clippings): square thumbnails like the old
   site's gallery; "Enlarge on click" opens the full image */
main .frame-type-image:not(.frame-lauf-logos) :is(.ce-gallery,.ce-outer,.ce-inner){float:none;right:auto;width:100%;}
main .frame-type-image:not(.frame-lauf-logos) .ce-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
main .frame-type-image:not(.frame-lauf-logos) :is(.ce-row){display:contents;}
main .frame-type-image:not(.frame-lauf-logos) :is(.ce-column,figure){float:none;width:auto;margin:0;padding:0;}
main .frame-type-image:not(.frame-lauf-logos) img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;}

/* --- Forms (EXT:form) --- */
main form .form-group{margin-bottom:14px;}
main form label{display:block;font-size:15px;font-weight:600;}
main form :is(input[type=text],input[type=email],input[type=tel],textarea){width:100%;padding:10px;font:inherit;border:1px solid #333;}
main form .form-check label{font-weight:400;}
main form [type=submit]{background:var(--lauf-red);color:#fff;border:0;padding:8px 22px 10px;font:inherit;cursor:pointer;float:right;}
main form [type=submit]:hover{background:var(--lauf-red-dark);}
main form .error,main form .help-block{color:var(--lauf-red);font-size:14px;}

/* --- Footer --- */
.site-footer{background:var(--lauf-red);color:#fff;text-align:center;padding:20px 15px;font-size:17px;}
.site-footer a{color:#fff;text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}

/* --- Mobile --- */
@media(max-width:991px){
    .top-bar .initiative span{display:none;}
    .top-bar .initiative img{margin-bottom:-10px;}
    .nav-burger{display:block;}
    .site-header .wrap{flex-wrap:wrap;}
    .main-nav{display:none;flex-basis:100%;}
    .nav-toggle:checked~.main-nav{display:block;}
    .main-nav>ul{flex-direction:column;padding-bottom:12px;}
    .main-nav>ul>li>a{padding:10px 0;font-weight:700;}
    .main-nav ul ul,.main-nav ul ul ul{display:block;position:static;width:auto;box-shadow:none;padding:0 0 0 14px;}
    .main-nav ul ul a{padding:5px 0;}
    .main-nav ul ul li:hover>a{background:none;color:var(--lauf-red);}
    .main-nav>ul>li.has-sub>a::after,.main-nav ul ul li.has-sub>a::before{display:none;}
    main:has(>.frame-lauf-card)>.frame.frame-lauf-card{flex-basis:calc(100% - 30px);margin:40px 15px;}
}
@media(max-width:600px){main h1,main .frame-type-header h1{font-size:28px;}}