/* oswald-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  src: url('../Fonts/oswald-v57-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oswald-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url('../Fonts/oswald-v57-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oswald-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../Fonts/oswald-v57-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oswald-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url('../Fonts/oswald-v57-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oswald-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url('../Fonts/oswald-v57-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oswald-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('../Fonts/oswald-v57-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-family: 'Lobster';
    src: url('../Fonts/lobster-regular-webfont.woff2') format('woff2'),
         url('../Fonts/lobster-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* noto-sans-tc-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 100;
  src: url('../Fonts/noto-sans-tc-v38-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-tc-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 200;
  src: url('../Fonts/noto-sans-tc-v38-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-tc-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url('../Fonts/noto-sans-tc-v38-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-tc-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400;
  src: url('../Fonts/noto-sans-tc-v38-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-tc-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 500;
  src: url('../Fonts/noto-sans-tc-v38-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-tc-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 600;
  src: url('../Fonts/noto-sans-tc-v38-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-tc-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 700;
  src: url('../Fonts/noto-sans-tc-v38-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-tc-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 800;
  src: url('../Fonts/noto-sans-tc-v38-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-tc-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 900;
  src: url('../Fonts/noto-sans-tc-v38-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {

    --bs-primary: #1c3c7a;
    --bs-secondary: #f6a702;

    --bs-primary-rgb: 28,60,122;
    --bs-secondary-rgb: 246,167,2;
    --bs-primary-rgba: rgba(28,60,122,.75);
    --bs-secondary-rgba: rgba(246,167,2,.75);

    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;

    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;

    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;


    --bs-font-sans-serif: 'Noto Sans TC', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-headline: 'Oswald', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-highlight: 'Lobster', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1.075rem;
    --bs-body-font-weight: 500;
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--bs-primary);
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-secondary-color-rgb: 33, 37, 41;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233, 236, 239;
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13, 110, 253;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #1c3c7a;
    --bs-link-hover-color-rgb: 10, 88, 202;
    --bs-code-color: #d63384;
    --bs-highlight-color: #212529;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: var(--bs-gray-400);
    --bs-border-radius: 0.275rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f6a702'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e") !important;
  }

.accordion {
  --bs-accordion-btn-icon-width: 1.5rem;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F6A702' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231C3C7A' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.tooltip {
    --bs-tooltip-max-width: 300px;
}

/* Global Custom Styles */
h1 {margin-bottom: 1.275rem;}
.h1, h1 {font-family: var(--bs-font-highlight); color: var(--bs-primary);}
.h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6 {font-family: var(--bs-font-headline); color: var(--bs-primary);}
.frame-layout-4 h2 {color:var(--bs-secondary); font-family: var(--bs-font-highlight);}
.form-control {-webkit-box-shadow:inset 0 0 3px 2px rgba(0,0,0,0.12); box-shadow:inset 0 0 3px 2px rgba(0,0,0,0.12); -webkit-appearance: none; appearance: none; padding: 10px; height: 45px; background-color: #ffffff;}
.form-control:focus {border-color: var(--bs-secondary);}
.font-200 {font-weight: 200 !important;}
.text-mute {font-weight: 400 !important; color: var(--bs-gray-600);}
.accordion-button::after { background-image: var(--bs-accordion-btn-icon);}
.accordion-button:not(.collapsed) {background-color: var(--bs-secondary);}
label .fa-solid { pointer-events: none; }
label [data-bs-toggle="tooltip"]:hover { filter: brightness(0.95);}
.tooltip {max-width: var(--bs-tooltip-max-width) !important;}
.tooltip .tooltip-inner{ background-color: var(--bs-primary) !important; color: #fff !important; opacity: 1;}
.tooltip.bs-tooltip-top .tooltip-arrow::before{border-top-color: var(--bs-primary) !important;}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before{border-bottom-color: var(--bs-primary) !important;}
.tooltip.bs-tooltip-start .tooltip-arrow::before{border-left-color: var(--bs-primary) !important;}
.tooltip.bs-tooltip-end .tooltip-arrow::before{border-right-color: var(--bs-primary) !important;}
.tooltip .tooltip-arrow, .tooltip .tooltip-arrow::before {display: none !important;}
.tooltip .tooltip-inner {margin: 0 !important;}
.lineH {background: url(../Images/Content/lineH.png) 0 0 repeat-x; height: 1px;}
.btn-close {background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f6a702'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e") center / 1.2em auto no-repeat !important; opacity: 1;}
.lbtn {appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; cursor: pointer; max-width: fit-content !important;}
.lbtn:focus {outline: none; }
.lbtn:focus-visible {outline: 2px solid var(--bs-primary); outline-offset: 2px;}
.offcanvas-backdrop.show {opacity: .7;}

/* SVN Button */
a.lbtn {max-width: fit-content;}
a.lbtn:hover {text-decoration: none;}
.btn-lieps {position:relative; padding: 10px 20px 2px; border: none; background: none; cursor: pointer; width: max-content; font-family: var(--bs-font-highlight); font-weight: 400; line-height: 1.3; text-transform: none; font-size: 1.425rem; color: var(--bs-primary); background-color: var(--bs-primary); box-shadow: var(--bs-gray-500) 2px 2px 8px; border: 1px solid var(--bs-secondary); border-radius: var(--bs-border-radius); z-index: 0; overflow: hidden; margin-bottom: .3rem;}
.btn-lieps:focus {outline-color: transparent; box-shadow: var(--bs-primary) 2px 2px 8px;}
.right::after, .btn-lieps::after {content: var(--content); display: block; position: absolute; white-space: nowrap; padding: 40px 40px; pointer-events:none;}
.btn-lieps::after {font-weight: 400; top: -33px; left: -20px; color: var(--bs-secondary);}
.right, .left {position: absolute; width: 100%; height: 100%; top: 0;}
.right {left: 66%;}
.left {right: 66%;}
.right::after {top: -30px; left: calc(-66% - 20px); background-color: var(--bs-white); color: transparent; transition: transform .4s ease-out; transform: translate(0, -90%) rotate(0deg)}
.btn-lieps:hover .right::after {transform: translate(0, -47%) rotate(0deg)}
.btn-lieps .right:hover::after {transform: translate(0, -50%) rotate(-7deg)}
.btn-lieps .left:hover ~ .right::after {transform: translate(0, -50%) rotate(7deg)}
.btn-lieps::before {content: ''; pointer-events: none; opacity: .25; background: radial-gradient(circle at 20% 35%,  transparent 0,  transparent 2px, var(--bs-white) 3px, var(--bs-white) 4px, transparent 4px), radial-gradient(circle at 75% 44%, transparent 0,  transparent 2px, var(--bs-white) 3px, var(--bs-white) 4px, transparent 4px), radial-gradient(circle at 46% 52%, transparent 0, transparent 4px, var(--bs-white) 5px, var(--bs-white) 6px, transparent 6px); width: 100%; height: 300%; top: 0; left: 0; position: absolute; animation: bubbles 4s linear infinite both;}
@keyframes bubbles { from {transform: translate();} to {transform: translate(0, -66.666%);}}

/* Layout Custom Styles */
body {background: var(--bs-primary);}
header.headerimg {background: url(../Images/Content/header-subpages.jpg) 50% 0 no-repeat;background-size: cover;height: 350px;}
#page1 header.headerimg {background: url(../Images/Content/bg-header.jpg) 50% 100% no-repeat;background-size: cover;height: 675px;}
section {background: url(../Images/Content/bg-section.jpg) 50% 0 repeat;}
#navbar-content {justify-content: flex-end;}
nav.navbar {padding-top:0 !important;}
header .headline {top: -85px;}
header .brotkrumen {top: -65px;}
#page1 .weather-act, #page1 .nohome {display: none !important;}
.accordion-button {color: var(--bs-secondary); font-family: var(--bs-font-highlight); font-size: 1.575rem; padding: 10px 10px 5px;}
.frame-type-felogin_login a {text-decoration: none;border-bottom: 3px solid var(--bs-secondary); -webkit-transition: all .3s; transition: all .3s;}
.frame-type-felogin_login a:hover {background-color: var(--bs-secondary); text-decoration: none; border-bottom: 3px solid var(--bs-secondary); color: var(--bs-primary);}

/* Navbar */
.navbar>.container {align-items: start;}
.navbar-collapse {padding: 30px 0 0 0; position: relative;z-index: 2;}
#page1 .navbar-collapse {padding: 30px 70px 0 0;}
.navbar-nav .nav-link {font-family: var(--bs-font-headline); font-weight: 300; font-size: 1.775rem; color: var(--bs-white);}
.navbar-nav .nav-link:hover {color: var(--bs-secondary); text-decoration: none;}
.navbar-nav .nav-item:last-child .nav-link {padding-right: 0 !important;}
.navbar-nav .nav-item.active .nav-link {color:var(--bs-secondary) !important;}
.navbar-nav .nav-item .dropdown-menu li.active .dropdown-item {color: var(--bs-secondary) !important;}
.navbar-nav .dropdown-menu {background: url(../Images/Content/bg-section.jpg) 50% 0 repeat;}
.navbar-nav .dropdown-menu .dropdown-item {color: var(--bs-primary); font-family: var(--bs-font-headline); font-weight: 400; font-size: 1.375rem;}
.navbar-nav .dropdown-menu .dropdown-item:hover {color: var(--bs-secondary); text-decoration: none; background: transparent !important;}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {color: var(--bs-secondary);}
.navbar-toggler {color: var(--bs-secondary);}
.navbar-toggler .hamburger-toggle .hamburger span {background-color: var(--bs-secondary) !important; height:3px !important;}

/* Breadcrumbs */
/*.brotkrumen nav.border-top.border-bottom {border-color: var(--bs-primary) !important; background: url(../Images/Content/bg-section.jpg) 50% 0 repeat;}*/
.breadcrumb-item a { color: var(--bs-secondary); font-weight: 400;  }
.breadcrumb-item a:hover { color: var(--bs-white); text-decoration: none;}
.breadcrumb-item.active { color: var(--bs-gray-500); font-weight: 400;}
.breadcrumb-item+.breadcrumb-item::before { color: var(--bs-white);}
.brotkrumen {opacity: 0;}
.brotkrumen.is-visible {opacity: 1;}
.brotkrumen nav.border-top.border-bottom { position: relative; border-color: var(--bs-gray-600) !important; background: none; overflow: hidden;}
.brotkrumen nav.border-top.border-bottom::before { content: ""; position: absolute; inset: 0; background: var(--bs-primary-rgba); opacity: 0.675; /* <--- HIER regelst du die Transparenz */ z-index: 0;}
.brotkrumen nav.border-top.border-bottom > * { position: relative; z-index: 1; /* Inhalte bleiben sichtbar */ color: var(--bs-white); font-weight: 400;}

/* Wetter Content Element Custom Styles */
.weather.d-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 20px;}
.weather-act-home {width: fit-content; display: flex; padding-top: 30px;}
.weather .weather-item p {margin-bottom: 0 !important;}
.weather-item-act {min-width: 209px;justify-content: center;}
.wind-indicator {display:inline-block; margin-top:9px; border-radius:50%; background-color:rgba(255,255,255,0.85);}
.wind-compass {position:relative; width:144px; height:144px; border-radius:50%; box-sizing:border-box; border:5px solid rgba(246,167,2,1);}
.wind-compass::before {content:""; position:absolute; inset:15px; border-radius:50%; border:6px solid rgba(5,44,101,0);}
.wind-compass span{position:absolute; font:700 16px/1 system-ui,sans-serif; color:rgba(5,44,101,.8); transform:translate(-50%,-50%);}
.wind-compass .n {left:50%; top:10%; }
.wind-compass .e {left:90%; top:50%; }
.wind-compass .s {left:50%; top:90%; }
.wind-compass .w {left:10%;  top:50%; }
.wind-base, .wind-swing {position:absolute; left:50%; top:50%; width:100%; height:100%; transform:translate(-50%,-50%); transform-origin:50% 50%;}
.wind-swing {animation:windSwing 3.2s ease-in-out infinite;}
@keyframes windSwing{
  0%   { transform:translate(-50%,-50%) rotate(-4deg); }
  50%  { transform:translate(-50%,-50%) rotate( 4deg); }
  100% { transform:translate(-50%,-50%) rotate(-4deg); }
}
.wind-arrow {position:absolute; left:50%; top:50%; width:84px; height:84px; transform:translate(-50%,-66%);}
.wind-arrow path {fill:var(--bs-primary);}
.wind-arrow circle {fill:#ffffff; opacity:0;}.act-wind, .act-temp {font-family: var(--bs-font-headline); font-size: 1.325rem; font-weight: 400; color: var(--bs-secondary);display: flex;justify-content: center;text-shadow: 0 0 2px rgba(5,44,101,0.8), 0 0 6px rgba(5,44,101,0.55);}
.wind-arrow-img{ position:absolute; left:50%; top:50%; width:75px; height:75px; transform: translate(-50%, -66%);}
/* Zeitstempel als Text auf einem Bogen (SE zwischen O und S) */
.wind-stand-arc{position:absolute; inset:0; pointer-events:none; overflow:visible;}
.wind-stand-svg{ width:100%; height:100%; display:block; overflow:visible;}
.wind-stand-text{font-size: 7px; fill:rgba(5,44,101,.75); letter-spacing: .2px;}
/* Wetter Home – Modal + 12h Diagramm (minimal notwendiges CSS) */
#weatherWindModal .modal-body {padding-top: 1rem;padding-bottom: 1.25rem;}
#windChart {max-width: 1050px !important; width: 100% !important; height: 450px !important; margin-left: auto; margin-right: auto;}
.offcanvas-body.forecast .small.text-muted {max-width: 1050px !important; width: 100% !important; margin-left: auto; margin-right: auto;}
#windChart svg {width: 100%; height: 100%; display: block; overflow: visible;}
#weatherWindModal .small, #weatherWindModal .text-muted {line-height: 1.35;}
/* Optional: Fokus-Rahmen für das klickbare Widget (A11y) */
.weather-act-home .js-wind-modal-trigger:focus {outline: 2px solid rgba(28,60,122,0.45); outline-offset: 4px; border-radius: 8px;}
/* Optional: Hover-Feedback (nur visuell, keine Pflicht) */
.weather-act-home .js-wind-modal-trigger:hover {filter: brightness(1.02);}
.wind-legend-line{display:inline-block; width:34px; height:4px; border-radius:999px;}
.wind-legend-gust{ background: var(--bs-secondary); }
.wind-legend-wind{ background: var(--bs-primary); }
.offcanvas-body.forecast {padding: 1rem 0; border-bottom: 8px solid var(--bs-secondary);} 
#weatherWindOffcanvas {height: max-content !important; max-height: 100% !important;}

/* Swiper Custom Styles (Home) */
.swiper {width: 920px; height: 410px; position: absolute; left: 50%; top: 50%; margin-left: -380px; margin-top: -275px;}
.swiper-slide {background-position: center; background-size: cover;}
.swiper-slide img {display: block; width: 100%; border-radius: var(--bs-border-radius); border: 15px solid var(--bs-white);}
.swiper-pagination-bullet {background: var(--bs-primary); border-radius: var(--swiper-pagination-bullet-border-radius, 50%); border: 4px solid white; display: inline-block; opacity: 1; height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 22px)); width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 22px));}
.swiper-pagination-bullet.swiper-pagination-bullet-active {background: var(--bs-secondary);}
.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction {bottom: -60px;}

/* Downloads */
.frame-type-downloads .h3 {font-size: calc(var(--bs-body-font-size) + .6vw);}
.downloads a {color: var(--bs-secondary); background-color: var(--bs-primary);}
.downloads a span {background-color: var(--bs-primary);}
.downloads a span.flex-grow-1 {margin-bottom: .15rem;}
.downloads a:hover {color: var(--bs-primary); text-decoration: none; background-color: var(--bs-white);}
.downloads a:hover span {background-color: var(--bs-white);}
@media (min-width: 1400px) {
  .frame-type-downloads .h3 {font-size: 1.575rem;}
}

/* Login / Mitgliederbereich */
.frame-type-felogin_login fieldset > div.d-flex {align-items: center; flex-direction: row;}
.frame-type-felogin_login fieldset label {width: 200px;}
.frame-type-felogin_login fieldset input[type='text'], .frame-type-felogin_login fieldset input[type='password'], .frame-type-felogin_login .d-flex.passwort-reset input[type='password'] {width: 600px;}
.frame-type-felogin_login ul.typo3-messages {list-style-type: none; padding-left: 0; width: 57%; margin-bottom: 2rem;}
.frame-type-felogin_login ul.typo3-messages p.alert-message {margin-bottom: 0 !important;}
.frame-type-felogin_login .passwort-reset label {width: 250px;}
.frame-type-felogin_login .d-flex.passwort-reset {align-items: center; flex-direction: row;}
.femanager_show .user-data-box h2, .femanager_show .berth-status-box h2, .femanager_show .user-status-box h2 {color: var(--bs-secondary); font-family: var(--bs-font-highlight); font-size: 1.575rem;}
.femanager_edit input[readonly] {background: url(../Images/Content/bg-section.jpg) 50% 0 repeat; color: var(--bs-gray-600);}
.femanager_edit textarea {min-height: 70px;}
.femanager_edit a.maillink {color: var(--bs-primary); text-decoration: none; border-bottom: 3px solid var(--bs-secondary); position: relative; top: -6px;}
.femanager_edit a.maillink:hover {background-color: var(--bs-secondary); text-decoration: none; border-bottom: 3px solid var(--bs-secondary);}
.femanager_edit .alert {margin-top: 1rem; margin-bottom: .5rem; color: var(--bs-white); padding: 3px 5px;}
.femanager_edit .alert button, .femanager_edit .alert h4 {display:none;}
.femanager_username label .info {top:-5px;color: var(--bs-secondary);}
.accordion-body {padding: 10px;}
.accordion-button {padding: 10px 10px 5px;background-color: var(--bs-primary);}
.user-data-actions__button {flex: 0 0 auto; position: relative; bottom: -12px;}
.user-data-box {flex: 1 1 420px; min-width: 280px;margin-top: 2.5rem;}
.lieps-offcanvas-edit {max-width: 100%;}
.offcanvas-header {background: var(--bs-primary);}
.offcanvas-header h5 {color: var(--bs-secondary); font-family: var(--bs-font-highlight); font-size: 1.575rem;}
.offcanvas-body {background: url(../Images/Content/bg-section.jpg) 50% 0 repeat;}
.offcanvas-body h4 {color: var(--bs-secondary); font-family: var(--bs-font-highlight); font-size: 1.575rem;}
.offcanvas-body .checkbox-wrapper-10 {gap: .5rem !important;}
.tx-femanager button {border: unset;}
.working-hours i.fas {position: relative; top:1px}
#c68 {display: none;}
.user-payment-box, .berth-payment-box {width: 315px; min-width: 315px; max-width: 100%;}
.payment-status p {margin-bottom: .5rem;}
.payment-status i {color:var(--bs-secondary);}
.berth-status-box .lineH {margin-top: .75rem; margin-bottom: .75rem;}

/* Toggle Switch Flip */
.checkbox-wrapper-10 .tgl {display: none;}
.checkbox-wrapper-10 .tgl, .checkbox-wrapper-10 .tgl:after, .checkbox-wrapper-10 .tgl:before, .checkbox-wrapper-10 .tgl *, .checkbox-wrapper-10 .tgl *:after, .checkbox-wrapper-10 .tgl *:before, .checkbox-wrapper-10 .tgl + .tgl-btn {box-sizing: border-box;}
.checkbox-wrapper-10 .tgl::-moz-selection, .checkbox-wrapper-10 .tgl:after::-moz-selection, .checkbox-wrapper-10 .tgl:before::-moz-selection, .checkbox-wrapper-10 .tgl *::-moz-selection, .checkbox-wrapper-10 .tgl *:after::-moz-selection, .checkbox-wrapper-10 .tgl *:before::-moz-selection, .checkbox-wrapper-10 .tgl + .tgl-btn::-moz-selection, .checkbox-wrapper-10 .tgl::selection, .checkbox-wrapper-10 .tgl:after::selection, .checkbox-wrapper-10 .tgl:before::selection, .checkbox-wrapper-10 .tgl *::selection, .checkbox-wrapper-10 .tgl *:after::selection, .checkbox-wrapper-10 .tgl *:before::selection, .checkbox-wrapper-10 .tgl + .tgl-btn::selection {background: none;}
.checkbox-wrapper-10 .tgl + .tgl-btn {outline: 0; display: block; width: 4em; height: 2em; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.checkbox-wrapper-10 .tgl + .tgl-btn:after, .checkbox-wrapper-10 .tgl + .tgl-btn:before { position: relative; display: block; content: ""; width: 50%; height: 100%;}
.checkbox-wrapper-10 .tgl + .tgl-btn:after {left: 0;}
.checkbox-wrapper-10 .tgl + .tgl-btn:before {display: none;}
.checkbox-wrapper-10 .tgl:checked + .tgl-btn:after {left: 50%;}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn {padding: 2px; transition: all 0.2s ease; font-family: sans-serif; perspective: 100px;}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after, .checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {display: inline-block; transition: all 0.4s ease; width: 100%; text-align: center; position: absolute; line-height: 2em; font-weight: bold; color: #fff; position: absolute; top: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 4px;}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after {content: attr(data-tg-on); background: var(--bs-success); transform: rotateY(-180deg);}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {background: var(--bs-danger); content: attr(data-tg-off);}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:active:before {transform: rotateY(-20deg);}
.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:before {transform: rotateY(180deg);}
.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:after {transform: rotateY(0); left: 0; background: var(--bs-success);}
.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:active:after {transform: rotateY(20deg);}

/* Mitgliederliste */
.grid-4 {grid-template-columns: repeat(4, minmax(max-content, 1fr)); width: 100%; overflow-x: auto;}
.grid-4 > .head {background: var(--bs-primary) !important;    color: var(--bs-white);                  font-weight: 400; position: sticky; /* optional */ top: 0; z-index: 1;}
.grid-4 > .cell {padding: 6px 10px; white-space: nowrap;  border-radius: 0;}
.grid-4 > .cell:nth-child(8n+1),
.grid-4 > .cell:nth-child(8n+2),
.grid-4 > .cell:nth-child(8n+3),
.grid-4 > .cell:nth-child(8n+4) {
  background: var(--bs-gray-200);
}
/* Even rows: 6–10, 16–20, 26–30, ... */
.grid-4 > .cell:nth-child(8n+5),
.grid-4 > .cell:nth-child(8n+6),
.grid-4 > .cell:nth-child(8n+7),
.grid-4 > .cell:nth-child(8n+8) {
  background: var(--bs-gray-100);
}
.femanager_list h4 {
  color: var(--bs-secondary);
  font-family: var(--bs-font-highlight);
  font-size: 1.575rem;
}

/* Footer */
footer {color: var(--bs-gray-500);}
footer a {color: var(--bs-secondary);}
footer a:hover {color: var(--bs-white); text-decoration: none;}
footer ul.nav {justify-content: space-between; padding-left: 250px;}


/* RWS */
/* MIN WIDTH */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        margin-left: 15%;
    }
}

/* MAX WIDTH */
@media (max-width: 1649.98px) {
  .swiper {width: 830px; height: 370px; margin-left: -320px; margin-top: -260px;}
  #windChart {max-width: 1250px !important; width: 1250px !important; height: 480px !important;}
  .offcanvas-body.forecast .small.text-muted {max-width: 1250px !important;}
  .frame-type-felogin_login ul.typo3-messages {width: 66%;}
  footer ul.nav {padding-left: 150px;}
}

@media (max-width: 1399.98px) {
  header .brotkrumen {top: -45px;}
  #page1 header.headerimg {background: url(../Images/Content/bg-header.jpg) 50% 0 no-repeat;background-size: cover;height: 600px;}
  #page1 .navbar-collapse {padding: 30px 0 0 0;}
  .navbar-nav .nav-link {font-size: 1.575rem;}
  .navbar-nav .dropdown-menu .dropdown-item {font-size: 1.275rem;}
  .weather-act-home {padding-top: 0;}
  .weather .weather-item:first-child {display: none;}
  .swiper {width: 750px; height: 335px; margin-left: -252px; margin-top: -250px;}
  #windChart {max-width: 1150px !important; width: 1150px !important; height: 450px !important;}
  .offcanvas-body.forecast .small.text-muted {max-width: 1150px !important;}
  .frame-type-felogin_login ul.typo3-messages {width: 77%;}
  footer ul.nav {padding-left: 90px;}
}

@media (max-width: 1199.98px) {
  .navbar-collapse {background-color: var(--bs-primary); border: 1px solid var(--bs-secondary); padding: 1rem !important;}
  .navbar-nav .nav-item {border-bottom: 1px solid var(--bs-gray-500);}
  .navbar-nav .nav-item:last-child {border-bottom: unset;}
  .swiper {width: 650px; height: 288px; margin-left: -185px; margin-top: -210px;}
  .modal-dialog {max-width: 95%;}
  #c61 .accordion {margin-bottom:2rem !important;}
  #windChart {max-width: 950px !important; width: 950px !important; height: 390px !important;}
  .offcanvas-body.forecast .small.text-muted {max-width: 950px !important;}
  .frame-type-felogin_login ul.typo3-messages {width: 84%;}
  footer ul.nav {padding-left: 0;}
}

@media (max-width: 991.98px) {
  .h1 {display: none !important;}
  header .brotkrumen {top: 0;}
  .swiper {display: none;}
  .weather .weather-item:first-child {display: block;}
  .weather.d-grid {grid-template-columns: 1fr; gap: 20px;}
  .frame-type-felogin_login fieldset input[type='text'], .frame-type-felogin_login fieldset input[type='password'] {width: 512px;}
  #c68 {display: block;}
  #windChart {max-width: 750px !important; width: 750px !important; height: 320px !important;}
  .offcanvas-body.forecast .small.text-muted {max-width: 750px !important;}
  .frame-type-felogin_login ul.typo3-messages {width: 100%;}
    footer ul.nav {padding-left: 40px;}
}

@media (max-width: 767.98px) {
  .frame-type-felogin_login fieldset > div.d-flex, .frame-type-felogin_login .d-flex.passwort-reset {align-items: center; flex-direction: column;}
  .frame-type-felogin_login fieldset label, .frame-type-felogin_login .passwort-reset label {width: 100% !important;}
  .frame-type-felogin_login fieldset input[type='text'], .frame-type-felogin_login fieldset input[type='password'], .frame-type-felogin_login .d-flex.passwort-reset input[type='password'] {width: 100%;}
  #windChart {height: 300px !important;min-height: 280px !important;}
  .femanager_show .user-data-box {width: 100%;}
  h1 {margin-bottom: .575rem;}
  #page17 .lbtn {margin-bottom: 1rem;}
  #c61 .accordion {margin-top: 2rem !important;}
  #windChart {max-width: 565px !important; width: 565px !important; height: 250px !important;}
  .offcanvas-body.forecast .small.text-muted {max-width: 565px !important;}
  .offcanvas-body.forecast {padding: 0;}
  .berth-status-box {margin-top: 1.5rem !important;}
  footer ul.nav {padding-left: 0;}
  footer .footer-logo {justify-content: end !important;}
}

@media (max-width: 575.98px) {
  header.headerimg {height: 250px;}
  #page1 header.headerimg {height: 565px;}
  .weather-act-home {margin-top: 0 !important;position: relative; top: -15px;}
  #weatherWindModal .modal-title {font-size: 1.05rem;}
  #windChart {height: 240px !important;min-height: 200px !important;}
  .modal-dialog {max-width: 100%;}
  header .brotkrumen {display: none !important;}
  footer ul.nav {display: flex !important; justify-content: space-between; flex-wrap: nowrap; width: 100%;}
  h1 {font-size: 2.175rem !important;}
  html:not(#page1) h1 {margin-bottom: .775rem !important; margin-top: .475rem !important;}
  .user-status-box {margin-top: 1rem !important}
  #windChart {max-width: 92% !important; width: 92% !important; height: 230px !important;}
  .offcanvas-body.forecast .small.text-muted {max-width: 92% !important;}
}