/* Template © admotion*/


html 
{
   height:			100%;
}


body
{
   min-height:		100%;
   margin:			0px;
   padding:			0px;
   font-family:		var(--ff-text);
   font-weight:		var(--fw-regular);
   font-size:		var(--fs-body);
   color:			var(--c-petrol);
   line-height:		var(--lh-text);
   letter-spacing:	normal;
   background:		var(--c-bg-light);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

* {box-sizing: border-box;}

#system-message { margin: 0px; }

/* bootstrap import */
img { width: auto\9;height: auto;max-width: 100%;vertical-align: middle;border: 0;-ms-interpolation-mode: bicubic;}
.nav > li > a:hover, .nav > li > a:focus {text-decoration: none;background-color: transparent;}
.nav > li > a {display: block;}
li { line-height: normal;}
.nav {list-style: none; padding: 0; margin: 0;}
table {border-collapse: collapse;border-spacing: 0;}
ul.unstyled, ol.unstyled { list-style: none;}
.visually-hidden {display: none;}
/* ---------------------------------- */


:root {
  --primary: #1e90ff;
  --secondary: #1e90ff;
}

    #desktop { display: none; }
    #mobile { display: block; }   


/* ------- Header / Navigation bar -------- */
/* Figma "Rectangle 2" (node 23:27): 1728 x 174 px gradient bar with rounded
 * bottom corners 100 px, sitting at top:0 over the hero image, holding the
 * logo (top 42 / left 69, 281x80) and the main menu (top 58 / left 713). */

/* Sticky navigation bar. The header is an out-of-flow overlay sitting over
 * the full-bleed hero (the hero extends underneath the translucent gradient
 * bar). It was `position: absolute`, so it scrolled away with the page; using
 * `position: fixed` keeps that exact scroll-0 rendering (zero layout shift)
 * while pinning it to the top so content passes cleanly underneath on scroll.
 * `position: sticky` is intentionally NOT used here: it would force the header
 * into normal flow and push the hero down by --nav-h, changing the desktop
 * layout. z-index 100 keeps it above #showbox (z-index 1) and #inhalt. */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--nav-h);
    z-index: 100;
    background: var(--bg-top-bar);
    border-bottom-left-radius: var(--rad-hero);
    border-bottom-right-radius: var(--rad-hero);
    transition: height var(--tr-base), background var(--tr-base);
}

/* Once scrolled, opaque content passes under the bar — swap the translucent
 * top-bar gradient for the opaque page gradient so the nav stays legible.
 * body.scrolled is toggled in js/main.js. The same opaque background is used
 * while the mobile panel is open so the bar and panel read as one surface. */
body.scrolled header,
body.menu-open header {
    background: var(--bg-page);
}

/* Sticky shrink: on desktop the resting bar is tall (--nav-h 174px); once the
 * page is scrolled it condenses to the compact --nav-h-md (120px) height with
 * the logo + menu re-centred, so the nav takes less vertical space while you
 * read. Scoped to >=1281px because tablet/mobile already use a compact bar
 * (and the mobile panel anchors to those fixed heights — shrinking there would
 * desync it). Smoothly animated via the transitions above + below. */
@media (min-width: 1281px) {
    #logo,
    nav#menu {
        transition: top var(--tr-base);
    }

    #logo .mod-serenade-logo__img {
        transition: width var(--tr-base);
    }

    body.scrolled header {
        height: var(--nav-h-md);
    }

    body.scrolled #logo {
        top: var(--s-6);
    }

    body.scrolled #logo .mod-serenade-logo__img {
        width: var(--nav-logo-w-md);
    }

    body.scrolled nav#menu {
        top: var(--s-6);
    }
}

/* Lock background scrolling while the mobile menu panel is open (the panel
 * itself scrolls internally). Toggled via body.menu-open in js/main.js; only
 * ever set below 1024 px where the panel exists. */
body.menu-open {
    overflow: hidden;
}

#logo {
    position: absolute;
    top: var(--nav-logo-y);
    left: var(--nav-logo-x);
    z-index: 101;
}

#logo .mod-serenade-logo,
#logo .mod-serenade-logo__link {
    display: block;
    line-height: 0;
}

#logo .mod-serenade-logo__img {
    display: block;
    width: var(--nav-logo-w);
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

nav#menu {
    position: absolute;
    top: var(--nav-menu-y);
    right: var(--nav-menu-r);
    z-index: 102;
}

#showbox {
    position: relative;
    z-index: 1;
}

#menu-small {
    position: absolute;
    top: var(--s-6);
    right: var(--s-8);
    z-index: 103;
    width: 36px;
    height: 28px;
    cursor: pointer;
}

/* Navigation bar — responsive downscale (Figma reference is 1728 px). */
@media (max-width: 1280px) {
    header { height: var(--nav-h-md); }

    #logo {
        top: var(--s-5);
        left: var(--s-8);
    }

    #logo .mod-serenade-logo__img {
        width: var(--nav-logo-w-md);
    }

    nav#menu {
        top: var(--s-7);
        right: var(--s-8);
    }
}

@media (max-width: 768px) {
    header {
        height: var(--nav-h-sm);
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }

    #logo {
        top: var(--s-3);
        left: var(--s-8);
    }

    #logo .mod-serenade-logo__img {
        width: var(--nav-logo-w-sm);
    }
}


/* ------- Page layout (Figma "Flucht links")
 *
 * Every content block shares the same 1128 px inner width and the same
 * left edge (--layout-gutter ≈ 300 px on a 1728 px frame). Article body,
 * JCE wf-columns and Serenade modules all sit on the same vertical line.
 * Responsive padding kicks in only when the viewport drops below the
 * inner width plus the gutter.
 * -------- */

#showbox { width: 100%; margin: 0; padding: 0; }
footer   { width: 100%; }
#footer-container { width: 100%; margin: 0; padding: 0; }

#namemodul,
#inhalt {
    width: 100%;
    max-width: var(--layout-inner);
    margin: 0 auto;
    padding: 0;
}

#inhalt {
    padding-top: var(--vr-hero);
    padding-bottom: var(--vr-footer);
}

#namemodul + #inhalt {
    padding-top: var(--vr-tight);
}

/* Joomla / JCE wrappers inside #inhalt — never add extra margin/padding
 * so the article content lines up with the left edge of #inhalt. */
#inhalt > *,
#inhalt .blog-featured,
#inhalt .blog-items,
#inhalt .blog-item,
#inhalt .item-content,
#inhalt .com-content-article,
#inhalt .item-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

#inhalt .blog-item + .blog-item,
#inhalt .item-content + .item-content {
    margin-top: var(--vr-section);
}

#inhalt .wf-columns {
    width: 100%;
    margin: 0;
}

/* -------- Vertical rhythm between wf-columns blocks --------------
 * The user authors articles as a stack of <div class="wf-columns">
 * blocks. Each block is one section (an H1, a paragraph, a module
 * wrapped in .moduletable, …). The default gap between sibling blocks
 * is the Figma "section" spacing (80 px). When a block contains ONLY
 * a heading we tighten the gap below it to the Figma "heading → next"
 * value (24 px) — this matches the way the design pairs an H1/H2 with
 * the element directly below. JCE drops empty <p></p> wrappers around
 * embedded modules, so we hide those to keep the rhythm clean. */
#inhalt .wf-columns + .wf-columns {
    margin-top: var(--vr-section);
}

#inhalt .wf-columns:has(> .wf-column > :is(h1, h2, h3, h4, h5, h6):only-child)
        + .wf-columns {
    margin-top: var(--vr-tight);
}

/* Reset the natural top/bottom margins of headings and paragraphs
 * inside a wf-column — the wf-columns rhythm is the single source of
 * vertical spacing between sibling blocks. */
#inhalt .wf-column > h1,
#inhalt .wf-column > h2,
#inhalt .wf-column > h3,
#inhalt .wf-column > h4,
#inhalt .wf-column > h5,
#inhalt .wf-column > h6,
#inhalt .wf-column > p {
    margin-top: 0;
    margin-bottom: 0;
}

#inhalt .wf-column > p:empty {
    display: none;
}

/* Inside a single wf-column, sibling paragraphs get a small gap so the
 * body text breathes. */
#inhalt .wf-column > p + p {
    margin-top: var(--vr-tight);
}

/* If a heading and its body are stuck inside the SAME wf-column, the
 * heading still needs a small gap below it. */
#inhalt .wf-column > :is(h1, h2, h3, h4, h5, h6) + * {
    margin-top: var(--vr-tight);
}

/* Module wrappers should not introduce extra vertical space — the
 * wf-columns rhythm already handles it. */
#inhalt .wf-column > .moduletable {
    margin: 0;
}

/* Modules dropped directly into #inhalt drop their own max-width/padding,
 * since #inhalt already supplies the layout column. */
#inhalt .mod-serenade-intro,
#inhalt .mod-serenade-teasers,
#inhalt .mod-serenade-team-photo,
#inhalt .mod-serenade-team-grid,
#inhalt .mod-serenade-organigramm,
#inhalt .mod-serenade-history-intro,
#inhalt .mod-serenade-timeline,
#inhalt .mod-serenade-projects,
#inhalt .mod-serenade-contact-form,
#inhalt .mod-serenade-contact-person,
#inhalt .mod-serenade-address {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Responsive horizontal padding — applied to the OUTER content containers
 * only, so left-flush stays consistent across modules and article body. */
@media (max-width: 1188px) {
    #namemodul,
    #inhalt {
        padding-left: var(--s-6);
        padding-right: var(--s-6);
    }
}

@media (max-width: 1280px) {
    :root {
        --vr-hero:    100px;
        --vr-section: 60px;
    }
}

/* At <=1024 px the footer drops its 176 px transparent top and stacks with
 * the petrol band at top:0, so the content needs a real gap again (the
 * desktop default is 0 because the footer's own transparent top is the gap). */
@media (max-width: 1024px) {
    :root {
        --vr-footer:  40px;
    }
}

@media (max-width: 768px) {
    #namemodul,
    #inhalt {
        padding-left: var(--s-5);
        padding-right: var(--s-5);
    }

    :root {
        --vr-hero:    60px;
        --vr-section: 50px;
        --vr-footer:  30px;
    }
}


/* ------- Serenade Typography (Figma) -------- */

/* Section accent for the page H1. Wasser is the default for every
 * subpage; the home page (and any page without an active menu item)
 * falls back to petrol. Per-section overrides match the Figma source
 * (file oQhmhUU0axPdFzvhmTaKPg):
 *   • Verwaltungsrat (node 23:289) → wasser  (= default, no override)
 *   • Projekte       (node 34:256) → schilf
 *   • News                          → wiese  (Phase 1 brief — wire when frame exists)
 *   • Kontakt        (node 37:130) → petrol (same accent as the home page)
 * The CSS variable lets individual modules / articles override the
 * colour locally if ever needed. */
:root         { --page-h1-color: var(--c-accent-blau); }
body#home     { --page-h1-color: var(--c-petrol); }
body#site     { --page-h1-color: var(--c-petrol); }
body#kontakt  { --page-h1-color: var(--c-petrol); }
body#projekte-wohlgruppe { --page-h1-color: var(--c-schilf); }

/* Verwaltungsrat: the H1 is already wasser (subpage default); the section
 * H2 headings on this page share that wasser accent. body#id beats the
 * base `h2 { color: petrol }` rule on specificity. */
body#verwaltungsrat h2 { color: var(--c-wasser); }

/* Section accent must beat any per-module title-colour modifier
 * (mod_serenade_hero__title--petrol, mod_serenade_intro__title--wasser,
 * etc.). The modifiers are class selectors (specificity 0,1,0); adding a
 * body-id prefix lifts the rule to 1,1,0 so the page-level accent always
 * wins regardless of what the editor picked in the module backend.
 * Add new pages here as they get a section accent. */
body#projekte-wohlgruppe .mod-serenade-hero__title,
body#projekte-wohlgruppe .mod-serenade-hero__title--petrol,
body#projekte-wohlgruppe .mod-serenade-hero__title--wasser,
body#projekte-wohlgruppe .mod-serenade-hero__title--wiese,
body#projekte-wohlgruppe .mod-serenade-hero__title--white,
body#projekte-wohlgruppe .mod-serenade-intro__title,
body#projekte-wohlgruppe .mod-serenade-intro__title--petrol,
body#projekte-wohlgruppe .mod-serenade-intro__title--wasser,
body#projekte-wohlgruppe .mod-serenade-intro__title--wiese {
    color: var(--c-schilf);
}

body#kontakt .mod-serenade-hero__title,
body#kontakt .mod-serenade-hero__title--petrol,
body#kontakt .mod-serenade-hero__title--wasser,
body#kontakt .mod-serenade-hero__title--wiese,
body#kontakt .mod-serenade-hero__title--white,
body#kontakt .mod-serenade-intro__title,
body#kontakt .mod-serenade-intro__title--petrol,
body#kontakt .mod-serenade-intro__title--wasser,
body#kontakt .mod-serenade-intro__title--wiese {
    color: var(--c-petrol);
}

h1,
h2 {
    margin: 0 0 var(--s-7) 0;
    padding: 0;
    font-family: var(--ff-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-display);
    color: var(--c-petrol);
}

h1 {
    font-size: var(--fs-h1);
    color: var(--page-h1-color);
}
h2 { font-size: var(--fs-h2); }

h3,
h4,
h5,
h6 {
    margin: 0 0 var(--s-4) 0;
    padding: 0;
    font-family: var(--ff-text);
    font-weight: var(--fw-bold);
    line-height: var(--lh-text);
    color: var(--c-petrol);
}

h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-body); }
h5,
h6 { font-size: var(--fs-small); }

p {
    margin: 0 0 var(--s-4) 0;
}

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

a {
    text-decoration: none;
    outline: none;
    color: var(--c-petrol);
}

a:hover,
a:focus-visible {
    text-decoration: none;
    color: var(--c-wasser);
    outline: none;
}

strong,
b {
    font-weight: var(--fw-bold);
}

em,
i {
    font-style: italic;
}

small {
    font-size: var(--fs-xsmall);
    line-height: var(--lh-text);
}

/* Joomla article / component content inherits the same scale */
#inhalt,
.item-page,
.com-content-article {
    font-family: var(--ff-text);
    font-size: var(--fs-body);
    line-height: var(--lh-text);
    color: var(--c-petrol);
}

/* Utility: same rounded corners as the rest of the site's images
 * (team photo, history intro, contact-person photo, … all use --rad-card).
 * Add `class="img-rounded"` to any <img>; max-width:100% keeps it fluid.
 * overflow:hidden clips child content too, so it also works on a wrapper. */
.img-rounded {
    border-radius: var(--rad-card);
    overflow: hidden;
    max-width: 100%;
}

/* Responsive type scale — one place for the whole site */
@media (max-width: 1280px) {
    :root {
        --fs-h1:   48px;
        --fs-h2:   32px;
        --fs-body: 18px;
        --fs-nav:  20px;
    }
}

@media (max-width: 768px) {
    :root {
        --fs-h1:   36px;
        --fs-h2:   26px;
        --fs-h3:   20px;
        --fs-body: 17px;
        --fs-nav:  18px;
    }
}

/* Non-semantic module titles (p/span instead of h1–h6) */
.mod-serenade-teasers__title {
    margin: 0 0 var(--s-2) 0;
    font-family: var(--ff-text);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    line-height: var(--lh-text);
    color: var(--c-petrol);
}

.mod-serenade-team-photo__hotspot {
    font-family: var(--ff-text);
    font-weight: var(--fw-regular);
    font-size: var(--fs-plus);
    line-height: 1;
}

.mod-serenade-team-photo__tip {
    font-family: var(--ff-text);
    font-weight: var(--fw-regular);
    font-size: var(--fs-xsmall);
    line-height: var(--lh-text);
}

.mod-serenade-team-photo__caption {
    font-family: var(--ff-text);
    font-style: italic;
    font-size: var(--fs-small);
    line-height: var(--lh-text);
}

.mod-serenade-organigramm__label {
    font-family: var(--ff-text);
    font-weight: var(--fw-regular);
    font-size: var(--fs-small);
    line-height: var(--lh-text);
}

.mod-serenade-history-intro__caption {
    font-family: var(--ff-text);
    font-weight: var(--fw-regular);
    font-size: var(--fs-small);
    line-height: var(--lh-text);
}

.mod-serenade-address__company {
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    line-height: var(--lh-text);
}


/* ------- Random Stuff -------- */

/* The admotion credit is rendered inside the footer module (next to the
 * copyright), not as a standalone template element. */


.clear { line-height: 0; }

/* Back-to-top button — brand styled (petrol circle, white arrow, wasser on
 * hover). main.js shows/hides it via inline display:block once the user
 * scrolls past the threshold, so the glyph is centred with line-height
 * (block layout) rather than flex. */
#scrollup {
    display: none;
    position: fixed;
    right: var(--s-6);
    bottom: var(--s-6);
    z-index: 99;
    width: var(--s-8);
    height: var(--s-8);
    margin: 0;
    padding: 0;
    background: var(--c-petrol);
    color: var(--c-white);
    border: 0;
    border-radius: var(--rad-dot);
    font-size: var(--fs-small);
    line-height: var(--s-8);
    text-align: center;
    cursor: pointer;
    transition: background var(--tr-base);
    -webkit-appearance: none;
            appearance: none;
}

#scrollup:hover,
#scrollup:focus-visible {
    background: var(--c-wasser);
}

#scrollup:focus-visible {
    outline: var(--bw-marker) solid var(--c-petrol);
    outline-offset: var(--s-1);
}



@media(min-width:460px){
    
}


@media(min-width:660px){

}


@media(min-width:768px){
#desktop { display: block; }
#mobile { display: none; }

    
    

}

@media(min-width:1000px){

}



@media(min-width:1250px){


}


/* Leere Label-Spalten ausblenden – außer bei der Anrede-Radiogruppe */
#userForm .rsform-block:not(.rsform-block-anrede) .formControlLabel {
    display: none;
}

/* Eingabefelder auf volle Breite ziehen – außer bei der Anrede-Radiogruppe */
#userForm .rsform-block:not(.rsform-block-anrede) .formControls {
    flex: 0 0 100%;
    max-width: 100%;
}

.top-spacing {
    margin-top: 20px;
}