/* TEC — Verhalten beim Schmalerziehen. Schwellen aus der Design-Phase. */

@media (max-width:1100px){
  /* Hero stapelt, das Foto bricht aus dem Satzspiegel aus */
  .hero .wrap{ flex-direction:column-reverse; gap:30px; }
  .hero-text{ padding-top:0; }
  .hero-bild{
    flex:none;                 /* in der Spalte wirkt flex-grow senkrecht */
    width:100vw; margin-left:calc(50% - 50vw); height:340px;
  }

  /* Gestapelt steht der Text unten. Die Zeichnung sitzt dann unter ihm und
     wird vom Abschnittsrand angeschnitten (TE, 27.09.2026) — sie haengt nicht
     mehr am Portraet, das hier ohnehin oben ueber die volle Breite laeuft. */
  .hero .wrap::before{
    top:auto; height:300px; bottom:-40px; left:0; right:0;
    -webkit-mask-position:right bottom;
            mask-position:right bottom;
    -webkit-mask-size:auto 100%;
            mask-size:auto 100%;
  }
  .hero-verlauf{ background:linear-gradient(0deg,var(--ink) 3%,rgba(23,26,28,0) 58%); }

  .split{ flex-direction:column; gap:26px; }
  .split > .side{ flex:auto; }
  .klammer .side{ display:none; }
  /* Text laeuft hier ueber die volle Breite — das Bild tritt deutlich zurueck */
  .klammer::before{ left:calc(50% - 50vw); width:100vw; opacity:.22;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 55%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 55%, transparent 100%); }
  .cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .aussen{ flex-direction:column; gap:26px; }
  .nav-links a{ display:none; }        /* Menü folgt in Phase 4 */
}

@media (max-width:760px){
  .cols-2, .cols-3, .cols-4{ grid-template-columns:1fr; }
  .abschluss{ flex-direction:column; align-items:flex-start; gap:30px; }
  .hero-bild{ height:280px; }
  .hero-bu{ padding:60px 22px 16px; }
  .hero-bu-name{ font-size:14px; }
  .hero-bu-rolle{ font-size:12px; max-width:34ch; }
  .section{ padding:56px 0 60px; }
  .fall{ padding:26px 22px; }
  .fall.quer .fall-banner{ width:calc(100% + 44px); margin:-26px -22px 0; }
  .aussen{ padding:24px 22px; }
  .brand-logo{ width:52px; }
  :root{ --nav-h:68px; }
}

@media (max-width:1100px){
  .cta-mitte-inner{ flex-direction:column; align-items:flex-start; gap:24px; }
  .ueber{ flex-direction:column; gap:28px; }
  .ueber-bild{ flex:none; width:100%; max-width:320px; }
  .vergleich{ font-size:15px; }
  .vergleich th, .vergleich td{ padding:12px 8px; }
}
@media (max-width:760px){
  /* Tabelle darf scrollen statt die Seite zu sprengen */
  .felder .vergleich, .felder-hell .vergleich{ min-width:520px; }
  .felder{ overflow-x:auto; }

  /* Vorher—Nachher: zwei Spalten haetten hier 149 px. Stattdessen gestapelt
     und paarweise beschriftet — die Zugehoerigkeit traegt dann das Label,
     nicht die Spalte. Die Kopfzeile faellt weg, sie waere doppelt. */
  .wandel{ grid-template-columns:1fr; gap:0; }
  .wandel-kopf{ display:none; }
  .wandel .vorher{ border-top:1px solid var(--line); padding:14px 0 8px; }
  .wandel .nachher{ border-top:0; padding:0 0 16px; }
  .wandel .vorher::before, .wandel .nachher::before{
    display:block; font-size:12px; font-weight:700; letter-spacing:.17em;
    text-transform:uppercase; margin-bottom:5px;
  }
  .wandel .vorher::before{ content:"Bisher"; color:var(--grey); }
  .wandel .nachher::before{ content:"Ab jetzt"; color:var(--accent-dark); }

  /* Breite Fallkarte: die zwei Innenspalten stapeln */
  .fall.quer .quer-innen{ grid-template-columns:1fr; gap:24px; }
}

/* ---------- Mobiles Menü ---------- */
@media (max-width:1100px){
  .menu-knopf{
    display:flex; flex-direction:column; gap:5px; margin-left:auto;
    width:26px; padding:8px 0; cursor:pointer;
  }
  .menu-knopf span{ height:2px; background:var(--on-dark); border-radius:1px; }
  .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--ink); border-bottom:1px solid var(--line-dark);
    padding:8px 24px 22px;
  }
  .menu-schalter:checked ~ .nav-links{ display:flex; }
  .nav-links a{ display:block; padding:14px 0; font-size:17px; }
  .nav-links .btn{ margin-top:12px; }
  .nav-inner{ position:relative; }
}