:root{
  --blue:#0b5fa5;
  --border:#e6e8ee;
  --text:#111827;
  --muted:#6b7280;
  --bg:#f3f4f6;
}

*{box-sizing:border-box}

/* Base: Desktop/PC als Standard */
body { margin: 0; font-family: system-ui, sans-serif; }
.phone-only { display: none; }
.app { display: block; }

/* Phone: bis 600px -> App ausblenden, Meldung zeigen */
@media (max-width: 600px) {
  .app { display: none; }
  .phone-only { 
    display: grid; 
    place-items: center; 
    min-height: 100vh; 
    padding: 24px;
    text-align: center;
  }
}

/* Tablet: 601–1024px -> Tablet-Layout */
@media (min-width: 601px) and (max-width: 1024px) {
  .card { 
    .lead, p  {font-size: 1em;}
    /* z.B. weniger Spalten, größere Touch-Ziele */
  }
}

/* Desktop: 1025–1919px -> Desktop-Layout */
@media (min-width: 1025px) and (max-width: 1919px) {
  .card {
    h1{
      font-size: 1.8em;
    }
    p.lead, p  {font-size: 1em;}
  }
}

/* SmartTV / sehr große Screens: ab 1920px -> TV-Layout */
@media (min-width: 1920px) {
  body { font-size: 20px; }
  .lead, p  {font-size: 1em;}
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  padding:0px;
  color:var(--text);
}

/* Container */
.card{
  max-width:1250px;
  height: 660px;
  /* margin:auto; */
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* 2 Spalten */
.row{
  display:grid;
  grid-template-columns:1fr 2fr;
  height: 660px;
}

/* ============================= */
/* VORHER – NACHHER LINKSE SPALTE */
/* ============================= */

.before-after{
  position:relative;
  overflow:hidden;
  background:#000;
}

.ba-wrapper{
  position:relative;
  width:100%;
  height:100%;
}

.ba-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  pointer-events:none;
}

.ba-after{
  clip-path: inset(0 50% 0 0);
}

/* Trennlinie */
.ba-divider{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  background: #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
  pointer-events:none;
  /* wichtig: handle darf nicht abgeschnitten werden */
  overflow:visible;
}

.ba-slider {
  -webkit-appearance: none;
  appearance: none;
  width: calc(100% + 30px); 
  margin-left: -15px; 
  background: transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  outline: none;
}

.ba-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  background: var(--blue, #1f6fff);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
}

/* Für Firefox ebenfalls anpassen */
.ba-slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  background: var(--blue, #1f6fff);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
}

.ba-slider::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
}

/* ================= */
/* RECHTE SPALTE     */
/* ================= */

.right{
  padding:28px 32px;
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:22px;
}

/* Header */
.header{
  display:flex;
  gap:16px;
}

.avatar{
  width:100px;
  height:100px;
  overflow:hidden;
  flex-shrink:0;
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

h1{
  margin:0;
  font-size:1.5em;
  line-height:1.05;
}

h1 strong{
  font-weight:800;
}

.lead{
  margin:10px 0 0;
  color:var(--muted);
  line-height:1.3;
  font-size: 0.8em;
}

.fazit{
  margin-top:10px;
  font-weight:700;
}

/* Anforderungen Box */
.box{
  border:1px solid var(--border);
  border-radius:6px;
  padding:16px 18px;
}

.box h2{
  margin:0 0 14px;
  color:var(--blue);
  font-size:0.9em;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.features{
  display:grid;
  gap:14px;
}

.features3x{
  grid-template-columns:repeat(3,1fr);
}

.features4x{
  grid-template-columns:repeat(4,1fr);
}

.feature{
  text-align:center;
  font-size:12px;
  font-weight:600;
}

.feature svg{
  width:34px;
  height:34px;
  margin-bottom:8px;
  color:var(--blue);
}

/* Besonderheiten */
.bottom h3{
  margin:0;
  font-size:18px;
  font-weight:800;
}

.bottom p{
  margin-top:6px;
  font-size: 1em;
  line-height:1.3;
}

/* Button */
.cta{
  margin-top:auto;
  text-align:right;
}

.btn{
  background:var(--blue);
  color:#fff;
  border:0;
  padding:10px 14px;
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow:0 6px 16px rgba(11,95,165,.25);
}

/* Responsive */
@media(max-width:900px){
  .row{grid-template-columns:1fr}
  .features{grid-template-columns:repeat(2,1fr)}
  h1{font-size:28px}
}

.feature--row{  
  display:flex;
  align-items:center;          /* vertikal mittig */
  gap:10px;                    /* Abstand Icon ↔ Text */
  text-align:left;
}

.feature--row svg{
  width:34px;
  height:34px;
  flex-shrink:0;
  color:var(--blue);
}

.feature-text{
  font-size:1.1em;
  font-weight:600;
  line-height:1.3;
  color:#1f2937;
}