/* =========================================================
   FC Bad Kohlgrub – Kind-Template cassiopeia_fcbk
   Datei: media/templates/site/cassiopeia_fcbk/css/user.css
   ========================================================= */

/* --- Schriften (lokal, DSGVO-konform). Dateien liegen in ../fonts/ --- */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/barlow-condensed-700.woff") format("woff")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/barlow-condensed-800.woff") format("woff")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/barlow-400.woff") format("woff")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/barlow-500.woff") format("woff")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600 700;font-display:swap;src:url("../fonts/barlow-700.woff") format("woff")}

:root{
  --fcbk-yellow:#ffe100;
  --fcbk-black:#0b0b0b;
  --fcbk-ground:#f4f4f1;
  --fcbk-blue:#29a3e0;
  --fcbk-head:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --fcbk-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cassiopeia-color-primary:#0b0b0b;
  --cassiopeia-color-link:#0b0b0b;
  --cassiopeia-color-hover:#3a3a3a;
}

body.site{background:var(--fcbk-ground);color:var(--fcbk-black);font-family:var(--fcbk-body);font-size:1.125rem;line-height:1.65}
h1,h2,h3,h4,.page-header h1,.page-header h2{font-family:var(--fcbk-head);font-weight:800;line-height:1.08;color:inherit}
h1,.page-header h1{font-size:clamp(2.2rem,4vw,3.5rem)}
h2{font-size:clamp(1.8rem,3vw,2.6rem)}
a{color:var(--fcbk-black);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover,a:focus{color:#3a3a3a}

/* --- Header ------------------------------------------------ */
.container-header{background:var(--fcbk-black) !important;background-image:none !important;display:flex;align-items:stretch;justify-content:space-between;min-height:104px;padding:0;box-shadow:none;position:relative;z-index:50}
.container-header>.grid-child{max-width:none;margin:0;padding:0;width:auto}
.container-header .navbar-brand{display:flex;align-items:center;padding:0 0 0 40px;margin:0}
.container-header .brand-logo{display:flex;align-items:center;gap:16px;text-decoration:none;color:#fff;font-family:var(--fcbk-head);font-weight:800;font-size:26px;line-height:1;text-transform:uppercase}
.container-header .brand-logo img{height:80px;width:auto;max-width:none}
.container-header .brand-logo::after{content:"FC Bad\A Kohlgrub";white-space:pre;color:#fff}
.container-header .site-description{display:none}
.container-header .container-nav{display:flex;align-items:stretch;gap:0;padding:0;margin-left:auto}
.container-header .container-nav>nav,.container-header .container-nav>.moduletable{display:flex;align-items:center}

/* Hauptmenü (Dropdown-Metismenu) */
.container-header .mod-menu{display:flex;align-items:center;gap:4px;margin:0 24px 0 0;padding:0;list-style:none}
.container-header .mod-menu>li>a,.container-header .mod-menu>li>button,.container-header .metismenu.mod-menu .metismenu-item>a,.container-header .metismenu.mod-menu .metismenu-item>button.mod-menu__heading{color:#fff;font-family:var(--fcbk-head);font-weight:700;font-size:24px;padding:12px 16px;text-decoration:none;background:none;border:0;line-height:1.2}
.container-header .mod-menu>li>a:hover,.container-header .mod-menu>li>a:focus,.container-header .mod-menu>li.active>a,.container-header .mod-menu>li.current>a{color:var(--fcbk-yellow)}
.container-header .metismenu .mm-toggler{color:#fff}
.container-header .metismenu .mm-collapse,.container-header .metismenu .mm-collapsing{background:var(--fcbk-black);border-top:4px solid var(--fcbk-yellow);min-width:260px;padding:8px 0;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.container-header .metismenu .mm-collapse a{color:#fff;font-family:var(--fcbk-head);font-weight:600;font-size:20px;padding:10px 20px;display:block;text-decoration:none}
.container-header .metismenu .mm-collapse a:hover,.container-header .metismenu .mm-collapse a:focus{background:var(--fcbk-yellow);color:var(--fcbk-black)}
.container-header .navbar-toggler{display:none !important}

/* Gelber Block mit Menü-Symbol (Modulposition "search") */
.container-header .container-search{position:relative;isolation:isolate;padding:0 40px 0 96px;display:flex;align-items:center;margin:0}
.container-header .container-search::before{content:"";position:absolute;inset:0;background:var(--fcbk-yellow);clip-path:polygon(64px 0,100% 0,100% 100%,0 100%);z-index:-1}
.container-header .container-search p{margin:0}
.fcbk-burger{display:flex;align-items:center;justify-content:center;width:56px;height:56px;cursor:pointer;margin:0}
.fcbk-burger::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--fcbk-black);box-shadow:0 -11px 0 var(--fcbk-black),0 11px 0 var(--fcbk-black)}

/* Seitenmenü (Checkbox-Technik, ohne JavaScript) */
.fcbk-drawer-toggle{position:absolute;opacity:0;pointer-events:none}
.fcbk-drawer-toggle:focus-visible+.fcbk-burger{outline:3px solid var(--fcbk-black);outline-offset:2px}
.fcbk-drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:900;cursor:pointer}
.fcbk-drawer{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:88vw;background:var(--fcbk-black);border-left:6px solid var(--fcbk-yellow);overflow-y:auto;padding:24px 0 40px;z-index:901;transform:translateX(105%);transition:transform .25s ease}
.fcbk-drawer-toggle:checked~.fcbk-drawer-backdrop,.container-search:has(.fcbk-drawer-toggle:checked) .fcbk-drawer-backdrop{display:block}
.fcbk-drawer-toggle:checked~.fcbk-drawer,.container-search:has(.fcbk-drawer-toggle:checked) .fcbk-drawer{transform:none}
.fcbk-drawer-backdrop{font-size:0}
.fcbk-drawer p{margin:0}
.fcbk-drawer .moduletable{margin:0}
.fcbk-drawer__head{display:flex;justify-content:space-between;align-items:center;padding:0 24px 16px}
.fcbk-drawer__title{font-family:var(--fcbk-head);font-weight:800;font-size:28px;color:var(--fcbk-yellow);text-transform:uppercase}
.fcbk-drawer__close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.fcbk-drawer__close{position:relative}
.fcbk-drawer__close::before,.fcbk-drawer__close::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:3px;margin-top:-1.5px;background:#fff;border-radius:2px;transform:rotate(45deg)}
.fcbk-drawer__close::after{transform:rotate(-45deg)}
.fcbk-drawer ul{list-style:none;margin:0;padding:0}
.fcbk-drawer a,.fcbk-drawer .mod-menu__heading,.fcbk-drawer .mod-menu__separator{display:block;color:#fff;font-family:var(--fcbk-head);font-weight:700;font-size:24px;padding:10px 24px;text-decoration:none}
.fcbk-drawer ul ul a{font-weight:600;font-size:20px;padding:8px 24px 8px 40px}
.fcbk-drawer .mod-menu__heading{color:#9a9a9a;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;padding-top:14px}
.fcbk-drawer a:hover,.fcbk-drawer a:focus{background:var(--fcbk-yellow);color:var(--fcbk-black)}

/* --- Bausteine für Seiten ---------------------------------- */
.fcbk-tag{display:inline-block;background:var(--fcbk-yellow);color:var(--fcbk-black);font-family:var(--fcbk-head);font-weight:800;font-size:20px;letter-spacing:1px;padding:4px 22px 4px 14px;text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.fcbk-bar{width:64px;height:6px;background:var(--fcbk-yellow);margin-bottom:16px}

/* Startbild (Modulposition "banner") */
.container-banner{background:var(--fcbk-black);padding:0 40px 56px}
.fcbk-hero{max-width:1360px;margin:0 auto;position:relative}
.fcbk-hero img{display:block;width:100%;height:620px;object-fit:cover;object-position:center 40%}
.fcbk-hero__stripe{position:absolute;right:0;top:0;width:140px;height:100%;background:var(--fcbk-yellow);clip-path:polygon(100% 0,100% 100%,60% 100%)}
.fcbk-hero__text{position:absolute;left:0;bottom:0;max-width:820px}
.fcbk-hero__text .fcbk-tag{font-size:26px;padding:6px 28px 6px 18px}
.fcbk-hero__title{margin:0;background:var(--fcbk-black);color:#fff;font-family:var(--fcbk-head);font-weight:800;font-size:52px;line-height:1.05;padding:16px 36px 18px 18px}

/* Kacheln */
.fcbk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin:32px 0 16px}
.fcbk-tile{display:block;background:var(--fcbk-black);color:#fff;text-decoration:none;transition:transform .15s}
.fcbk-tile:hover,.fcbk-tile:focus{transform:translateY(-3px);color:#fff}
.fcbk-tile--yellow{background:var(--fcbk-yellow);color:var(--fcbk-black)}
.fcbk-tile--yellow:hover,.fcbk-tile--yellow:focus{color:var(--fcbk-black)}
.fcbk-tile img{display:block;width:100%;height:200px;object-fit:cover}
.fcbk-tile__body{padding:20px 22px 24px}
.fcbk-tile__body,.fcbk-tile__title,.fcbk-tile__text{display:block}
.fcbk-tile__title{font-family:var(--fcbk-head);font-weight:800;font-size:30px;line-height:1.1}
.fcbk-tile__text{font-size:16px;margin-top:6px;opacity:.85}

/* Schwarzer Band-Block (z. B. Spielbetrieb) */
.fcbk-band{background:var(--fcbk-black);color:#fff;padding:56px 40px;margin:48px calc(50% - 50vw) 0;}
.fcbk-band__inner{max-width:1360px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.fcbk-band h2{color:#fff;margin:14px 0 10px}

/* Buttons */
.fcbk-btn,.btn-primary,.contact-form .btn-primary,button.validate{display:inline-block;background:var(--fcbk-yellow) !important;color:var(--fcbk-black) !important;border:0 !important;border-radius:0 !important;font-family:var(--fcbk-head);font-weight:800;font-size:22px;padding:14px 30px;min-height:52px;text-decoration:none;cursor:pointer}
.fcbk-btn--dark{background:var(--fcbk-black) !important;color:#fff !important}
.fcbk-btn:hover,.btn-primary:hover{filter:brightness(.95)}

/* Mannschaftsseite */
.fcbk-team{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.fcbk-team__aside{flex:1 1 340px;background:#fff;border-top:6px solid var(--fcbk-yellow);padding:26px 28px 30px}
.fcbk-team__main{flex:2 1 560px;min-width:0}
.fcbk-photo-placeholder{height:460px;background:#2a2a2a;border:3px dashed #6a6a6a;display:flex;align-items:center;justify-content:center;color:#bdbdbd;font-size:22px;text-align:center}
.fcbk-box{background:var(--fcbk-ground);padding:14px 16px;margin:12px 0}

/* Karten (Kontakte, Sponsoren) */
.fcbk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.fcbk-card{background:#fff;border-top:6px solid var(--fcbk-yellow);padding:22px 24px}

/* Kontaktformular */
.contact-form .form-control,.contact-form input,.contact-form textarea{border:2px solid #cfcfcf;border-radius:0;font:inherit;min-height:48px}
.contact-form .form-control:focus{border-color:var(--fcbk-black);box-shadow:none}

/* Inhalt-Container */
.site-grid{grid-gap:0 2em}
.container-component{padding-top:48px;padding-bottom:72px}
.container-component>*:first-child{margin-top:0}

/* --- Footer ----------------------------------------------- */
.container-footer{background:var(--fcbk-black) !important;background-image:none !important;color:#cfcfcf;border-top:6px solid var(--fcbk-yellow);margin-top:0}
.container-footer a{color:#fff}
.container-footer a:hover{color:var(--fcbk-yellow)}
.container-footer .grid-child{max-width:1360px;padding:40px;display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
.container-footer .mod-menu{display:flex;gap:16px;list-style:none;padding:0;margin:0}
.fcbk-footer-address{font-size:15px;line-height:1.6}
.fcbk-footer-address img{height:64px;width:auto;float:left;margin-right:16px}
.back-to-top-link{background:var(--fcbk-yellow) !important;color:var(--fcbk-black) !important}


/* --- Korrekturen nach erster Vorschau --- */
html,body{overflow-x:clip}
.container-header .container-nav{flex-wrap:nowrap}
.container-header .container-nav .mod-menu{flex-wrap:nowrap}
.container-header .mod-menu>li{position:relative}
.container-header .metismenu>li>.mm-collapse,.container-header .metismenu>li>.mm-collapsing{position:absolute;top:100%;left:0;z-index:60;margin:0}
.container-header .metismenu .mm-collapse li{list-style:none;margin:0}
.container-header .mod-menu__heading{cursor:pointer}
.container-header .container-search{align-self:stretch}

.container-header>.grid-child:first-child{flex:none}
.container-header .container-nav{flex:1 1 auto;min-width:0;justify-content:flex-end}
.container-header .container-search{flex:none}
.container-header .container-nav .mod-menu{margin-right:8px;gap:0}
.container-header .mod-menu>li>a,.container-header .mod-menu>li>button{font-size:22px !important;padding:12px 14px !important}
@media (max-width:1300px){.container-header .mod-menu>li>a,.container-header .mod-menu>li>button{font-size:20px !important;padding:10px 10px !important}.container-header .container-search{padding-left:80px}}
@media (max-width:1120px){.container-header .container-nav>.mod-menu{display:none !important}}


/* Seitenmenü innerhalb des Headers: Menüs untereinander */
.container-header .fcbk-drawer .mod-menu{display:block !important;margin:0 !important;padding:0}
.container-header .fcbk-drawer .mod-menu li{display:block;position:static}
.container-header .fcbk-drawer .mod-menu>li>a,.container-header .fcbk-drawer .mod-menu>li>span,.container-header .fcbk-drawer .mod-menu>li>button{font-size:24px !important;padding:10px 24px !important;display:block;width:100%;text-align:left;color:#fff;font-family:var(--fcbk-head);font-weight:700}
.container-header .fcbk-drawer .mod-menu>li>.mod-menu__heading{font-size:15px !important;color:#9a9a9a;letter-spacing:1.5px;text-transform:uppercase;padding-top:16px !important}
.container-header .fcbk-drawer .mod-menu ul{display:block;padding:0;margin:0 0 8px}
.container-header .fcbk-drawer .mod-menu ul a{font-size:20px !important;font-weight:600;padding:7px 24px 7px 40px !important}
.container-header .metismenu .mm-collapse a{padding:8px 20px}
.container-header .metismenu .mm-collapse li{line-height:1.2}


/* Feinschliff Startseite & Footer */
.fcbk-tiles{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fcbk-tile{display:flex;flex-direction:column}
.fcbk-tile__body{flex:1}
.fcbk-band{margin-bottom:-72px}
.container-footer .mod-menu{flex-direction:row !important;flex-wrap:wrap;gap:8px 24px}
.container-footer .mod-menu li{list-style:none}
.container-footer .grid-child{padding-right:96px}
.container-footer .fcbk-foerder img{display:block}

/* --- Responsiv --------------------------------------------- */
@media (max-width:991.98px){
  .container-header .container-nav>.mod-menu{display:none}
}
@media (max-width:600px){
  .container-header{min-height:76px}
  .container-header .navbar-brand{padding-left:16px}
  .container-header .brand-logo{font-size:20px;gap:10px}
  .container-header .brand-logo img{height:56px}
  .container-header .container-search{padding:0 12px 0 52px}
  .container-header .container-search::before{clip-path:polygon(36px 0,100% 0,100% 100%,0 100%)}
  .container-banner{padding:0 16px 32px}
  .fcbk-hero img{height:340px}
  .fcbk-hero__title{font-size:32px;padding:12px 20px 14px 14px}
  .fcbk-hero__text .fcbk-tag{font-size:18px}
  .fcbk-band{padding:40px 16px}
  .fcbk-photo-placeholder{height:260px}
}


/* Seitenmenü Reset v2 – einheitliche Einrückung, Hover, keine Striche */
.container-header .fcbk-drawer .mod-menu{display:block !important;margin:0 !important;padding:0 !important;gap:0 !important}
.container-header .fcbk-drawer .mod-menu li{margin:0 !important;padding:0 !important;border:0 !important;list-style:none;position:static !important}
.container-header .fcbk-drawer .mod-menu li::before,.container-header .fcbk-drawer .mod-menu li::after,.container-header .fcbk-drawer .mod-menu a::before,.container-header .fcbk-drawer .mod-menu a::after{content:none !important;display:none !important}
.container-header .fcbk-drawer .mod-menu a,.container-header .fcbk-drawer .mod-menu .nav-header{display:block;margin:0 !important;padding:9px 24px !important;font-family:var(--fcbk-head);font-weight:700;font-size:24px !important;line-height:1.2;color:#fff !important;text-decoration:none;border:0 !important;background:none !important;box-shadow:none !important}
.container-header .fcbk-drawer .mod-menu .nav-header{font-size:15px !important;color:#9a9a9a !important;text-transform:uppercase;letter-spacing:.08em;padding-top:16px !important}
.container-header .fcbk-drawer .mod-menu ul a{font-size:20px !important;font-weight:600;padding:7px 24px 7px 40px !important}
.container-header .fcbk-drawer .mod-menu a:hover,.container-header .fcbk-drawer .mod-menu a:focus,.container-header .fcbk-drawer .mod-menu li.current>a,.container-header .fcbk-drawer .mod-menu li.active>a{color:var(--fcbk-yellow) !important}
.container-header .fcbk-drawer .moduletable{margin:0 !important;padding:0 !important;border:0 !important}
.container-header .fcbk-drawer .moduletable+.moduletable{margin-top:8px !important}

/* Kontaktformular Reihenfolge: Handynummer unter E-Mail */
#contact-form{display:flex;flex-direction:column}
#contact-form fieldset{display:contents}
#contact-form fieldset+fieldset>legend{display:none}
#contact-form .control-group{order:20}
#contact-form .control-group.field-spacer{order:1}
#contact-form .control-group:has(#jform_contact_name){order:2}
#contact-form .control-group:has(#jform_contact_email){order:3}
#contact-form .control-group:has(#jform_com_fields_handynummer){order:4}
#contact-form .control-group:has(#jform_contact_emailmsg){order:5}
#contact-form .control-group:has(#jform_contact_message){order:6}
#contact-form .control-group:has(.form-check){order:7}
#jform_com_fields_handynummer{background:#fff}