:root { 
    --font-scale: 1; 
    
    /* warmer Amber-Ton; passe Hue/Sat/Light und Opazität bei Bedarf an */
  --bf-hue: 50;           /* 0..360   ? 38 ˜ warmes Orange */
  --bf-sat: 90%;          /* 0..100%  ? Sättigung */
  --bf-light: 80%;        /* 0..100%  ? Helligkeit */
  --bf-opacity: 0.18;     /* 0..1     ? Intensität der Tönung */    
}

/* Basis – alles auf rem aufbauen */
html { font-size: calc(100% * var(--font-scale)); }

    
body{

    font-weight: 100;
    
}

h1, h2, h3, h4, h5, h6{

    color: #5c96d9;
    
    text-transform: uppercase;
  
}






.sppb-row {
    justify-content: center;
}






#sp-top-1-2{

    padding: 20px 0 0 0;

    color: #fff;

}
#sp-top-1-2 span, #sp-top-1-2 a{
    position: relative;
    z-index: 2;
    
    color: #fff;

    cursor: pointer;
}
#sp-top-1-2 #sp-top-1{

}     
#sp-top-1-2 #sp-top2{

    text-align: right;
    
}
#sp-top-1-2 #sp-top2 .sp-column{
	display: flex;
	justify-content: flex-end;
	align-items: center;
} 
#sp-top-1-2 #sp-top2 #offcanvas-toggler{
    display: inline-block !important;
    height: auto;
    line-height: 1rem;
    color: #fff;
    font-size: 1rem;
}
#sp-top-1-2 #sp-top2 #offcanvas-toggler i{
    color: #fff;
}


#headerStartseite{    

    margin: -45px 0 0 0;
    
    background: #1784d6;
    background: url(/images/headers/Solaranlagenreinigung-01.jpg);
    background-repeat: no-repeat;
    background-size: cover;

    color: #fff;

}
#headerStartseite .sppb-container-inner{
  
    max-width: 1140px;

    margin: auto;
    
}
#headerStartseite .columOption{

    min-height: 600px;

    padding: 0 0 0 200px;
    
}

#headerUnterseiten{

    margin: -45px 0 0 0;
    
    background: #1784d6;
    background: url(/images/headers/Solaranlagenreinigung-01.jpg);
    background-repeat: no-repeat;
    background-size: cover;

    color: #fff;


}
#headerUnterseiten .sppb-container-inner{
  
    max-width: 1140px;

    margin: auto;
    
}
#headerUnterseiten .columOption{

    min-height: 300px;

    padding: 0 0 0 0;
    
}


@media screen AND ( max-width: 1000px ){

    #sp-top-1-2 #sp-top2 #offcanvas-toggler {
        font-size: 1.75rem;
        padding: 0 24px 0 0;
    }       
    #sp-top2{ 
        margin: 0 0 -60px 0px;
        padding: 0 0 0 0;
            
    }
    #sp-top2 .sp-contact-info{
        display: none;
        flex-wrap: wrap;
    }
    #sp-top2 .sp-contact-info li{
        width: 50%;
        
        margin: 0px 0px 10px 0px;
        
        padding: 5px 15px;
        
        text-align: left;
    }
    #headerStartseite .columOption{
        min-height: 400px;
        padding: 0 0 0 0px;  
    }
    #headerStartseite .columOption .sppb-addon-content{
        text-align: center;   
    }  
    #headerUnterseiten .sppb-addon-content{
        text-align: center;    
    }   
    
}


body.ltr.offcanvs-position-right .offcanvas-menu{
    right: -350px;
}          
.offcanvas-menu{
    width: 310px;
    
    background: transparent;
} 
.offcanvas-menu .offcanvas-inner {
    padding: 0;
}
.offcanvas-menu .offcanvas-inner ul.menu>li a, 
.offcanvas-menu .offcanvas-inner ul.menu>li span {
    color: #ffffff;
    opacity: 1 !important;
}
.offcanvas-menu .offcanvas-inner ul.menu>li a:hover, 
.offcanvas-menu .offcanvas-inner ul.menu>li a:focus, 
.offcanvas-menu .offcanvas-inner ul.menu>li span:hover, 
.offcanvas-menu .offcanvas-inner ul.menu>li span:focus {
    color: #8d9db9;
}
.offcanvas-menu .offcanvas-inner ul.menu>li li a {
    color: #ffffff;
}
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler, 
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.menu-separator>.menu-toggler {
    color: #ffffff;
}
.offcanvas-menu ul > li > .menu-child > li{
    margin-bottom: 15px;
}

.close-offcanvas, .close-offcanvas:hover, .close-offcanvas:focus, .close-offcanvas:active {
    color: #ffffff;
}
.offcanvas-active .burger-icon > span, 
#modal-menu-toggler.active .burger-icon>span {
    background-color: #ffffff;
}




main{


    
}

.float-start {
    padding: 0 7px 0 0;
    color: #238ad7;
}

.sppb-addon-feature .sppb-feature-box-title,
.sppb-addon-feature .sppb-media-content{

	background-color: #f0f0f0;

}
.sppb-addon-feature .sppb-feature-box-title,
.sppb-addon-feature .sppb-addon-title{

	padding: 10px 15px;
	
	color: #1784d6;

}
.sppb-addon-feature .sppb-media-content{

	padding: 10px 15px;

}


#sp-bottom4 .social-icons {
    font-size: 3rem;
}




/* Startseite */             
#homeRow1{

    background-color: #fff;
    
    box-shadow: 0px -15px 10px rgba(0,0,0,0.25);
    
}
             
#homeRow1 .sppb-row{

    justify-content: center;
    
    align-items: end;
    
}    
#homeRow1 .sppb-row .sppb-col-md-9{
 
    margin: 25px -100px 0 -45px;
    padding: 0px 174px 30px 0px;
    
    _background: #fff;
    
    color: #505050;
    
    _box-shadow: 0px 0px 5px rgba(0,0,0,0.10);
    
} 
#homeRow1 .sppb-row .sppb-col-md-3{

    padding: 0px 0px 0px 0px;
    margin: -230px 0 0 0;
    
    background: #fff;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 37%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0.5)), color-stop(37%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 37%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 37%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 37%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 37%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );

    box-shadow: 0px 0px 6px rgba(0,0,0,0.10);

}
@media screen AND ( max-width: 1000px ){

    #homeRow1 .sppb-row .sppb-col-md-9 {
        margin: 0px 0px 0px 0px;
        padding: 0px 15px 30px 15px;
    }
     
     
}
@media only screen and (max-width: 992px) {
    #homeRow1 .sppb-row .sppb-col-md-3{

      margin: 0 0 0 0;
      
    }
}


#homeRow1 .sppb-col-md-3 #sppb-addon-1616056325387{

    padding: 20px 20px 20px 20px;
    
    list-style: none;


}
#homeRow1 .sppb-col-md-3 #sppb-addon-1616056325387 ul{

    margin: 0 0 0 0;
    
    list-style: none;

}
#homeRow1 .sppb-col-md-3 #sppb-addon-1616056325387 ul li{

    margin: 1px -22px 2px -43px;
    padding: 5px 0 5px 15px;   

    font-weight: 100;
}
#homeRow1 .sppb-col-md-3 #sppb-addon-1616056325387 ul li a{

    display: flex;
    
    align-items: baseline;
    
}
#homeRow1 .sppb-col-md-3 #sppb-addon-1616056325387 ul li a:before {

    padding: 0 15px 0 0;

    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
    
    content: "\f061";
}
#homeRow1 .sppb-col-md-3 #sppb-addon-1616056325401{

    background-color: #1065c7;
    color: #fff;
    margin: 0 0 0 0;
    text-align: center;
    text-transform: uppercase;
    padding: 15px 0 1px 0;
    
}
#homeRow1 .sppb-col-md-3 #sppb-addon-1616056325401 a{

    color: #fff;
}


#homeRow2{

    position: relative;
    z-index: 2 !important;
    
    margin: -10px 0 -100px 0;
    
    background: #fff;
    background-image: url(../images/layout/bg-f0f0f0.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 50%;
    
    
}
#homeRow2 .sppb-row{

    justify-content: center;
    
}

#homeRow2 .sppb-row > div{
         
     margin: 0 0 0 0;   

     padding: 15px;

     background: #f5f5f5;
    
}



/* Angebot */
#sp-bottom-1{

    padding: 50px 0 100px 0;

}
.bt-angebot {
    text-align: center;
    
    padding: 50px 0 40px 0;
    
    background-color: #1065c7;
    
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;

    text-transform: uppercase;        
}
.bt-angebot a{
	color: #ffffff;
}

.kontaktAufnehmen {
    text-align: center;
    
    padding: 50px 0 40px 0;
    
    border: solid 2px #1065c7;
    
    font-size: 1.5rem;
    font-weight: 400;
    color: #1065c7;

    text-transform: uppercase;    
    
}




/* Kontaktformular Bottom 2 */
#sp-bottom-2, #kontaktforumlar{

    padding: 150px 0 150px 0;

    background-color: #f0f0f0;
  
}



/* Flecken-Tipps Bottom 3 */
#sp-bottom-3{
    background: #f0f0f0;
}
#sp-bottom-3 > .container{ 
    position: relative;
    
    margin-bottom: -60px;
    
    border: solid 10px #e8e8e8;  
    background: #d9d9d9;
}
#sp-bottom-3 > .container .sp-module-title{
    padding: 8px 0 8px 0;
    border-bottom: solid thin #e8e8e8;
}

/* Footer & Bottom 4 */
footer, #sp-footer, #sp-bottom-4{
    color: #fff;
    
    background-color: #175482;
}
#sp-footer a, #sp-bottom-4 a {
    color: #fafafa;
}
#sp-bottom-4{
    padding: 50px 0 0 0;
}









textarea{
    display: block;
    width: 100%;
    min-height: 147px;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.25;
    color: #495057;
    background-color: #fff;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0.25rem;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}



/* Leistungen */
.leistungen > div > div > div{
    margin: 0 0 20px 0;
}
.leistungen .item{
    padding: 50px 25px;
        
    background: #f0f0f0;
}  
.leistungen .item div{
    display: flex;
    
    align-items: center;
    justify-content: center;
    
    text-align: center;
}
.leistungen .item p{
    margin: 0;
} 

.leistungen .item a{
    _font: normal normal normal 14px/1 FontAwesome;
}
.leistungen .item a:before {
    padding: 0 15px 0 0;
    
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
    
    content: "\f061";
}


/* Buttons */
ul.bt-li{
    margin: 0;
    padding: 0;
    
    list-style: none;
}
ul.bt-li-h{
    display: flex;
    
    justify-content: space-between;
}
ul.bt-li li{
    text-align: center;
    
    width: 49%;
}
ul.bt-li li a{
    display: block;
    
    padding: 10px 0;
    
    text-transform: uppercase;
}
         
ul.bt-li li a:before {

    padding: 0 15px 0 0;

    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
    
    content: "\f061";
}

ul.bt-li-blue li{
    color: #fff;
  
    background-color: #5c96d9;
}
ul.bt-li-blue li a{
    color: #fff;

}
@media screen AND ( max-width: 1000px ){

    ul.bt-li-h{
        flex-wrap: wrap;
    }
    ul.bt-li li{
        width: 100%;
        margin-bottom: 15px;
    }
     
}





/* hikelCOM Form ************************************************************* */
#hikelCOM_Form{
    padding: 25px 0 0 0;

    _background: #f6f6f6;

    _border: 1px solid #336699;

    color: #7a8188;
}

#hikelCOM_Form .sec{
    display: none;
    
    border: solid thin #5c96d9;
    
    margin: 0 0 25px 0;
    padding: 10px;
}

#hikelCOM_Form .sec-1{

    display: block;

}

#hikelCOM_Form button.next{  
    width: 100%;
    
    padding: 5px 0;
    
    border: none;
    
    background: #5c96d9;

    color: #fff;
    
    cursor: pointer;
}

#hikelCOM_Form fieldset{

    margin: 0 0 25px 0;

    _padding: 20px 30px 20px 30px;

    _border: solid 6px #2469b3;
    border: none;
}

#hikelCOM_Form fieldset img{
	
    box-sizing: border-box;
    
	margin: auto;

    background: #fff;
}

#hikelCOM_Form legend{

    display: block;

    width: 100%;

    margin: 0 0 0 -13px;

    padding: 6px 15px;

    border: none;

    font-size: 16px;
    
    font-weight:bolder;
    
    color: #D2051F;


}

#hikelCOM_Form label{

    cursor: pointer;

}

#hikelCOM_Form label .chk-img{

    display: none;

}

#hikelCOM_Form label{
    display: inline-block;
    
	text-align: center;
	vertical-align: top;
	
    width: 48.4%;
		
    margin-bottom: 30px;
}
#hikelCOM_Form label.w-100{
	width: 100%;
}
#hikelCOM_Form .sec-3 label{
	width: 30.30%
}
#hikelCOM_Form .sec-4 label{
	width: 30.30%
}
#hikelCOM_Form .sec-5 label,
#hikelCOM_Form .sec-5 label span{
	display: inline-block;
	
	text-align: left;
	
	width: 100%
}

@media (max-width: 632px){

  #hikelCOM_Form .sec label {
      width: 100% !important;
  }
  
}


#hikelCOM_Form select {
    
    height: 34px;
    
    padding: 6px 12px;
    
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
    linear-gradient(45deg, transparent 50%, #ffffff 50%),
    linear-gradient(135deg, #ffffff 50%, transparent 50%),
    linear-gradient(to right, #336699, #336699);
    background-position:
    calc(101% - 20px) calc(1em - 2px), calc(101% - 10px) calc(1em - 2px), 100% 0;
    background-size:
    10px 10px,
    10px 10px,
    2.5em 2.5em;
    background-repeat: no-repeat;
    cursor: pointer;
}

#hikelCOM_Form select,
#hikelCOM_Form input[type="text"],
#hikelCOM_Form input[type="password"],
#hikelCOM_Form input[type="datetime"],
#hikelCOM_Form input[type="datetime-local"],
#hikelCOM_Form input[type="date"],
#hikelCOM_Form input[type="month"],
#hikelCOM_Form input[type="time"],
#hikelCOM_Form input[type="week"],
#hikelCOM_Form input[type="number"],
#hikelCOM_Form input[type="email"],
#hikelCOM_Form input[type="url"],
#hikelCOM_Form input[type="search"],
#hikelCOM_Form input[type="tel"],
#hikelCOM_Form input[type="color"]{

    display: inline-block;

    width: 100%;

}

#hikelCOM_Form .msg, #hikelCOM_Form .msg_err{

    display: none;

    margin: 0 0 15px 0;

    padding: 10px;

    text-align: center;

    color: #ffffff;

    background: lightsalmon;

    font-size: 16px;

}
#hikelCOM_Form .msg_err{
    display: block;
    
    margin: 0 0 15px 0;

    padding: 10px;

    text-align: center;

    color: #ffffff;

    background: lightsalmon;

    font-size: 16px;
    
}

#hikelCOM_Form .msg_ok{
    display: block;
    
    margin: 0 0 15px 0;

    padding: 10px;

    text-align: center;

    color: #ffffff;

    background: lightgreen;

    font-size: 16px;
    
}

#hikelCOM_Form .border{
    display: inline-block;
}

#hikelCOM_Form .radio-group fieldset input[type="radio"],
#hikelCOM_Form .radio-group fieldset input[type="checkbox"]{
    position: absolute;

    z-index: -1;

    left: -2000px;

    visibility: hidden;

}

#hikelCOM_Form .radio-group fieldset span{
    box-sizing: border-box;
    
    display: block;

    width: 100%;

    margin: 0 0 0 0;

    padding: 5px;

    text-align: center;

    background: #d6e4f5;

    color: #307acf;
}

#hikelCOM_Form .radio-group fieldset label{
    margin-right: 30px;
}
#hikelCOM_Form .radio-group fieldset label:nth-last-child(1){
    margin-right: 0px;
}

#hikelCOM_Form .table{
    display: table
}
#hikelCOM_Form .table > p{
    display: table-row;

    transition: background 0.5s, color 0.5s;
}

#hikelCOM_Form .table > p:nth-child(2n+1){
    _background: #faf9f7;

}
#hikelCOM_Form .table > p:nth-child(2n+2){
    background: #d6e4f5;

}
#hikelCOM_Form .table > p > span{
    display: table-cell;

    padding: 10px 5px;
}
#hikelCOM_Form .table > p > span .block{
    display: block;
}

#hikelCOM_Form .table > p:hover{
    background: #5c96d9;
    color: #ffffff;
}
#hikelCOM_Form .table > p:hover > span button{
    _color: #fff;
    _background: #D2051F;
}


@media (max-width: 632px){

    #hikelCOM_Form .table,
    #hikelCOM_Form .table > p,
    #hikelCOM_Form .table > p > span{
        display: block;
    }

}



.schnell_kontakt .flex{
  display: flex;
  
  margin: 0 -15px;
}
.schnell_kontakt .flex > div{
  width: 100%;
  
  padding: 0 15px;
}
.schnell_kontakt .flex > div.left,
.schnell_kontakt .flex > div.right{
  display: flex;
  flex-wrap: wrap;
}
.schnell_kontakt .flex > div.left div{
  width: 100%;
}
.schnell_kontakt .flex > div.left div.name{
  align-self: baseline;
}
.schnell_kontakt .flex > div.left div.tel{
  align-self: center;
}
.schnell_kontakt .flex > div.left div.email{
  align-self: flex-end;
}

.schnell_kontakt .flex > div.right textarea{
  align-self: stretch;
}

.schnell_kontakt button{
  width: 100%;
  
  padding: 5px;
  
  border: none;
  
  background: #1065c7;
  
  color: #fff;
}


.schnell_kontakt2 .outer > div,
.schnell_kontakt2 .outer > fieldset,
.schnell_kontakt2 .outer > fieldset > div{
    margin-bottom: 15px;
}


/*Progressbar*/
.graph {
    width: auto; 
    height: 18px;
    border: 1px solid #ffffff;
    background: #fff;
    position: relative;
    margin: 0 0 25px 0;
}
.bar {
    height: 18px; 
    background: #74ba4c;
}
.bar p {
    position: absolute;
    text-align: center;
    width: 100%;
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: #336699;
}
.bar p .left{
    float: left;
    padding: 0 0 0 4px;
}
.bar p .right{
    float: right;
    padding: 0 4px 0 0;
}
/*Ende Progressbar*/


/* ENDE: hikelCOM Form ******************************************************* */




/* Trigger im Header */
.a11y-trigger{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:40px; block-size:40px; border:1px solid #ccc; border-radius:.5rem;
  background:#fff; cursor:pointer;
}
.a11y-trigger:focus-visible{ outline:2px solid Highlight; outline-offset:2px; }

/* Dialog-Grundlayout */
#a11y-menu{
  border:none; padding:0; background:transparent;
}
#a11y-menu::backdrop{ background: rgba(0,0,0,.25); }

/* Card im Dialog (oben rechts „angedockt“) */
.a11y-menu{
  position: fixed; top: 64px; right: 16px; /* passt bei euch ggf. an Headerhöhe an */
  background:#fff; color:#111; min-inline-size: 320px; max-inline-size: 360px;
  border:1px solid #e5e5e5; border-radius: .75rem; box-shadow: 0 10px 30px rgba(0,0,0,.15);
  padding: .75rem;
}
.a11y-menu__head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem;
}
.a11y-close{
  inline-size:32px; block-size:32px; border:1px solid #ddd; border-radius:.5rem; background:#fff; cursor:pointer;
}
.a11y-close:focus-visible{ outline:2px solid Highlight; outline-offset:2px; }

.a11y-menu__grid{
  display:grid; grid-template-columns: 1fr; gap:.5rem;
}

/* Buttons im Popup – identisch zu euren anderen */
.a11y-btn{
  display:flex; 
  align-items:center; 
  gap:.5rem;
  min-block-size:44px; 
  border:border: solid thin #4370a2;; 
  border-radius:.5rem; 
  background:#fff; 
  cursor:pointer;
  padding:.5rem .75rem; 
  justify-content:flex-start;
}
.a11y-btn:focus-visible{ outline:2px solid Highlight; outline-offset:2px; }
.a11y-btn[aria-pressed="true"]{ border-color:#888; }

.a11y-btn__text{ flex:1; }
.a11y-badge{
  font-size:.75rem; padding:.125rem .375rem; border-radius:.5rem; border:1px solid #ddd; background:#f7f7f7;
}



/* Kleine Screens: zentrieren */
@media (max-width: 480px){
  .a11y-menu{ inset: auto 16px 16px 16px; top:auto; right:auto; }
}


.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: #000;
  color: #fff;
  z-index: 1000;
}




/* Filter ******************************************************************** */

/* Kontrast */
body.kontrast{
    filter: grayscale(100%);
}
/* sanfter globaler Blau-Entzug (wirkt auf alles) */
body.blaufilter {
  filter: sepia(.18) hue-rotate(-10deg) saturate(.95) brightness(1.01);
  transition: filter .25s ease;
}

/* Overlay, das selbst reines Weiß wärmt */
body.blaufilter::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;                /* klicks gehen durch */
  z-index: 2147483647;                 /* ganz oben */
  background: hsl(var(--bf-hue) var(--bf-sat) var(--bf-light) / var(--bf-opacity));
  mix-blend-mode: multiply;            /* färbt Weiß schön warm */
  /* kein transition hier nötig */
}

/* Bei aktivem High-Contrast etwas milder tönen, damit Kontraste erhalten bleiben */
body.kontrast.blaufilter {
  filter: sepia(.12) hue-rotate(-8deg) saturate(.98) brightness(1.0);
}
body.kontrast.blaufilter::before {
  background: hsl(var(--bf-hue) var(--bf-sat) var(--bf-light) / 0.12);
}

/* Fallback wenn multiply nicht unterstützt wird (selten) */
@supports not (mix-blend-mode: multiply) {
  body.blaufilter::before { mix-blend-mode: normal; opacity: .08; }
}


.visually-hidden {
  position: absolute !important; inline-size:1px; block-size:1px; overflow:hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; clip-path: inset(50%);
}





/* Visually hidden but screenreader-accessible */
    .sr-only {{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }}

    /* Ensure clear visible focus */
    :focus {{ outline: none; }}
    :focus-visible {{ outline: 3px solid; outline-offset: 2px; }}

    /* Click targets large enough */
    button, input[type="radio"], input[type="checkbox"], label, select {{
      min-height: 44px;
    }}

    /* Hide sections when JS is active (we toggle with [hidden]) */
    .sec[hidden] {{ display: none !important; }}

    /* Error styles placeholder */
    .error-summary {{ border: 2px solid; padding: 1rem; margin: 1rem 0; }}
    .msg[role="alert"], .msg[role="status"] {{ margin-top: .5rem; }}

    /* Progress text */
    #sr-progress {{ margin: .5rem 0; }}
    .skip-link {{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }}
    .skip-link:focus {{ position: static; width: auto; height: auto; }}