html,body{overflow-x:hidden}

.bf-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:clamp(20px,3vw,32px) 0;
  width:100%;
  box-sizing:border-box;
}
.bf-table-wrap table{min-width:560px;width:100%;border-collapse:collapse}

aside.bf-tool{
  background:#f8f9fa;
  border:1px solid #e6ebee;
  border-radius:10px;
  padding:clamp(18px,3vw,28px);
  margin:clamp(28px,3vw,40px) 0;
  width:100%;
  box-sizing:border-box;
}

aside.bf-tool h3{
  margin:0 0 8px;
  font-size:clamp(16px,2.2vw,20px);
  color:#2c3e50;
  line-height:1.3;
}

aside.bf-tool p{
  margin:0 0 16px;
  color:#34495e;
  font-size:clamp(14px,1.8vw,16px);
  line-height:1.5;
}

.bf-tool-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:10px;
}

@media(min-width:480px){
  .bf-tool-form:not(.bf-tool-form-col):not(.bf-tool-grid){
    flex-direction:row;
    align-items:stretch;
  }
}

.bf-tool-form-col{
  flex-direction:column;
}

.bf-tool-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

@media(min-width:480px){
  .bf-tool-grid{
    grid-template-columns:1fr 1fr;
  }
}

.bf-tool-form input[type="text"],
.bf-tool-form input[type="url"],
.bf-tool-form textarea{
  font-size:16px;
  padding:12px 14px;
  border:1px solid #ccd3d8;
  border-radius:6px;
  background:#fff;
  color:#2c3e50;
  width:100%;
  box-sizing:border-box;
  min-height:44px;
  line-height:1.4;
}

.bf-tool-form input[type="color"]{
  width:48px;
  height:48px;
  border:1px solid #ccd3d8;
  border-radius:6px;
  padding:2px;
  cursor:pointer;
  background:#fff;
}

.bf-tool-textarea{
  min-height:120px;
  resize:vertical;
}

.bf-tool-color-label{
  display:flex;
  align-items:center;
  gap:10px;
}

.bf-tool-color-name{
  font-size:13px;
  color:#7f8c8d;
  min-width:80px;
}

.bf-tool-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:44px;
  padding:12px 20px;
  background:#376e78;
  color:#fff;
  border:none;
  border-radius:6px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  text-decoration:none;
}

.bf-tool-btn:hover{
  background:#2c5961;
}

.bf-tool-hint{
  display:block;
  font-size:12px;
  color:#7f8c8d;
  margin-top:4px;
  line-height:1.4;
}

.bf-tool-result{
  margin-top:12px;
  font-size:clamp(13px,1.6vw,15px);
  color:#2c3e50;
  line-height:1.5;
}

.bf-tool-result.bf-ok{
  color:#2c3e50;
}

.bf-tool-result.bf-warn{
  color:#2c3e50;
}

.bf-tool-verdict{
  padding:14px 16px;
  border-radius:8px;
  background:#f5f7fa;
  border-left:4px solid #376e78;
  margin-bottom:12px;
}

.bf-tool-verdict-head{
  display:block;
  margin-bottom:6px;
}

.bf-tool-rows{
  list-style:none;
  margin:0 0 10px;
  padding:0;
}

.bf-tool-row{
  margin:4px 0;
  display:flex;
  gap:10px;
  align-items:baseline;
}

.bf-tool-icon{
  font-weight:700;
  min-width:14px;
  flex-shrink:0;
}

.bf-icon-ok{color:#1d7a00}
.bf-icon-warn{color:#b86f00}
.bf-icon-fail{color:#cc3744}

.bf-tool-remaining{
  font-size:13px;
  color:#7f8c8d;
  margin-top:8px;
}

.bf-tool-color-preview{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.bf-tool-swatch{
  width:120px;
  height:60px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:15px;
  flex-shrink:0;
}

.bf-tool-contrast-info{
  font-size:clamp(13px,1.6vw,15px);
  line-height:1.5;
}

.bf-tool-serp-preview{
  background:#fff;
  border:1px solid #e6ebee;
  border-radius:8px;
  padding:14px;
  margin-bottom:10px;
}

.bf-tool-serp-title{
  color:#1a0dab;
  font-size:clamp(16px,2vw,18px);
  line-height:1.3;
  margin-bottom:2px;
}

.bf-tool-serp-url{
  color:#006621;
  font-size:13px;
  margin:2px 0;
}

.bf-tool-serp-desc{
  color:#545454;
  font-size:clamp(13px,1.5vw,13.5px);
  line-height:1.5;
}

.bf-tool-code{
  background:#f0f4f5;
  padding:2px 8px;
  border-radius:4px;
  font-size:14px;
  font-family:monospace;
}

.bf-tool-pre{
  white-space:pre-wrap;
  font-family:monospace;
  font-size:13px;
  margin:10px 0;
  max-height:220px;
  overflow:auto;
  background:#f8f9fa;
  padding:12px;
  border-radius:8px;
  line-height:1.4;
}

.bf-tool-headings-list{
  margin:0;
  padding-left:20px;
}

.bf-tool-heading-item{
  margin:4px 0;
}

.bf-tool-favicon-row{
  display:flex;
  align-items:center;
  gap:14px;
}

.bf-tool-favicon-img{
  border-radius:6px;
  background:#fff;
  border:1px solid #e6ebee;
  display:block;
}

.bf-tool-error{
  padding:12px 16px;
  background:#fff5f5;
  border-left:4px solid #cc3744;
  border-radius:6px;
  font-size:14px;
  color:#2c3e50;
}

.bf-fewo{
  margin-bottom:0;
}

.bf-fewo-subtitle{
  margin:0 0 20px;
  color:#34495e;
  line-height:1.5;
  font-weight:400;
}

.bf-fewo-form{
  margin-bottom:20px;
}

.bf-fewo-slider-row{
  display:flex;
  flex-direction:column;
  gap:20px;
}

@media(min-width:480px){
  .bf-fewo-slider-row{
    flex-direction:row;
    gap:16px;
  }
}

.bf-fewo-slider-field{
  display:flex;
  flex-direction:column;
  flex:1;
}

.bf-fewo-slider-label{
  display:block;
  font-weight:600;
  color:#2c3e50;
  line-height:1.3;
  margin-bottom:10px;
}

.bf-fewo-slider-track{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:10px 0;
}

.bf-fewo-slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:4px;
  border-radius:2px;
  background:#e6ebee;
  outline:none;
  font-size:16px;
  cursor:pointer;
  pointer-events:auto;
  position:relative;
  z-index:2;
}

.bf-fewo-form,.bf-fewo{
  pointer-events:auto;
  position:relative;
  z-index:1;
}

.bf-fewo-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#376e78;
  cursor:grab;
  border:2px solid #ffffff;
  box-shadow:0 0 0 1px #ecf0f1;
  pointer-events:auto;
  margin-top:-7px;
}

.bf-fewo-slider::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#376e78;
  cursor:grab;
  border:2px solid #ffffff;
  box-shadow:0 0 0 1px #ecf0f1;
  pointer-events:auto;
}

.bf-fewo-slider:focus::-webkit-slider-thumb{
  background:#2c5961;
  outline:2px solid #2c5961;
  outline-offset:2px;
}

.bf-fewo-slider:focus::-moz-range-thumb{
  background:#2c5961;
  outline:2px solid #2c5961;
  outline-offset:2px;
}

.bf-fewo-slider:active::-webkit-slider-thumb{
  cursor:grabbing;
}

.bf-fewo-slider::-webkit-slider-runnable-track{
  height:4px;
  border-radius:2px;
  background:#ecf0f1;
}

.bf-fewo-slider::-moz-range-track{
  height:4px;
  border-radius:2px;
  background:#ecf0f1;
}

.bf-fewo-slider-vals{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
}

.bf-fewo-range-min,
.bf-fewo-range-max{
  font-size:12px;
  color:#7f8c8d;
}

.bf-fewo-output{
  font-size:14px;
  font-weight:700;
  color:#2c5961;
  font-variant-numeric:tabular-nums;
  text-align:center;
}

.bf-fewo-result{
  padding:20px 22px;
  background:#fff;
  border:1px solid #e6ebee;
  border-radius:10px;
}

.bf-fewo-hero{
  text-align:center;
  padding-bottom:18px;
  border-bottom:1px solid #ecf0f1;
  margin-bottom:16px;
}

.bf-fewo-hero-value{
  display:inline;
  font-size:clamp(2rem,7vw,2.8rem);
  font-weight:700;
  color:#2c5961;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}

.bf-fewo-hero-unit{
  font-size:1rem;
  color:#5a6b7a;
  line-height:1.3;
}

.bf-fewo-hero-label{
  margin-top:6px;
  color:#5a6b7a;
  line-height:1.4;
}

.bf-fewo-scenarios{
  list-style:none;
  padding:0;
  margin:0 0 14px;
}

.bf-fewo-scenario-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  border-radius:6px;
  line-height:1.4;
  margin-bottom:4px;
}

.bf-fewo-scenario-row.bf-active{
  background:#e8f0f2;
  border-left:3px solid #376e78;
}

.bf-fewo-scenario-val{
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  color:#2c5961;
}

.bf-fewo-basis{
  color:#5a6b7a;
  line-height:1.4;
  margin-bottom:12px;
  padding-top:12px;
  border-top:1px solid #ecf0f1;
}

.bf-fewo-note{
  color:#5a6b7a;
  line-height:1.5;
  margin:0;
}

@media(min-width:768px){
  aside.bf-tool{
    padding:28px 32px;
  }

  .bf-tool-form:not(.bf-tool-form-col):not(.bf-tool-grid){
    flex-direction:row;
  }

  .bf-tool-form input[type="text"],
  .bf-tool-form input[type="url"]{
    flex:1;
  }

}

@media(min-width:1024px){
  aside.bf-tool{
    max-width:720px;
  }
}

@media(min-width:1280px){
  aside.bf-tool h3{
    font-size:20px;
  }

  aside.bf-tool p{
    font-size:16px;
  }
}

.bf-referenzen{
  margin-top:clamp(36px,4vw,56px);
  margin-bottom:clamp(28px,3vw,40px);
}

.bf-ref-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  margin-top:24px;
}

.bf-ref-card{
  background:#f8f9fa;
  border:1px solid #e6ebee;
  border-radius:8px;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.bf-ref-card img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:16/10;
  object-fit:cover;
}

.bf-ref-card h3{
  font-weight:700;
  margin:16px 20px 8px;
  color:inherit;
}

.bf-ref-card p{
  margin:0 20px 16px;
  line-height:1.5;
  flex:1;
}

.bf-ref-card a{
  display:inline-block;
  margin:0 20px 20px;
  padding:10px 16px;
  background:#376e78;
  color:#fff;
  font-weight:700;
  border-radius:4px;
  text-decoration:none;
  align-self:flex-start;
  min-height:44px;
  line-height:1.3;
  box-sizing:border-box;
}

.bf-ref-card a:hover{
  background:#2c5961;
}

.bf-ref-card a:focus-visible{
  outline:2px solid #376e78;
  outline-offset:2px;
}

@media(min-width:768px){
  .bf-ref-grid{
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
}

@media(min-width:1024px){
  .bf-ref-grid{
    grid-template-columns:1fr 1fr 1fr;
    gap:32px;
  }
}