html { scroll-behavior:smooth; scroll-padding-top:var(--header-h, 110px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
html, body { margin:0 auto;font-family: "Open Sans",arial,sans-serif;font-size:var(--fontSize); color:var(--fontColor);background-color:#f2f2f2; }
a.menu-label { color:inherit; text-decoration:none; }
:root {
    --accentColor:#3f5264;
    --accentColorDark:#2a3642;
    --spacing:90px;
    --spacing_small:45px;
    --spacing_smallest:20px;
    --fontColor:#2a3642;
    --grey:rgba(63,82,100,0.15);
    --width:1500px;
    --widthSecond:1100px;
    --fontSize:1rem;

}

.brieseHeader .top {
  box-sizing: border-box;
  height: 50px;
  background-color: #262626;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 5px solid var(--accentColor);
  max-height: 100px;
  transition: all .1s ease-in-out;
}
.margincontainer_small{ max-width:var(--widthSecond);margin:0 auto;width:100%; }
.margincontainer { max-width:var(--width);margin:0 auto;width:100%; }

.brieseHeader .top { height:50px; box-sizing:border-box;height:50px;background-color:#262626;display:flex;padding-left:10px;padding-right:10px;border-bottom:0px solid var(--accentColor);max-height:100px;transition:all .1s ease-in-out; }
.brieseHeader .top ul { list-style:none;margin:0;padding:0;display:flex; }
.brieseHeader .top ul li { color:#fff;text-transform:uppercase;display:flex;font-size:12px;padding-bottom:1px;transition:all .1s ease-in-out; }
.brieseHeader .top ul li.aktiv { background-color:var(--accentColor);color:#fff;padding:10px 20px;line-height:26px; }
.brieseHeader .top ul li a { line-height:26px;color:#fff;text-decoration:none;padding:10px 20px; }
.brieseHeader .top ul li:not(.aktiv):hover { background-color:rgba(255,255,255,0.05);cursor:pointer; }
.brieseHeader .top .logo { width:170px;flex-shrink:1;background:url(./images/Briese_white_logo.png) center left no-repeat transparent;background-size:100% auto;margin-right:10px;margin-bottom:10px;margin-top:5px;position:relative; }
.brieseHeader .top .logo::after { content:" ";display:block;position:relative;padding-bottom:20%; }
.brieseHeader .top .logo a { position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;}
.brieseHeader .top .margincontainer { display:flex; }
.brieseHeader .sub { background-color:var(--accentColor); }
.brieseHeader .sub .margincontainer { display:flex;padding:10px 0px;align-items: center;height:100px;box-sizing:border-box;}
.brieseHeader .sub .margincontainer .menu ul {list-style:none;margin:0;padding:0; display:flex; }
.brieseHeader .sub .margincontainer .menu ul li { position:relative; display:block;padding:10px 20px;color:#fff;font-size:18px; font-weight: 500;}
.brieseHeader .sub .margincontainer .menu ul li.right { margin-left:auto; }
.brieseHeader .sub .margincontainer .menu > ul > li:hover { background-color:#2a3642;cursor:pointer; }

.brieseHeader .sub .margincontainer .menu ul li ul {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:220px;
    background-color:#2a3642;
    padding:6px 0;
    z-index:100;
    flex-direction:column;
}
.brieseHeader .sub .margincontainer .menu ul li:hover > ul { display:flex; }
.brieseHeader .sub .margincontainer .menu ul li ul li {
    padding:8px 16px;
    font-size:15px;
    font-weight:400;
    white-space:nowrap;
}
.brieseHeader .sub .margincontainer .menu ul li ul li:hover { background-color:var(--accentColor); cursor:pointer; }
.brieseHeader .sub .margincontainer .menu ul li ul li a {
    display:block;
    margin:-8px -16px;
    padding:8px 16px;
    color:inherit;
    text-decoration:none;
}
.brieseHeader .sub .margincontainer .logo { margin-right:20px; position:relative;max-width:300px;width:100%;background:url(./images/logo_termial.svg) center center no-repeat transparent;top:-5px; }
.brieseHeader .sub .margincontainer .logo::after { content:" ";display:block;padding-bottom:22%; }
.brieseHeader .sub .margincontainer .logo a { position:absolute;left:0;top:0;right:0;bottom:0;z-index:1; }
.brieseHeader .sub .margincontainer .menu { position:relative;width:100%; }

/* Header LinkedIn icon next to CONTACT */
.brieseHeader .sub .menu ul li.linkedin { display:flex; align-items:center; padding:6px 12px; }
.brieseHeader .sub .menu ul li.linkedin a {
    display:block;
    width:50px;
    height:50px;
    padding:0;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zM8.34 17.34V10.5H6.09v6.84h2.25zM7.21 9.46a1.3 1.3 0 1 0 0-2.6 1.3 1.3 0 0 0 0 2.6zm10.13 7.88v-3.75c0-2-.43-3.55-2.77-3.55-1.12 0-1.88.62-2.19 1.2h-.03V10.5H10.2v6.84h2.25v-3.39c0-.89.17-1.76 1.28-1.76 1.09 0 1.1 1.02 1.1 1.82v3.33h2.51z'/></svg>") center/contain no-repeat;
    transition:opacity .15s ease-in-out;
    margin-bottom: -50px;
  transform: translateY(-50%);
}
.brieseHeader .sub .menu ul li.linkedin a:hover { opacity:0.7; }
.brieseHeader .sub .margincontainer .menu > ul > li.linkedin:hover { background-color:transparent; }

/* Hamburger button: hidden on desktop */
.brieseHeader .menu-toggle {
    display:none;
    background:transparent;
    border:0;
    width:44px;
    height:44px;
    padding:10px;
    cursor:pointer;
    margin-left:auto;
    position:relative;
    z-index:1001;
}
.brieseHeader .menu-toggle span {
    display:block;
    width:100%;
    height:3px;
    background:#fff;
    margin:5px 0;
    border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
    transform-origin:center;
}
body.menu-open .brieseHeader .menu-toggle span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
body.menu-open .brieseHeader .menu-toggle span:nth-child(2) { opacity:0; }
body.menu-open .brieseHeader .menu-toggle span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

/* Sub-toggle button (inside menu items with submenu): hidden on desktop */
.brieseHeader .sub .menu .sub-toggle { display:none; }

/* Close button: hidden on desktop, shown only inside overlay on mobile */
.brieseHeader .menu-close { display:none; }

body.menu-open { overflow:hidden; }


.two_r {display:flex;box-sizing:border-box; }
.two_r > div { width:50%;box-sizing:border-box; }
.two_r > div:nth-child(1) { align-self: center;position:relative;z-index:1; }



.two_rr {display:flex;box-sizing:border-box; }
.two_rr > div { width:50%;box-sizing:border-box; }
.two_rr > div:nth-child(1) { padding-right:calc(var(--spacing_small) / 2) }
.two_rr > div:nth-child(2) { padding-left:calc(var(--spacing_small) / 2) }

.two_rr a { color:var(--accentColorDark);font-weight:bold;text-decoration:none; }

.overview { display:flex;margin:0 calc(var(--spacing) / -2);flex-wrap:wrap; }
.overview > div { width:calc(100% / 3);position:relative;box-sizing:border-box;flex-wrap:wrap;padding:0 calc(var(--spacing_small) / 2);padding-bottom:calc(var(--spacing_small) / 2) }
.overview > div > div { background-color:var(--accentColor);color:#fff;min-height: 100%; }
.overview > div > div div.hd { padding:calc( var(--spacing_small)  / 2);}
.overview > div > div a { display:inline-block;padding:calc(var(--spacing_smallest) / 2) var(--spacing_smallest);font-weight:bold;margin-bottom:calc(var(--spacing_smallest) / 2); background-color:var(--accentColorDark);color:#fff;text-decoration:none;margin-bottom:0; }
.overview > div > div .rgt { text-align:right;}
.overview > div > div > div.img { width:100%;position:relative;}
.overview > div > div > div.img:after { content:" ";display:block;position:relative;padding-bottom:66%;  }
.overview > div > div > div.img img { position:absolute;left:0;right:0;top:0;bottom:0;height:100%; width:100%;object-fit:cover; }



.pad_smal_t_b  { padding-top:var(--spacing_small); padding-bottom:var(--spacing_small); }

.pad_t_b { padding-top:var(--spacing); padding-bottom:var(--spacing); }
.pad_t { padding-top:var(--spacing);  }
.pad_b { padding-bottom:var(--spacing);  }

section.subsitesection { border-top:5px solid var(--grey);}

.grey { padding:var(--spacing_small);position:relative; }

.grey.tr .txt { position:relative;z-index:1; }
.grey.tr::after {  content: " ";
  display: block;
  position: absolute;
  top: calc(var(--spacing_small) * 0);
  bottom: calc(var(--spacing_small) * 0);
  left: calc(var(--spacing_small) * -3);
  width: calc((100vW * 0.5) + ( 100% / 3));
  transform: translateX(0%);
  background-color: var(--grey);
}

.grey_left .img-fullright { position:absolute; top:calc(var(--spacing_small) * 0);bottom:calc(var(--spacing_small) * 0);right:0px;width:calc((100vW  * 0.5) + ( 100% / 3));display:flex;align-items:center;justify-content:flex-end; }
.grey_left .img-fullright .cntr { position:relative;width:100%;max-width:calc(var(--width) * 0.6);}
.grey_left .img-fullright .cntr::after { content:" ";display:block;padding-bottom:43%; }

section#cuxhaven { overflow-x:clip;
  overflow-y: visible; }

h2 { text-transform:uppercase;margin-top:0px;margin-bottom:var(--spacing_smallest); }

.tlist { list-style:none;margin:0;padding:0; }
.tlist li { background-color:#fff;padding:var(--spacing_smallest);margin-bottom:calc(var(--spacing_smallest) / 2);border-left:5px solid var(--accentColor); }

section.second .icons { display:flex;flex-wrap:wrap; }
section.second .icons > div > img { width:100px;height:100px;border:0px; }
section.second .icons > div { width:50%;box-sizing:border-box;padding:0 calc(var(--spacing_smallest));text-align:center;margin-bottom:var(--spacing_smallest); }
section.second .icons > div strong { font-weight:900;display:block; }

#interactiveTerminalPlacehoder {
    position:absolute;
top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.terminal-img-wrap {
    position:relative;
    width:100%;
    padding-bottom:43%; /* original image aspect */
    background:var(--grey);
    overflow:hidden;
}
.terminal-img-wrap > img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.terminal-img-wrap .svg_wrap {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:6;
}
.terminal-img-wrap .svg_wrap .terminal-svg {
    width:100%;
    height:100%;
    display:block;
    overflow:visible;
}
.terminal-img-wrap .terminal-area {
    fill: rgba(63,82,100,0.6);
    stroke: #fff;
    stroke-width: 0;
    pointer-events: auto;
    cursor: pointer;
    transition: fill .2s ease-in-out;
}
.terminal-img-wrap .terminal-area:hover,
.terminal-img-wrap .terminal-area.is-hover {
    fill: rgba(255,0,0,0.6);
}

.terminal-img-wrap  #renewable-cargo-area-2,
.terminal-img-wrap  #renewable-cargo-area-1 {
    fill: rgba(31,98,174,0.6);
}
.terminal-img-wrap  #renewable-cargo-area-2:hover,
.terminal-img-wrap  #renewable-cargo-area-1.is-hover,
.terminal-img-wrap  #renewable-cargo-area-1:hover,
.terminal-img-wrap  #renewable-cargo-area-2.is-hover  {
    fill: rgba(31,98,174,0.7);
}




.terminal-img-wrap  #offshore-wind-base-area {
    fill: rgba(255,0,0,0.6);
}
.terminal-img-wrap  #offshore-wind-base-area:hover,
.terminal-img-wrap  #offshore-wind-base-area.is-hover {
    fill: rgba(255,0,0,0.7);
}


/* Dotted red connector lines — invisible until JS+viewport trigger animation */
.terminal-img-wrap .connector {
    fill: none;
    stroke: #ff0000;
    stroke-width: 5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    visibility: hidden;
    transition: stroke-dashoffset 1.6s ease-out, stroke-dasharray .3s ease-out 1.5s;
}



.terminal-img-wrap .connector.ready { visibility: visible; }
.terminal-img-wrap.in-view .connector.ready {
    stroke-dashoffset: 0;
    stroke-dasharray: 0 8;
}
@media (prefers-reduced-motion: reduce) {
    .terminal-img-wrap .connector {
        transition: none;
        visibility: visible;
        stroke-dasharray: 0 8;
        stroke-dashoffset: 0;
    }
}
/* Popup cards overlay inside image */
.terminal-card {
    position:absolute;
    background:linear-gradient(to right, rgba(63,82,100,0.95) 0%, rgba(63,82,100,0.95) 35%, rgba(63,82,100,0) 100%);
    color:#fff;
    padding:8px 80px 8px 14px;
    white-space:nowrap;
    z-index:5;
    pointer-events:none;
}
.terminal-card strong { display:block; font-weight:700; font-size:14px; line-height:1.2; color:#fff; }
.terminal-card em     { display:block; font-style:normal; font-weight:400; font-size:12px; line-height:1.2; opacity:0.95; margin-top:2px; color:#fff; }
.renewable-card { left: 5.5%; bottom: 12%; }
.offshore-card  {right: 7.5%;top: 12%;background:linear-gradient(to left, rgba(63,82,100,0.95) 0%, rgba(63,82,100,0.95) 35%, rgba(63,82,100,0) 100%);text-align:right; }


.blue { padding:calc(var(--spacing_small) * 0.5);background-color:var(--accentColor);position:relative; color:#fff;box-sizing:border-box;margin-left:auto;margin-bottom: calc(var(--spacing_small) * -2); }
.blue::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: var(--accentColor);
  transform: translateX(100%);
  right: 1px;
  width: calc((100vW - var(--widthSecond)) / 2);
}


/* ---------- section#cuxhaven responsive ---------- */
@media (max-width: 1800px) {
    .grey_left .img-fullright { position:relative;top:auto;left:auto;width:100%;}

}


@media (max-width: 1200px) {
    /* Stack: terminal map on top, text below */
    section#cuxhaven .two_r { flex-direction:column; }
    section#cuxhaven .two_r > div { width:100%; }
    section#cuxhaven .two_r > div:nth-child(1) { margin-bottom:var(--spacing_small); }

    /* Drop desktop full-bleed absolute image -> normal flow */
    section#cuxhaven .grey_left { position:static; }
    section#cuxhaven .grey_left .img-fullright {
        position:static;
        width:100%;
    }
    section#cuxhaven .grey_left .img-fullright .cntr { max-width:none; }
    section#cuxhaven .grey_left .img-fullright .cntr::after { display:none; }
    section#cuxhaven #interactiveTerminalPlacehoder { position:static; }

    /* Kill grey right-bleed so full-width column doesn't overflow */
    section#cuxhaven .grey.tr::after { display:none; }
    section#cuxhaven .grey.tr { background-color:var(--grey); }

    .blue::after { display:none;}
}

@media (max-width: 480px) {
    /* Shrink floating terminal cards on tiny screens */
    .terminal-card { padding:5px 40px 5px 8px; }
    .terminal-card strong { font-size:11px; }
    .terminal-card em { font-size:10px; }
}




.three_r { display:flex;margin-left:calc(var(--spacing_small) / -2);margin-right:calc(var(--spacing_small) / -2); }
.three_r > div { width:calc(100% / 3);padding:0 calc(var(--spacing_small) / 2) ;}

.two_r2 { display:flex;margin-left:calc(var(--spacing_small) / -2);margin-right:calc(var(--spacing_small) / -2); }
.two_r2 > div { width:calc(100% / 3);padding:0 calc(var(--spacing_small) / 2) ;}
.two_r2 > div:nth-child(2) { width:calc(100% * 2 / 3) ;padding:0 calc(var(--spacing_small) / 2) ;}



section.second { overflow-x: hidden;overflow-y: hidden; }

.imageRow { display:flex;margin-left:calc(var(--spacing_small) / -2);margin-right:calc(var(--spacing_small) / -2); }
.imageRow  > div { width:calc(100% / 3);padding:calc(var(--spacing_small) / 2);padding-bottom:0px;padding-top:0px;}
.imageRow  > div > div { width:100%;position:relative;background-color:var(--grey); }
.imageRow  > div > div::after { content:" ";display:block;position:relative;padding-bottom:65%; }
.imageRow  > div > div img { position:absolute;top:0;bottom:0;right:0;left:0;object-fit: contain; object-fit: cover; height: 100%; width: 100%;}

section.contact { background-color:var(--grey); }

.popUpOverlay {
    position:fixed; left:0; right:0; top:0; bottom:0;
    background-color:var(--accentColor);
    opacity:0; visibility:hidden;
    z-index:9999; height:100%; width:100%;
    transition: opacity .3s ease, visibility 0s linear .3s;
}
.popUp {
    max-width:900px; width:100%;
    position:fixed; top:50%; left:50%;
    transform:translate(-50%, -50%) scale(0.92);
    box-sizing:border-box;
    z-index:10000; display:block;
    opacity:0; visibility:hidden;
    transition: opacity .35s ease, transform .35s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear .35s;
}
body.popup-open .popUpOverlay {
    opacity:0.8; visibility:visible;
    transition: opacity .3s ease;
}
body.popup-open .popUp {
    opacity:1; visibility:visible;
    transform:translate(-50%, -50%) scale(1);
    transition: opacity .35s ease, transform .35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.popup-open { overflow:hidden; }
.popUp .cntr { display:flex;align-items:center;align-items: stretch; }
.popUp .cntr > div:nth-child(1) { width:50%;position:relative; }
.popUp .cntr > div:nth-child(2) { width:50%;padding-left:var(--spacing_small);padding-right:var(--spacing_small);box-sizing: border-box;background-color:#fff;position: relative;}
.popUp .cntr > div .img { position:relative;z-index:2; } 
.popUp .cntr > div .img::after { content:" ";display:block;position:relative;padding-bottom:56%; } 
.popUp .cntr > div .img img { position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover; }
.popUp .cntr > div.rgt::after { content:" ";display:block;position:absolute;top:calc(var(--spacing_small) * -1);left:calc(var(--spacing_small) * -2);right:0;bottom:calc(var(--spacing_small) * -1);background-color:#fff;}
.popUp .cntr > div.rgt > div { position:relative;z-index:1; }
.popUp .cntr > div a  { display:inline-block;padding:calc(var(--spacing_smallest) / 2) var(--spacing_smallest);font-weight:bold; margin-bottom:calc(var(--spacing_smallest) / 2); background-color:var(--accentColor);color:#fff;text-decoration:none;  }
.popUp .cntr > div.rgt > div.close { position:absolute;top:calc(var(--spacing_small) * 0 - 20px);right:10px;width:40px;height:40px;background:url(./images/close.svg) center center no-repeat #db3b6f;background-size:50% auto;border:0;cursor:pointer; }
/* Popup ohne Bild: Text-Spalte einzige Spalte -> volle Breite, weisser Hintergrund, mittig im Popup */
.popUp .cntr > div.rgt:only-child { width:100%;padding:var(--spacing_small);box-sizing:border-box;background-color:#fff; }
.popUp .cntr > div.rgt:only-child::after { display:none; }

section.footer { background-color:var(--accentColorDark);color:#fff; }
section.footer .logo { margin-right: 20px;position: relative;max-width: 270px;width: 100%;background: url(./images/logo_termial.svg) center center no-repeat transparent;top: -25px; }
section.footer .logo::after {content: " ";  display: block;padding-bottom:30%;}
section.footer a { color:#fff !important;text-decoration: none; }
section.footer h4 { margin-top:0px; }
section.footer .sameheight { min-height:60px;  }


ul.partners { display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;margin-left:calc(var(--spacing_smallest) / -2);margin-right:calc(var(--spacing_smallest) / -2); }
ul.partners > li { box-sizing:border-box;width:calc(100% / 4);padding:calc(var(--spacing_smallest) / 2); position:relative; }
ul.partners > li::after { content:" ";display:block;padding-bottom:50%;background-color:var(--grey); }
ul.partners > li > a { position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; display:block; }
ul.partners > li > a:hover { background-color:rgba(255,255,255,0.15); }

ul.partners > li.bluewater { background:url(./images/logo_bluewaterbreb.png) center center no-repeat transparent;background-size:80% auto; }
ul.partners > li.epas { background:url(./images/EPAS_Logo_Neu_Infos-agenCy-1.png) center center no-repeat transparent;background-size:80% auto; }
ul.partners > li.bbcchartering { background:url(./images/BBC_Chartering_Logo.svg) center center no-repeat transparent;background-size:80% auto; }
ul.partners > li.ndsport { background:url(./images/nports_logo.png) center center no-repeat transparent;background-size:80% auto; }
ul.partners > li.briesechartering { background:url(./images/briese-catering.png) center center no-repeat transparent;background-size:80% auto; }
ul.partners > li.breb { background:url(./images/BX_RZ_BremerReederei_pos_4d.svg) center center no-repeat transparent;background-size:80% auto; }

.contacts { display:flex;margin:0 calc(var(--spacing_smallest) * -1 / 2); }
.contacts > div { width:calc(var(--widthSecond) / 4);box-sizing: border-box;padding:calc(var(--spacing_smallest) / 2); }
.contacts > div.img div { position:relative; }
.contacts > div.img div::after { content:" ";display:block;position:relative;padding-bottom:110%;background-color:#fff;background:url(./images/vcardplaceholder.png)  center center no-repeat var(--accentColor);bbackground-size:cover; }
.contacts > div.img.vimg-moritz div::after,
.contacts > div.img.vimg-martin div::after { background-repeat:no-repeat;background-position:center bottom;background-size:auto 92%;background-image:linear-gradient(160deg,#7d93a8 0%,var(--accentColor) 55%,var(--accentColorDark) 100%); }
.contacts > div.img.vimg-moritz div::after { background-image:url(./images/MoritzvSch.png),linear-gradient(160deg,#7d93a8 0%,var(--accentColor) 55%,var(--accentColorDark) 100%);background-size:cover; }
.contacts > div.img.vimg-martin div::after { background-image:url(./images/Martin%20Baumann.png),linear-gradient(160deg,#7d93a8 0%,var(--accentColor) 55%,var(--accentColorDark) 100%);background-size:cover; }
.contacts > div a { display:inline-block;padding:calc(var(--spacing_smallest) / 2) var(--spacing_smallest);font-weight:bold;margin-bottom:calc(var(--spacing_smallest) / 2); background-color:var(--accentColor);color:#fff;text-decoration:none;  }
.contacts .role { font-size:0.85em;font-weight:normal;opacity:0.8; }



#hero {
    position:relative;
    width:100%;
    height:calc(100vh - 155px);
    overflow:hidden;
    background:#000;
}
#hero .videobg {
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
    pointer-events:none;
}
#hero .mapoverlay {
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    z-index:2;
    background:transparent;
    pointer-events:auto;
    overflow:hidden;
}
#hero .mapoverlay .map-placeholder {
    position:absolute;
    color:rgba(255,255,255,0.6);
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
    padding:20px 40px;
    position:absolute;
    top:0; left:0;right:0;bottom:0;
    background:url("./images/map.png?v=1") right bottom no-repeat rgba(63,82,100,0.5);
    background-size:auto 100% ;
    padding:20px 40px;
    transform-origin: left bottom;
    animation: mapZoomIn 2s ease-out forwards;
}
@keyframes mapZoomIn {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    #hero .mapoverlay .map-placeholder { animation: none; }
}
#hero .videooverlay {
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    z-index:3;
    display:flex;
    align-items:center;
    pointer-events:none;
    background:linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%);
}
#hero .videooverlay .titlebox {
    pointer-events:auto;
    color:#fff;
    max-width:570px;
    width:100%;
    padding:0 50px;
    box-sizing:border-box;
}
#hero .videooverlay h1 { font-size:42px; font-weight:700; margin:0 0 12px; line-height:1.15; }
#hero .videooverlay p  { font-size:20px; margin:0 0 24px; }
#hero .videooverlay button {
    display:inline-block;
    margin-right:10px;
    padding:12px 24px;
    background:var(--accentColor);
    color:#fff;
    border:none;
    font-size:15px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
    cursor:pointer;
    transition:background .15s ease-in-out;
}
#hero .videooverlay button:hover { background:#2a3642; }
#hero .videooverlay button.play-btn { display:inline-flex; align-items:center; gap:0px; }
#hero .videooverlay button.play-btn::before {
    content:"";
    width:25px;
    height:25px;
    position:relative;left:-10px;
    flex-shrink:0;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>") center/contain no-repeat;
}

#hero.overlays-hidden .videooverlay,
#hero.overlays-hidden .mapoverlay { display:none; }

#hero .show-overlays {
    position:absolute;
    bottom:20px; right:20px;
    z-index:4;
    padding:10px 18px;
    background:var(--accentColor);
    color:#fff;
    border:none;
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
    cursor:pointer;
}
#hero .show-overlays:hover { background:#2a3642; }
#hero .show-overlays[hidden] { display:none; }

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */

[data-anim] {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}
[data-anim="fade-up"]      { transform: translateY(40px); }
[data-anim="fade-down"]    { transform: translateY(-40px); }
[data-anim="fade-left"]    { transform: translateX(-60px); }
[data-anim="fade-right"]   { transform: translateX(60px); }
[data-anim="scale-in"]     { transform: scale(0.9); }
[data-anim="zoom-in"]      { transform: scale(1.08); }
[data-anim="clip-reveal"]  { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(0.77, 0, 0.18, 1), opacity .8s ease; }

[data-anim].in-view {
    opacity: 1;
    transform: none;
}
[data-anim="clip-reveal"].in-view { clip-path: inset(0 0 0 0); }

/* Stagger child animations: parent has data-anim-stagger, children get sequential delay via inline var */
[data-anim-stagger] > [data-anim] {
    transition-delay: calc(var(--i, 0) * 100ms);
}

/* Hero overlay enters on load */
#hero .videooverlay h1,
#hero .videooverlay p,
#hero .videooverlay button {
    animation: heroIn 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
#hero .videooverlay p      { animation-delay: 0.2s; }
#hero .videooverlay button { animation-delay: 0.4s; }

@keyframes heroIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: kill animations */
@media (prefers-reduced-motion: reduce) {
    [data-anim],
    [data-anim].in-view,
    #hero .videooverlay h1,
    #hero .videooverlay p,
    #hero .videooverlay button {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        clip-path: none !important;
    }
}


/* Map overlay fade (2s) when in video view */
#hero .mapoverlay { transition: opacity 3.5s ease-in-out; }
#hero.map-hidden .mapoverlay { opacity: 0; pointer-events: none; }

/* View toggle (Play Video / Show Map): hidden until controls-ready, then fades in */
#hero .view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .8s ease-in-out;
}
#hero.controls-ready .view-toggle { opacity: 1; pointer-events: auto; }
/* Disable the shared hero entrance animation so opacity stays 0 until controls-ready */
#hero .videooverlay button.view-toggle { animation: none; }
#hero .view-toggle::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
/* Play icon while map is shown (button = Play Video) */
#hero:not(.map-hidden) .view-toggle::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");
}
/* Map icon while map is hidden (button = Show Map) */
#hero.map-hidden .view-toggle::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z'/></svg>");
}

/* Scroll-down indicator: visible from start, gentle bounce */
#hero .hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.65);
    z-index: 7;
    cursor: pointer;
    animation: hero-scroll-bounce 1.4s ease-in-out infinite;
}
#hero .hero-scroll::after {
    content: "";
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/contain no-repeat;
}
#hero .hero-scroll:hover { opacity: 0.8; }
@keyframes hero-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
    #hero .mapoverlay { transition: none; }
    #hero .view-toggle { transition: none; }
    #hero .hero-scroll { animation: none; }
}


#hero .mapoverlay .map-placeholder {
    background: url("./images/map.png?v=1") right bottom no-repeat rgba(63,82,100,0.8);
    background-size: auto 100%;
}
#hero .videooverlay {
    background: linear-gradient(45deg,  rgba(63,82,100,0.7) 0%,rgba(103,149,186,0) 65%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#hero .videooverlay button { background-color:#fff;color:var(--accentColor); }
#hero .videooverlay button:hover { cursor:pointer;opacity:0.9;background-color:#fff; }


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Generic image responsiveness */
img { max-width:100%; height:auto; }

/* ---------- <= 1200px : container padding ---------- */
@media (max-width: 1200px) {
    .margincontainer,
    .margincontainer_small { padding-left:20px; padding-right:20px; box-sizing:border-box; }
    :root { --spacing:70px; --spacing_small:35px; }
}

/* ---------- <= 992px : tablet ---------- */
@media (max-width: 992px) {
    :root { --spacing:55px; --spacing_small:30px; --spacing_smallest:18px; }

    /* Header top bar: stay single row, never wrap (logo hides below when tight) */
    .brieseHeader .top { height:auto; min-height:auto; flex-wrap:nowrap; }
    .brieseHeader .top .margincontainer { flex-wrap:nowrap; align-items:center; }
    .brieseHeader .top ul { flex-wrap:nowrap; }
    .brieseHeader .top ul li a,
    .brieseHeader .top ul li.aktiv { padding:8px 12px; font-size:11px; }
    .brieseHeader .top .logo { width:140px; }

    /* Sub header */
    .brieseHeader .sub .margincontainer { height:auto;padding:10px 20px; }
    .brieseHeader .sub .margincontainer .logo { max-width:220px; margin-right:10px; margin-bottom:0px; }
    .brieseHeader .sub .margincontainer .menu { width:100%; }
    .brieseHeader .sub .margincontainer .menu ul { flex-wrap:wrap; }
    .brieseHeader .sub .margincontainer .menu ul li { padding:8px 12px; font-size:15px; }
    .brieseHeader .sub .margincontainer .menu ul li.right { margin-left:0; }

    /* Hero — stack: video+map on top, title text below */
    #hero {
        height:auto;
        min-height:0;
        display:grid;
        grid-template-rows:auto auto;
    }
    #hero .videobg,
    #hero .mapoverlay {
        position:relative;
        grid-row:1;
        grid-column:1;
        width:100%;
        height:auto;
        aspect-ratio:16 / 9;
    }
    #hero .videooverlay {
        position:static;
        grid-row:2;
        grid-column:1;
        height:auto;
        padding:30px 0;
        background: var(--accentColor);
    }
    #hero .hero-scroll { display:none !important; }



    #hero .videooverlay h1 { font-size:32px; }
    #hero .videooverlay p { font-size:17px; }
    #hero .videooverlay .titlebox { padding:0 30px; max-width:100%; }
    /* Three columns -> stack two then one */
    .three_r { flex-wrap:wrap; }
    .three_r > div { width:50%; margin-bottom:var(--spacing_small); }







    
    .imageRow { flex-wrap:wrap; }
    .imageRow > div { width:50%; margin-bottom:var(--spacing_small); }

    /* Partners 4 -> 3 */
    ul.partners > li { width:calc(100% / 3); }

    /* Contacts: 2 columns of (img + btns) */
    .contacts { flex-wrap:wrap; }
    .contacts > div { width:50%; }

      /* Subsite: overview cards 3 -> 2 */
    .overview > div { width:50%; }
}

/* ---------- <= 768px : mobile ---------- */
@media (max-width: 768px) {
    :root { --spacing:40px; --spacing_small:25px; --spacing_smallest:15px; --fontSize:0.95rem; }

    /* Header top: single row, hide logo when space runs out (no wrap) */
    .brieseHeader .top .margincontainer { flex-direction:row; align-items:center; }
    .brieseHeader .top .logo { display:none; }
    .brieseHeader .top ul { width:100%; justify-content:flex-start; }
    .brieseHeader .top ul li a,
    .brieseHeader .top ul li.aktiv { padding:6px 10px; font-size:10px; }

    /* Sub header */
    .brieseHeader .sub .margincontainer { padding:10px 15px; flex-wrap:nowrap; align-items:center; }
    .brieseHeader .sub .margincontainer .logo { max-width:180px; margin-bottom:0; }
    .brieseHeader .sub .margincontainer .logo::after { padding-bottom:25%; }

    /* Show hamburger */
    .brieseHeader .menu-toggle { display:block; }

    /* Close button inside overlay (mobile) */
    .brieseHeader .menu-close {
        display:block;
        position:absolute;
        top:18px;
        right:18px;
        width:44px;
        height:44px;
        background:transparent;
        border:0;
        cursor:pointer;
        padding:0;
        z-index:1002;
    }
    .brieseHeader .menu-close span {
        position:absolute;
        top:50%; left:50%;
        width:26px;
        height:3px;
        background:#fff;
        border-radius:2px;
        transition:background .2s ease;
    }
    .brieseHeader .menu-close span:nth-child(1) { transform:translate(-50%, -50%) rotate(45deg); }
    .brieseHeader .menu-close span:nth-child(2) { transform:translate(-50%, -50%) rotate(-45deg); }
    .brieseHeader .menu-close:hover span,
    .brieseHeader .menu-close:focus span { background:var(--accentColor); }

    /* Menu becomes fixed full-screen overlay */
    .brieseHeader .sub .margincontainer .menu {
        position:fixed;
        top:0; left:0; right:0; bottom:0;
        width:100%;
        height:100vh;
        background:var(--accentColorDark);
        padding:80px 24px 40px;
        box-sizing:border-box;
        overflow-y:auto;
        z-index:1001;
        transform:translateX(100%);
        transition:transform .3s cubic-bezier(0.22, 0.61, 0.36, 1);
        visibility:hidden;
    }
    body.menu-open .brieseHeader .sub .margincontainer .menu {
        transform:translateX(0);
        visibility:visible;
    }
    .brieseHeader .sub .margincontainer .menu > ul { flex-direction:column; }
    .brieseHeader .sub .margincontainer .menu > ul > li {
        position:relative;
        display:block;
        width:100%;
        padding:0;
        font-size:18px;
        font-weight:600;
        border-bottom:1px solid rgba(255,255,255,0.1);
        box-sizing:border-box;
    }

    .brieseHeader .sub .menu ul li.linkedin a {
        margin-bottom: 0px;left:0px; 
    transform: translateY(0%);
    position: relative;
    margin: 10px;
    }

    .brieseHeader .sub .margincontainer .menu > ul > li:hover { background-color:transparent; }
    .brieseHeader .sub .margincontainer .menu > ul > li.right { margin-left:0; }

    .brieseHeader .sub .margincontainer .menu .menu-label {
        display:block;
        padding:18px 50px 18px 16px;
        cursor:pointer;
    }

    /* Sub-toggle visible on mobile */
    .brieseHeader .sub .menu .sub-toggle {
        display:block;
        position:absolute;
        top:0; right:0;
        width:54px;
        height:56px;
        background:transparent;
        border:0;
        cursor:pointer;
        padding:0;
    }
    .brieseHeader .sub .menu .sub-toggle::before,
    .brieseHeader .sub .menu .sub-toggle::after {
        content:"";
        position:absolute;
        top:50%; left:50%;
        width:14px;
        height:2px;
        background:#fff;
        transition:transform .25s ease;
    }
    .brieseHeader .sub .menu .sub-toggle::before { transform:translate(-50%, -50%); }
    .brieseHeader .sub .menu .sub-toggle::after  { transform:translate(-50%, -50%) rotate(90deg); }
    .brieseHeader .sub .menu .has-sub.open > .sub-toggle::after { transform:translate(-50%, -50%) rotate(0deg); }

    /* Submenu accordion on mobile */
    .brieseHeader .sub .margincontainer .menu ul li ul {
        display:block;
        position:static;
        min-width:0;
        background-color:rgba(0,0,0,0.2);
        padding:0;
        max-height:0;
        overflow:hidden;
        transition:max-height .3s ease;
    }
    .brieseHeader .sub .margincontainer .menu .has-sub.open > ul {
        max-height:600px;
    }
    .brieseHeader .sub .margincontainer .menu ul li:hover > ul {
        /* Disable desktop hover-open on mobile */
        display:block;
    }
    .brieseHeader .sub .margincontainer .menu ul li ul li {
        font-size:14px;
        padding:12px 16px 12px 28px;
        font-weight:400;
        white-space:normal;
        border-bottom:1px solid rgba(255,255,255,0.05);
    }
    .brieseHeader .sub .margincontainer .menu ul li ul li:last-child { border-bottom:0; }
    .brieseHeader .sub .margincontainer .menu ul li ul li a {
        margin:-12px -16px -12px -28px;
        padding:12px 16px 12px 28px;
    }

    /* Hero — keep stacked layout from 768px breakpoint, tighter spacing */
    #hero .videooverlay { background:var(--accentColor); padding:20px 0; }
    #hero .videooverlay .titlebox { padding:0 20px; }
    #hero .videooverlay h1 { font-size:24px; line-height:1.2; }
    #hero .videooverlay p { font-size:15px; }
    #hero .videooverlay button { padding:10px 18px; font-size:13px; }

    /* Two-column rows -> stack */
    .two_r { flex-direction:column; }
    .two_r > div { width:100%; }

    /* Grey side panel: kill the negative-left bleed */
    .grey { padding:var(--spacing_small) 20px;background-color:var(--grey); }

    /* Three columns -> single column */
    .three_r { margin-left:0;margin-right:0; }
    .three_r > div { width:100%;padding-left:0;padding-right:0; }

    .two_r2 { margin-left:0;margin-right:0; flex-wrap:wrap; }
    .two_r2 > div { width:100% !important;padding-left:0 !important;padding-right:0 !important; }

    .imageRow { margin-left:0;margin-right:0;}

    .imageRow > div { width:100%;padding:0 20px; }

    /* Icons: 2 cols stay */
    section.second .icons > div { padding:0 10px; }
    section.second .icons > div > img { width:80px; height:80px; }

    /* Blue box full width, kill right-side bleed */
    .blue { width:100%; padding:var(--spacing_small) 20px; }
    .blue::after { display:none; }

    /* Partners 3 -> 2 */
    ul.partners > li { width:50%; }

    /* Contacts: 1 column rows */
    .contacts > div { width:100%; }
    .contacts > div.img { max-width:200px; }

    /* Headings */
    h2 { font-size:1.4rem; }
    h3 { font-size:1.15rem; }

    /* Subsite: overview cards -> 1 column */
    .overview { margin-left:0; margin-right:0; }
    .overview > div { width:100%; padding:0 0 var(--spacing_small) 0; }

    /* Subsite: two_rr -> stack */
    .two_rr { flex-direction:column; }
    .two_rr > div { width:100%; }
    .two_rr > div:nth-child(1) { padding-right:0; margin-bottom:var(--spacing_small); }
    .two_rr > div:nth-child(2) { padding-left:0; }
.two_rr > div:nth-child(2) .img::after { padding-bottom:50%; }
    
    /* Popup: top-anchored, full width, stack columns */
    .popUp {
        max-width:none;
        width:auto;
        left:12px; right:12px;
        top:12px; bottom:auto;
        transform:translateY(-20px) scale(0.96);
        max-height:calc(100vh - 24px);
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }
    body.popup-open .popUp { transform:translateY(0) scale(1); }
    .popUp .cntr { flex-direction:column; }
    .popUp .cntr > div:nth-child(1),
    .popUp .cntr > div:nth-child(2) { width:100%; }
    .popUp .cntr > div:nth-child(2) { padding:25px 20px 20px; }
    .popUp .cntr > div.rgt::after { display:none; }
    .popUp .cntr > div.rgt > div.close {
        top:10px; right:10px;
        width:36px; height:36px;
    }

    /* Footer stacks via three_r above */
}

/* ---------- <= 480px : small mobile ---------- */
@media (max-width: 480px) {
    :root { --spacing:30px; --spacing_small:20px; --fontSize:0.9rem; }

    .margincontainer,
    .margincontainer_small { padding-left:15px; padding-right:15px; }

    .brieseHeader .top ul li a,
    .brieseHeader .top ul li.aktiv { padding:5px 8px; font-size:9px; letter-spacing:0; }

    #hero .videooverlay h1 { font-size:20px; }
    #hero .videooverlay p { font-size:14px; }

    /* Icons 1 col */
    section.second .icons > div { width:100%; }

    /* Partners 1 col */
    ul.partners > li { width:100%; }

    h2 { font-size:1.2rem; }
}

/* ---------- Windmill hover popups ---------- */
.windmillholder > div {
    cursor: pointer;
    z-index: 1;
    transition: background-color .15s ease-in-out;
}
.windmillholder > div:hover {
    z-index: 100;
    background-color: #ff0000;
    opacity:1;
}



.wm-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    width: 0;
    height: 90px;
    z-index: 15;
}
.wm-line {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px dotted #ff0000;
    transition: height .25s ease-in-out;
    z-index: 1;
}
.wm-card {
    position: absolute;
    top: 2px;
    left: calc(50% + 0px);
    transform: translateY(0%);
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    background: linear-gradient(to right, rgba(63, 82, 100,1) 0%, rgba(63, 82, 100,1) 30%, rgba(63, 82, 100,0) 100%);
    color: #fff;
    padding: 0;
    white-space: nowrap;
    transition: max-width .3s ease-in-out, opacity .2s ease-in-out, padding .3s ease-in-out;
    transition-delay: 0s;
}

div.city .wm-card {     transform: translateY(0%) translateX(-100%);
        background: linear-gradient(to left, rgba(63, 82, 100,1) 0%, rgba(63, 82, 100,1) 30%, rgba(63, 82, 100,0) 100%);

 }

.wm-card strong {
    display: block;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    color: #fff;
}
.wm-card em {
    display: block;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.2;
    opacity: 0.9;
    margin-top: 2px;
    color: #fff;
}
.windmillholder > div:hover .wm-line { height: 90px; }
.windmillholder > div:hover .wm-card {
    max-width: 320px;
    opacity: 1;
    padding: 8px 80px 8px 14px;
    transition-delay: .25s;
}
@media (prefers-reduced-motion: reduce) {
    .wm-line, .wm-card { transition: none; }
}

/* City marker: popup auto-shows on load, single bold line, larger font */
@keyframes cityLineIn {
    from { height: 0; }
    to   { height: 90px; }
}
@keyframes cityCardIn {
    from { max-width: 0; opacity: 0; padding: 8px 0 8px 0; }
    to   { max-width: 320px; opacity: 1; padding: 8px 14px 8px 80px; }
}
@keyframes cityCardInCity {
    from { max-width: 0; opacity: 0; padding: 8px 0 8px 0; }
    to   { max-width: 320px; opacity: 1; padding: 8px 14px    8px  80px; }
}
.windmillholder > div.city .wm-line {
    animation: cityLineIn .35s ease-out both;
}
.windmillholder > div.city .wm-card {
    animation: cityCardInCity .4s ease-out both;
}


.windmillholder > div.city .wm-card strong { font-size: 18px; }
.windmillholder > div.city .wm-card em { display: none; }

/* Staggered entry: Emden (w2) at 1s, Cuxhaven (w1) at 1.5s. Line first, then card. */
.windmillholder > div.w2 .wm-line { animation-delay: 1s; }
.windmillholder > div.w2 .wm-card { animation-delay: 1.35s; }
.windmillholder > div.w1 .wm-line { animation-delay: 1.5s; }
.windmillholder > div.w1 .wm-card { animation-delay: 1.85s; }

@media (prefers-reduced-motion: reduce) {
    .windmillholder > div.city .wm-line,
    .windmillholder > div.city .wm-card { animation: none; }
    .windmillholder > div.city .wm-line { height: 90px; }
    .windmillholder > div.city .wm-card { max-width: 320px; opacity: 1; padding: 8px 80px 8px 14px; }
}

/* ---------- Sticky header ---------- */
.brieseHeader {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #262626;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.brieseHeader .top {
    overflow: hidden;
    transition: max-height .25s ease-in-out, padding .25s ease-in-out, border-width .25s ease-in-out;
}
.brieseHeader.top-hidden .top {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0;
}

/* ---------- Contact CTA buttons (tel / mailto) ---------- */
a.cta {
    display: inline-flex;
    align-items: center;
    margin: 6px 8px 6px 0;
    padding: 10px 18px;
    background-color: var(--accentColor);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    border-radius: 4px;
    transition: background-color .15s ease-in-out, transform .15s ease-in-out;
}
a.cta:hover,
a.cta:focus { background-color: var(--accentColorDark); transform: translateY(-1px); }
a.cta::before {
    content: "";
    display: none;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    left: -10px;
    top: 2px;
}
a.cta[href^="tel:"]::before,
a.cta.mail-protect::before,
a.cta.cta-download::before,
a.cta.cta-external::before,
a.cta.darkblue::before { display: inline-block; }

a.cta.darkblue { background-color: var(--accentColorDark); }
a.cta.darkblue:hover,
a.cta.darkblue:focus { background-color: #1f2730; }
a.cta.darkblue::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zM8.34 17.34V10.5H6.09v6.84h2.25zM7.21 9.46a1.3 1.3 0 1 0 0-2.6 1.3 1.3 0 0 0 0 2.6zm10.13 7.88v-3.75c0-2-.43-3.55-2.77-3.55-1.12 0-1.88.62-2.19 1.2h-.03V10.5H10.2v6.84h2.25v-3.39c0-.89.17-1.76 1.28-1.76 1.09 0 1.1 1.02 1.1 1.82v3.33h2.51z'/></svg>");
}
a.cta[href^="tel:"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C9.4 21 3 14.6 3 6c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/></svg>");
}
a.cta.mail-protect { cursor: pointer; }
a.cta.mail-protect::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/></svg>");
}
a.cta.cta-download::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z'/></svg>");
}
a.cta.cta-external::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7zM19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7z'/></svg>");
}

.windmillholder { position:absolute;top:0;right:0;aspect-ratio: 1/0.8;height: 100%; }
.windmillholder > div { position:relative;border:3px solid #fff;box-sizing:border-box;background-color:var(--accentColor);opacity:0.6;  }
@media (max-width: 1500px) {
.windmillholder > div { border:2px solid #fff; }

}

@media (max-width: 900px) {
    .windmillholder > div { border:1px solid #fff; }

    .windmillholder > div .wm-line { border-left: 2px dotted #f00; }

   
    /* Shrink city marker line + card on mobile */
    .windmillholder > div.city .wm-line { height: 55px; }
    .windmillholder > div:hover .wm-line { height: 55px; }
    @keyframes cityLineIn { from { height:0; } to { height:55px; } }

    .wm-popup { height: 55px; }
    .wm-card { top: 1px; }
    .windmillholder > div.city .wm-card,
    .windmillholder > div:hover .wm-card { max-width: 180px; padding: 5px 44px 5px 9px; }
    .windmillholder > div.city .wm-card { padding: 5px 9px 5px 44px; }

    .wm-card strong,
    .windmillholder > div.city .wm-card strong { font-size: 12px; }
    .wm-card em { font-size: 10px; }

    /* City card uses animation w/ fill both → must shrink keyframe end too */
    @keyframes cityCardInCity {
        from { max-width: 0; opacity: 0; padding: 5px 0 5px 0; }
        to   { max-width: 180px; opacity: 1; padding: 5px 9px 5px 44px; }
    }
}
@media (max-width: 500px) {
    .windmillholder > div { border:0px solid #fff; }

    .windmillholder > div.city .wm-line { height: 38px; }
    .windmillholder > div:hover .wm-line { height: 38px; }
    @keyframes cityLineIn { from { height:0; } to { height:38px; } }

    .windmillholder > div.city .wm-card,
    .windmillholder > div:hover .wm-card { max-width: 130px; padding: 4px 30px 4px 7px; }
    .windmillholder > div.city .wm-card { padding: 4px 7px 4px 30px; }

    .wm-card strong,
    .windmillholder > div.city .wm-card strong { font-size: 10px; }
    .wm-card em { font-size: 9px; }
}


.windmillholder > div::after { content:" ";display:block;position:relative;padding-bottom:100%;border-radius:50%;  } 
/* Per-class windmill background SVG */
.windmillholder > div:not(.city)::after {
    background-color:var(--accentColor);
    background-image: url("./images/windmill.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.windmillholder.still > div:not(.city)::after {
    background-image: url("./images/windmill-still.svg");

}

.windmillholder:not(.still) > div.fast::after {
    background-image: url("./images/windmill-slow.svg");
}
.windmillholder:not(.still) > div.slow::after {
    background-image: url("./images/windmill-fast.svg");
}

.windmillholder > div.city  { background-image:none;background-color:red; }
.windmillholder > div.city::after { background-image:none;}

.windmillholder > div.z1 { z-index:1; }
.windmillholder > div.z2 { z-index:2; }
.windmillholder > div.z3 { z-index:3; }
.windmillholder > div.z4 { z-index:4; }
.windmillholder > div.z5 { z-index:5; }
.windmillholder > div.z6 { z-index:6; }
.windmillholder > div.z7 { z-index:7; }
.windmillholder > div.z8 { z-index:8; }
.windmillholder > div.z9 { z-index:9; }

/* ---------- Image carousel ---------- */
.imgCarousel { position:relative; }
.imgCarousel-viewport { overflow:hidden; width:100%; }
.imgCarousel-track {
    margin-left:0; margin-right:0;
    flex-wrap:nowrap !important;
    will-change:transform;
}
/* 3 slides on desktop, 2 on tablet, 1 on phone — override responsive imageRow rules */
.imgCarousel-track > div { flex:0 0 calc(100% / 3); width:calc(100% / 3); }
@media (max-width: 900px) {
    .imgCarousel-track > div { flex:0 0 calc(100% / 2); width:calc(100% / 2); }
}
@media (max-width: 560px) {
    .imgCarousel-track > div { flex:0 0 100%; width:100%; }
}

.imgCarousel-arrow {
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:5; width:48px; height:48px;
    border:none; cursor:pointer; padding:0;
    background:rgba(0,0,0,0.45); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:background-color .2s ease;
}
/* Same chevron SVG as the hero scroll-down indicator, rotated per direction. */
.imgCarousel-arrow::after {
    content:""; display:block; width:26px; height:26px;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/contain no-repeat;
}
.imgCarousel-arrow.prev::after { transform:rotate(90deg); }
.imgCarousel-arrow.next::after { transform:rotate(-90deg); }
.imgCarousel-arrow:hover { background:rgba(0,0,0,0.78); }
.imgCarousel-arrow:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.imgCarousel-arrow.prev { left:14px; }
.imgCarousel-arrow.next { right:14px; }

/* Month label: bottom-left, gradient (accent blue) only as tall as the text. */
.imgCarousel-track > div > div > .imgCarousel-month {
    position:absolute; left:10px; bottom:10px; z-index:2;
    padding:5px 10px;border-radius:4px;
    background:var(--accentColor);
    color:#fff; font-size:0.8rem; line-height:1.2; letter-spacing:0.3px;
    pointer-events:none;
}
.windmillholder > div.z10 { z-index:10; }