/* =========================================================================
   360web — Lösungsraster
   Eigenständige Komponente. Alle Farben und Maße liegen als Variablen auf
   .loesung selbst, damit nichts mit dem übrigen Stylesheet kollidiert.
   Zum Umfärben genügt es, die Variablen im ersten Block zu überschreiben.
   ========================================================================= */

.loesung{
  --lr-brand:     #1a4bf0;
  --lr-dark:      #06233f;
  --lr-text:      #072034;
  --lr-text-2:    #2c3e51;
  --lr-off:       #9aa5b2;
  --lr-muted:     #8593a3;
  --lr-on-dark:   #c2d2e2;
  --lr-on-dark-2: #8fa6bc;
  --lr-accent:    #7fb0ff;
  --lr-line:      rgba(6,35,63,.13);
  --lr-line-soft: rgba(6,35,63,.06);
  --lr-fuss-bg:   #fbfcfe;
  --lr-radius:    10px;
  --lr-radius-xs:  4px;
  --lr-shadow:    0 40px 80px -50px rgba(7,32,52,.7);
  --lr-display: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --lr-body:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  width:min(100%,560px);
  background:#fff;
  border:1px solid var(--lr-line);
  border-radius:var(--lr-radius);
  overflow:hidden;
  box-shadow:var(--lr-shadow);
  font-family:var(--lr-body);
  color:var(--lr-text);
  font-size:16px;
  line-height:1.55;
  text-align:left;
  -webkit-font-smoothing:antialiased;
}
.loesung *{box-sizing:border-box}

.lr-kopf{background:var(--lr-dark);color:#fff;padding:18px 20px 20px}
.lr-meta{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:11px}
.lr-marke{font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--lr-accent)}
.lr-zaehler{font-size:12.5px;color:var(--lr-on-dark-2);font-variant-numeric:tabular-nums}
.lr-zaehler i{font-style:normal;font-weight:700;color:#fff}
.lr-frage{display:block;margin:0;font-family:var(--lr-display);font-weight:700;font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.2;letter-spacing:-.03em}
.lr-antwort{display:block;margin-top:7px;font-size:13.5px;line-height:1.5;color:var(--lr-on-dark);min-height:40px}
.lr-frage,.lr-antwort{transition:opacity .2s ease,transform .2s ease}
.loesung.wechsel .lr-frage,.loesung.wechsel .lr-antwort{opacity:0;transform:translateY(4px)}

.lr-feld{padding:6px 20px 12px}
.lr-band{display:grid;grid-template-columns:104px minmax(0,1fr);gap:6px 14px;align-items:start;padding:12px 0}
.lr-band + .lr-band{border-top:1px solid var(--lr-line-soft)}
.lr-label{font-size:12px;font-weight:600;color:var(--lr-muted);padding-top:6px}
.lr-chips{display:flex;flex-wrap:wrap;gap:6px}
.lr-chip{border:1px solid var(--lr-line-soft);border-radius:var(--lr-radius-xs);background:#fff;padding:6px 10px;font-size:12.5px;font-weight:500;color:var(--lr-off);white-space:nowrap;cursor:default;transition:background .4s ease,border-color .4s ease,color .4s ease,transform .4s ease,box-shadow .4s ease}
.lr-chip:hover,.lr-chip:focus-visible{border-color:var(--lr-dark);color:var(--lr-text)}
.lr-chip:focus-visible{outline:2px solid var(--lr-brand);outline-offset:2px}
.lr-chip.an{background:var(--lr-brand);border-color:var(--lr-brand);color:#fff;transform:translateY(-1px);box-shadow:0 8px 18px -12px rgba(26,75,240,.95)}

.lr-fuss{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 20px;border-top:1px solid var(--lr-line);background:var(--lr-fuss-bg)}
.lr-punkte{display:flex;gap:6px}
.lr-punkt{width:22px;height:6px;border:0;border-radius:3px;background:#d5dde6;padding:0;cursor:pointer;transition:background .3s ease,width .3s ease}
.lr-punkt:hover{background:#a9b6c4}
.lr-punkt:focus-visible{outline:2px solid var(--lr-brand);outline-offset:3px}
.lr-punkt.an{background:var(--lr-brand);width:30px}
.lr-hinweis{font-size:12.5px;color:var(--lr-muted)}
.lr-hinweis b{color:var(--lr-text);font-weight:700}

@media (max-width:620px){
  .lr-feld{padding:2px 16px 8px}
  .lr-band{grid-template-columns:1fr;gap:7px;padding:11px 0}
  .lr-label{padding-top:0;font-size:11.5px;letter-spacing:.04em}
  .lr-chips{gap:5px}
  .lr-chip{font-size:11.5px;padding:5px 9px;white-space:normal}
  .lr-kopf{padding:16px}
  .lr-fuss{padding:12px 16px}
  .lr-hinweis{display:none}
}
@media (prefers-reduced-motion:reduce){.lr-chip,.lr-frage,.lr-antwort,.lr-punkt{transition:none}}

/* ================================================= Homepage layout correction */
.hero{padding:clamp(54px,5.5vw,78px) 0 clamp(62px,6.5vw,90px)}
.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);gap:clamp(42px,5.2vw,72px);align-items:start}
.hero-copy{padding-top:8px}
.hero .eyebrow{margin-bottom:16px}
.hero h1{font-size:clamp(2.3rem,4.9vw,4.6rem);max-width:760px}
.hero h1 + .lead{margin-top:22px;margin-bottom:0}
.hero-actions{margin:26px 0 0}
.hero .trust-grid{margin-top:18px}
.hero-visual{min-height:0;padding-top:18px;align-self:start}
.hero .loesung{width:min(100%,540px)}

.section{padding:clamp(68px,7vw,96px) 0}
.section-head{margin-bottom:clamp(30px,3.5vw,42px)}
.section-head .eyebrow{margin-bottom:14px}
.section-head h2 + p{margin-top:18px}
.section-head p:last-child{margin-bottom:0}
.card h3 + p,.step h3 + p,.signal-card h3 + p{margin-top:10px}

/* Extended services: wide service rows plus a coherent four-part system visual */
.digital-lab .signal-grid{grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);gap:clamp(42px,5vw,74px);align-items:start}
.digital-lab .service-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.digital-lab .signal-cards{grid-template-columns:1fr;gap:10px;margin-top:20px}
.digital-lab .signal-card{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:15px;row-gap:0;padding:18px 20px;min-height:0}
.digital-lab .signal-card .icon{grid-column:1;grid-row:1/4;width:40px;height:40px;margin:1px 0 0}
.digital-lab .signal-card h3,.digital-lab .signal-card p,.digital-lab .signal-card .text-link{grid-column:2}
.digital-lab .signal-card h3{font-size:1.18rem;margin:0}
.digital-lab .signal-card p{margin:8px 0 0;line-height:1.55}
.digital-lab .signal-card .text-link{margin-top:9px}

.digital-lab .data-screen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start;min-height:0;padding:24px;background:linear-gradient(180deg,#071d34 0%,#06233f 100%);box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.1)}
.digital-lab .data-screen:before{right:-120px;top:-120px;width:300px;height:300px;background:radial-gradient(circle,rgba(26,75,240,.32),transparent 66%)}
.digital-lab .data-top{grid-column:1/-1;margin:0 0 10px;align-items:center}
.digital-lab .data-pill{font-size:0;background:transparent;border:0;padding:0;color:#a9bed0}
.digital-lab .data-pill:first-child{display:inline-flex;align-items:center;gap:8px}
.digital-lab .data-pill:first-child::after{content:"360Web System";font-size:.8rem;font-weight:700;color:#fff}
.digital-lab .data-pill:nth-child(2)::after{content:"alles verbunden";font-size:.76rem;font-weight:600;color:#9fb4c7}
.digital-lab .pulse-dot{width:8px;height:8px;background:#47d7a1;box-shadow:0 0 0 4px rgba(71,215,161,.09)}
.digital-lab .data-metrics{display:contents}
.digital-lab .data-metric,.digital-lab .terminal-card{min-height:134px;padding:16px;border-radius:var(--radius-sm);background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);font-family:var(--body)}
.digital-lab .data-metric strong{display:block;font-size:0;letter-spacing:0;color:#fff}
.digital-lab .data-metric strong::before{display:block;margin-bottom:9px;color:#7fa0ff;font-size:.7rem;font-weight:700;letter-spacing:.08em}
.digital-lab .data-metric strong::after{display:block;font-family:var(--display);font-size:1.15rem;font-weight:700;letter-spacing:-.03em;color:#fff}
.digital-lab .data-metric small{display:block;margin-top:6px;font-size:0;color:#9fb4c7;line-height:1.45}
.digital-lab .data-metric small::after{font-size:.76rem}
.digital-lab .data-metric:nth-child(1) strong::before{content:"01"}
.digital-lab .data-metric:nth-child(1) strong::after{content:"Website"}
.digital-lab .data-metric:nth-child(1) small::after{content:"Sichtbarkeit, Inhalte & Conversion"}
.digital-lab .data-metric:nth-child(2) strong::before{content:"02"}
.digital-lab .data-metric:nth-child(2) strong::after{content:"Software"}
.digital-lab .data-metric:nth-child(2) small::after{content:"Web Apps, Portale & Funktionen"}
.digital-lab .data-metric:nth-child(3) strong::before{content:"03"}
.digital-lab .data-metric:nth-child(3) strong::after{content:"Analyse"}
.digital-lab .data-metric:nth-child(3) small::after{content:"Tracking, Daten & Auswertung"}
.digital-lab .terminal-card{margin:0;color:#fff;font-size:0;background:rgba(255,255,255,.055)}
.digital-lab .terminal-card span{display:none}
.digital-lab .terminal-card::before{content:"04";display:block;margin-bottom:9px;color:#7fa0ff;font-size:.7rem;font-weight:700;letter-spacing:.08em}
.digital-lab .terminal-card::after{content:"Support\A Hosting, Domains, Wartung & technische Hilfe";white-space:pre-line;display:block;font-family:var(--body);font-size:.76rem;line-height:1.55;color:#9fb4c7}
.digital-lab .terminal-card{position:relative}
.digital-lab .terminal-card::first-line{font-family:var(--display);font-size:1.15rem;font-weight:700;color:#fff}
.digital-lab .bar-list,.digital-lab .orbit{display:none}

@media(max-width:1050px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-copy{padding-top:0}
  .hero-visual{padding-top:0}
  .digital-lab .signal-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .hero{padding:48px 0 62px}
  .hero h1{font-size:clamp(2.05rem,9vw,3.3rem)}
  .hero h1 + .lead{margin-top:17px}
  .hero-actions{margin-top:22px}
  .section{padding:60px 0}
  .digital-lab .service-strip{grid-template-columns:1fr 1fr}
  .digital-lab .data-screen{padding:20px}
}
@media(max-width:520px){
  .digital-lab .service-strip{grid-template-columns:1fr}
  .digital-lab .signal-card{grid-template-columns:38px minmax(0,1fr);padding:16px}
  .digital-lab .signal-card .icon{width:36px;height:36px}
  .digital-lab .data-screen{grid-template-columns:1fr}
  .digital-lab .data-top{grid-column:1}
}